ภาพรวม

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