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

Kayce Basques

Jecelyn Yeen

Sofia Emelianova

การเปิดเครื่องมือสำหรับนักพัฒนาเว็บใน 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:

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

   ประเด็นหลัก: แฟล็กนี้ใช้ได้เฉพาะกับอินสแตนซ์แรกของ Chrome ที่คุณเปิดเท่านั้น หากไม่ได้ผล เช่น ใน Windows โปรดยุติกระบวนการของ 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

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

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

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

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