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

Kayce Basques

Jecelyn Yeen

Sofia Emelianova

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

เรียกใช้ Chrome จากบรรทัดคำสั่งและส่งแฟล็ก --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

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

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

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