การเปิดเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ทำได้หลายวิธี เลือกวิธีที่คุณชื่นชอบจากข้อมูลอ้างอิงที่เข้าใจง่ายนี้
คุณเข้าถึงเครื่องมือสำหรับนักพัฒนาเว็บโดยใช้ UI หรือแป้นพิมพ์ของ Chrome ได้โดยทำดังนี้
- จากเมนูแบบเลื่อนลงใน Chrome
- ใช้ทางลัดเฉพาะที่เปิดองค์ประกอบ คอนโซล หรือแผงล่าสุดที่คุณใช้
และดูวิธีเปิดเครื่องมือสำหรับนักพัฒนาเว็บโดยอัตโนมัติสำหรับทุกแท็บใหม่
เปิดเครื่องมือสำหรับนักพัฒนาเว็บจากเมนู Chrome
หากต้องการใช้ UI คุณเข้าถึงเครื่องมือสำหรับนักพัฒนาเว็บจากเมนูแบบเลื่อนลงใน Chrome ได้
เปิดแผงองค์ประกอบเพื่อตรวจสอบ DOM หรือ CSS
หากต้องการตรวจสอบ ให้คลิกขวาที่องค์ประกอบในหน้า แล้วเลือกตรวจสอบ
เครื่องมือสำหรับนักพัฒนาเว็บจะเปิดแผงองค์ประกอบและเลือกองค์ประกอบในแผนผัง DOM ในแผงรูปแบบ คุณจะเห็นกฎ CSS ที่ใช้กับองค์ประกอบที่เลือก
เปิดแผงล่าสุดที่คุณใช้จากเมนูหลักของ Chrome
หากต้องการเปิดแผงเครื่องมือสำหรับนักพัฒนาเว็บล่าสุด ให้คลิกปุ่ม ที่ด้านขวาของแถบที่อยู่ แล้วเลือกเครื่องมือเพิ่มเติม > เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์
หรือจะเปิดแผงสุดท้ายด้วยทางลัดก็ได้ ดูข้อมูลเพิ่มเติมได้ในส่วนถัดไป
เปิดแผงด้วยทางลัด: องค์ประกอบ คอนโซล หรือแผงสุดท้าย
หากต้องการแป้นพิมพ์ ให้กดแป้นพิมพ์ลัดใน 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
- I กำหนดตัวเลือกของคุณ
แป้นพิมพ์ลัด C จะเปิดแผงองค์ประกอบในโหมดเครื่องมือตรวจสอบ โหมดนี้แสดงเคล็ดลับเครื่องมือที่มีประโยชน์เมื่อคุณวางเมาส์เหนือองค์ประกอบในหน้าเว็บ คุณยังสามารถคลิกองค์ประกอบใดก็ได้เพื่อดู CSS ขององค์ประกอบในแผงองค์ประกอบ > รูปแบบ
ดูแป้นพิมพ์ลัดทั้งหมดสำหรับเครื่องมือสำหรับนักพัฒนาเว็บได้ที่แป้นพิมพ์ลัด
เปิดเครื่องมือสำหรับนักพัฒนาเว็บโดยอัตโนมัติในทุกแท็บใหม่
เรียกใช้ Chrome จากบรรทัดคำสั่งและส่งแฟล็ก --auto-open-devtools-for-tabs
:
ออกจากอินสแตนซ์ของ 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
ขั้นตอนถัดไปคือ
ถัดไป ให้ดูวิดีโอต่อไปนี้เพื่อเรียนรู้เกี่ยวกับทางลัดและการตั้งค่าที่มีประโยชน์สำหรับการนำทางในเครื่องมือสำหรับนักพัฒนาเว็บที่รวดเร็วขึ้น
หากต้องการประสบการณ์การเรียนรู้แบบลงมือปฏิบัติจริง โปรดดูวิธีปรับแต่งเครื่องมือสำหรับนักพัฒนาเว็บ