หน้านี้ได้รับการแปลโดย Cloud Translation API

เปิดเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome

Kayce Basques

Jecelyn Yeen

Sofia Emelianova

การเปิดเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ทำได้หลายวิธี เลื��กวิธีที่ต้องการจากข้อมูลอ้างอิงที่ครอบคลุมนี้

คุณสามารถเข้าถึงเครื่องมือสำหรับนักพัฒนาเว็บโดยใช้ UI หรือแป้นพิมพ์ของ Chrome ได้ดังนี้

จากเมนูแบบเลื่อนลงใน Chrome
ด้วยแป้นพิมพ์ลัดเฉพาะที่จะเปิด Elements, Console หรือแผงที่คุณใช้ล่าสุด

นอกจากนี้ โปรดดูวิธีเปิดเครื่องมือสำหรับนักพัฒนาเว็บโดยอัตโนมัติสำหรับทุกแท็บใหม่

หากต้องการใช้ UI คุณสามารถเข้าถึงเครื่องมือสำหรับนักพัฒนาเว็บได้จากเมนูแบบเลื่อนลงใน Chrome

เปิดแผงองค์ประกอบเพื่อตรวจสอบ DOM หรือ CSS

ในการตรวจสอบ ให้คลิกขวาที่องค์ประกอบในหน้า แล้วเลือกตรวจสอบ

ตัวเลือก "ตรวจสอบ" ในเมนูแบบเลื่อนลงใน Chrome

เครื่องมือสำหรับนักพัฒนาเว็บจะเปิดแผงองค์ประกอบและเลือกองค์ประกอบในแผนผัง DOM ในแท็บรูปแบบ คุณจะเห็นกฎ CSS ที่มีผลกับองค์ประกอบที่เลือก

องค์ประกอบที่เลือกในแผงองค์ประกอบ

เปิดแผงสุดท้ายที่คุณใช้จากเมนูหลักของ Chrome

หากต้องการเปิดแผง DevTools สุดท้าย ให้คลิกปุ่ม ทางด้านขวาของแถบที่อยู่ แล้วเลือกเครื่องมือเพิ่มเติม > เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์

ตัวเลือกเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ที่เลือกจากเมนู 3 จุด

หรือจะเปิดแผงล่าสุดด้วยแป้นพิมพ์ลัดก็ได้ ดูข้อมูลเพิ่มเติมได้ในส่วนถัดไป

เปิดแผงด้วยแป้นพิมพ์ลัด: องค์ประกอบ คอนโซล หรือแผงล่าสุด

หากต้องการใช้แป้นพิมพ์ ให้กดแป้นพิมพ์ลัดใน Chrome โดยขึ้นอยู่กับระบบปฏิบัติการของคุณ

ระบบปฏิบัติการ	องค์ประกอบ	คอนโซล	แผงล่าสุด
Windows หรือ Linux	`Ctrl` + `Shift` + C	`Ctrl` + `Shift` + J	`F12` `Ctrl` + `Shift` + I
Mac	`Cmd` + `Option` + C	`Cmd` + `Option` + J	`Fn` + `F12` `Cmd` + `Option` + I

วิธีง่ายๆ ในการจดจำแป้นพิมพ์ลัดมีดังนี้

C ย่อมาจาก CSS
J สำหรับ JavaScript
ฉันหมายถึงตัวเลือกของคุณ

แป้นพิมพ์ลัด C จะเปิดแผงองค์ประกอบในโหมดเครื่องมือตรวจสอบ โหมดนี้จะแสดงเคล็ดลับที่มีประโยชน์เมื่อคุณวางเมาส์เหนือองค์ประกอบในหน้า นอกจากนี้ คุณยังคลิกองค์ประกอบใดก็ได้เพื่อดู CSS ขององค์ประกอบนั้นในแท็บองค์ประกอบ > รูปแบบ

แผงองค์ประกอบในโหมดเครื่องมือตรวจสอบพร้อมเคล็ดลับเครื่องมือ

ดูรายการแป้นพิมพ์ลัดทั้งหมดของเครื่องมือสำหรับนักพัฒนาเว็บได้ที่แป้นพิมพ์ลัด

เปิดเครื่องมือสำหรับนักพัฒนาเว็บโดยอัตโนมัติในทุกแท็บใหม่

เรียกใช้ Chrome จากบรรทัดคำสั่งและส่ง Flag --auto-open-devtools-for-tabs ดังนี้

ออกจากอินสแตนซ์ Chrome ใดๆ ที่กำลังทำงานอยู่

ประเด็นสำคัญ: Flag นี้ใช้ได้กับอินสแตนซ์ Chrome แรกที่คุณเปิดเท่านั้น หากไม่ได้ผล เช่น ใน Windows ให้ตรวจสอบว่าได้สิ้นสุดกระบวนการ Chrome ที่เหลืออยู่จากตัวจัดการงาน
เรียกใช้เทอร์มินัลหรือแอปพลิเคชันบรรทัดคำสั่งที่ต้องการ
เรียกใช้คําสั่งต่อไปนี้ ทั้งนี้ขึ้นอยู่กับระบบปฏิบัติการของคุณ

macOS:

open -a "Google Chrome" --args --auto-open-devtools-for-tabs

Windows:

start chrome --auto-open-devtools-for-tabs

Linux:

google-chrome --auto-open-devtools-for-tabs

ระบบจะเปิดเครื่องมือสำหรับนักพัฒนาเว็บขึ้นโดยอัตโนมัติในทุกแท็บใหม่จนกว่าคุณจะปิด Chrome

ขั้นตอนถัดไปคือ

ถัดไป ให้ดูวิดีโอต่อไปนี้เพื่อดูแป้นพิมพ์ลัดและการตั้งค่าที่มีประโยชน์สำหรับการไปยังส่วนต่างๆ ของเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ได้เร็วขึ้น

หากต้องการประสบการณ์การเรียนรู้แบบลงมือปฏิบัติมากขึ้น โปรดดูวิธีปรับแต่งเครื่องมือสำหรับนักพัฒนาเว็บ