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

Kayce Basques

Jecelyn Yeen

Sofia Emelianova

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

เมื่อเปิดเครื่องมือสำหรับนักพัฒนาเว็บแล้ว ให้โหลดหน้าเว็บซ้ำโดยมีหรือไม่มีแคชก็ได้

เมื่อเปิดเครื่องมือสำหรับนักพัฒนาเว็บแล้ว คุณจะโหลดหน้าเว็บซ้ำได้ 3 วิธี ในแถบการดำเนินการหลักของหน้าต่าง Chrome ให้กดปุ่มรีเฟรช โหลดซ้ำค้างไว้ แล้วเลือกตัวเลือกใดตัวเลือกหนึ่งต่อไปนี้

• โหลดซ้ำปกติ ใช้แคชเพื่อเพิ่มความเร็วในการโหลดซ้ำ

  แป้นพิมพ์ลัด: Cmd+R (macOS) หรือ Ctrl+R (Windows/Linux)

  หมายเหตุ: check_box ปิดใช้แคชในแผงเครือข่ายจะบังคับให้การโหลดซ้ำตามปกติทั้งหมดไม่ใช้แคช

• โหลดซ้ำแบบเต็ม ข้ามแคชแต่ไม่ล้างแคช

  แป้นพิมพ์ลัด: Cmd+Shift+R (macOS) หรือ Ctrl+Shift+R (Windows/Linux)

• ล้างแคชและโหลดซ้ำแบบฮาร์ด ล้างแคชสำหรับเว็บไซต์ทั้งหมดก่อนที่จะโหลดซ้ำ

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

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

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

   ประเด็นสำคัญ: Flag นี้ใช้ได้กับอินสแตนซ์ 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 ได้สำเร็จแล้ว

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

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