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