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

Kayce Basques

Jecelyn Yeen

Sofia Emelianova

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

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

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

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

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

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

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

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

DevTools จะเปิดแผงองค์ประกอบและเลือกองค์ประกอบในต้นไม้ DOM ในแท็บรูปแบบ คุณจะเห็นกฎ CSS ที่มีผลกับองค์ประกอบที่เลือก

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

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

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

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

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

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

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

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

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

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

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

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

2. เรียกใช้แอปพลิเคชันเทอร์มินัลหรือบรรทัดคำสั่งที่คุณชื่นชอบ

3. เรียกใช้คำสั่งต่อไปนี้ ทั้งนี้ขึ้นอยู่กับระบบปฏิบัติการของคุณ

• สำหรับ 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

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

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

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