ภาพรวม

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

ดูวิดีโอการสาธิตการใช้งานแบบสดๆ เกี่ยวกับเวิร์กโฟลว์หลักของ DevTools รวมถึงการแก้ไขข้อบกพร่องของ CSS, การสร้างต้นแบบ CSS, การแก้ไขข้อบกพร่องของ JavaScript และการวิเคราะห์ประสิทธิภาพการโหลด

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

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

  • หากต้องการทำงานกับ DOM หรือ CSS ให้คลิกขวาที่องค์ประกอบในหน้าแล้วเลือกตรวจสอบเพื่อไปยังแผงองค์ประกอบ หรือกด Command+Option+C (Mac) หรือ Control+Shift+C (Windows, Linux, ChromeOS)
  • หากต้องการดูข้อความที่บันทึกไว้หรือเรียกใช้ JavaScript ให้กด Command+Option+J (Mac) หรือ Control+Shift+J (Windows, Linux, ChromeOS) เพื่อข้ามไปยังแผงคอนโซลโดยตรง

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

เริ่มต้นใช้งาน

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

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

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

โหมดอุปกรณ์

เปิดโหมดอุปกรณ์ในวิวพอร์ตแล้ว

จำลองอุปกรณ์เคลื่อนที่

แผงองค์ประกอบ

แผงองค์ประกอบ

ดูและเปลี่ยน DOM และ CSS

แผงคอนโซล

แผงควบคุมคอนโซล

ดูข้อความและเรียกใช้ JavaScript จากคอนโซล

แผงแหล่งที่มา

แผงแหล่งที่มา

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

แผงเครือข่าย

แผงเครือข่าย

ดูและแก้ไขข้อบกพร่องของกิจกรรมในเครือข่าย

แผงโปรแกรมอัดเสียง

แผงโปรแกรมอัดเสียง

บันทึก เล่นซ้ำ และวัดความไหลลื่นของผู้ใช้

แผงประสิทธิภาพ

แผงประสิทธิภาพ

ค้นหาวิธีปรับปรุงประสิทธิภาพการโหลดและรันไทม์

แผงหน่วยความจำ

แผงความทรงจำ

ค้นหาและแก้ไขปัญหาเกี่ยวกับหน่วยความจำที่ส่งผลต่อประสิทธิภาพของหน้าเว็บ เช่น การรั่วไหลของหน่วยความจำ

แผงแอปพลิเคชัน

แผงแอปพลิเคชันที่มีส่วน Service Worker เปิดอยู่

ตรวจสอบทรัพยากรทั้งหมดที่โหลด รวมถึงฐานข้อมูล IndexedDB หรือ Web SQL, พื้นที่เก็บข้อมูลในเครื่องและเซสชัน, คุกกี้, แคชของแอปพลิเคชัน, รูปภาพ, แบบอักษร และสไตล์ชีต

แผงความปลอดภัย

แผงความปลอดภัย

แก้ปัญหาเนื้อหาผสม ปัญหาเกี่ยวกับใบรับรอง และอื่นๆ

การมีส่วนร่วม

ส่งรายงานข้อบกพร่องและคำขอฟีเจอร์ใน Crbug ซึ่งเป็นเครื่องมือติดตามข้อบกพร่องของทีมวิศวกร

Crbug

หากต้องการแจ้งข้อบกพร่องหรือคำขอฟีเจอร์ให้เราทราบแต่ไม่ค่อยมีเวลา คุณส่งทวีตมาที่ @ChromeDevTools เราจะตอบกลับและส่งประกาศจากบัญชีเป็นประจำ

Twitter

หากต้องการความช่วยเหลือในการใช้เครื่องมือสำหรับนักพัฒนาเว็บ Stack Overflow เป็นช่องทางที่ดีที่สุด

สแต็กโอเวอร์โฟลว์

หากต้องการรายงานข้อบกพร่องหรือคำขอฟีเจอร์ในเอกสารเครื่องมือสำหรับนักพัฒนาเว็บ ให้เปิดปัญหาเกี่ยวกับ GitHub

ปัญหาเกี่ยวกับเอกสาร

เครื่องมือสำหรับนักพัฒนาเว็บก็มีช่องทาง Slack เช่นกัน แต่ทีมไม่ได้ตรวจสอบอย่างสม่ำเสมอ

Slack