![](https://developer.chrome.com/static/docs/devtools/images/devtools-screenshot.png?authuser=9&%3Bhl=th&hl=th)
DevTools
เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome คือชุดเครื่องมือสําหรับนักพัฒนาเว็บที่สร้างขึ้นในเบราว์เซอร์ Google Chrome โดยตรง เครื่องมือสำหรับนักพัฒนาเว็บช่วยให้คุณแก้ไขหน้าเว็บได้อย่างรวดเร็วและวินิจฉัยปัญหาได้อย่างรวดเร็ว ซึ่งช่วยให้คุณสร้างเว็บไซต์ที่ดีขึ้นและรวดเร็วขึ้นได้
เปิดเครื่องมือสำหรับนักพัฒนาเว็บ
วิธีต่างๆ ที่คุณจะใช้เปิดเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ได้
มีอะไรใหม่ในเครื่องมือสำหรับนักพัฒนาเว็บ
ติดตามการเปลี่ยนแปลงล่าสุดของเครื่องมือสำหรับนักพัฒนาเว็บ
เคล็ดลับเครื่องมือสำหรับนักพัฒนาเว็บ
ชุดวิดีโอสั้นๆ ที่จะช่วยให้คุณเรียนรู้ฟีเจอร์ต่างๆ ในเครื่องมือสำหรับนักพัฒนาเว็บ
คำสั่งและทางลัด
ทำงานเสร็จอย่างรวดเร็ว
เรียกใช้คำสั่งในเมนูคำสั่ง
เปิดเมนูคำสั่ง เรียกใช้คำสั่ง เปิดไฟล์ ดูการดำเนินการอื่นๆ และอีกมากมาย
แป้นพิมพ์ลัด
ข้อมูลอ้างอิงที่ครอบคลุมเกี่ยวกับแป้นพิมพ์ลัด
ปิดใช้ JavaScript
ดูลักษณะและการทํางานของหน้าเว็บเมื่อปิดใช้ JavaScript
จำลองอุปกรณ์เคลื่อนที่ด้วยโหมดอุปกรณ์
จำลองอุปกรณ์เพื่อสร้างเว็บไซต์ที่เน้นอุปกรณ์เคลื่อนที่เป็นหลัก
ค้นหาในทรัพยากรที่โหลด
ค้นหาข้อความในทรัพยากรที่โหลดทั้งหมดด้วยแผงการค้นหา
แผง
ค้นพบประสิทธิภาพของแผงเครื่องมือสำหรับนักพัฒนาเว็บแต่ละแผง
องค์ประกอบ - DOM
เรียนรู้วิธีดูและเปลี่ยนแปลง DOM ของหน้าเว็บ
องค์ประกอบ - CSS
เรียนรู้วิธีดูและเปลี่ยนแปลง CSS ของหน้าเว็บ
คอนโซล
บันทึกข้อความและเรียกใช้ JavaScript
แหล่งที่มา
ดูและแก้ไขไฟล์, สร้างข้อมูลโค้ด, แก้ไขข้อบกพร่อง JavaScript และตั้งค่าพื้นที่ทำงาน
เครือข่าย
บันทึกคำขอเครือข่าย
ประสิทธิภาพ
ประเมินประสิทธิภาพของเว็บไซต์
หน่วยความจำ
ค้นหาปัญหาเกี่ยวกับหน่วยความจำที่ส่งผลต่อประสิทธิภาพของหน้าเว็บ ซึ่งรวมถึงการรั่วไหลของหน่วยความจำ และอื่นๆ
แอปพลิเคชัน
ตรวจสอบ แก้ไข และแก้ไขข้อบกพร่องของเว็บแอป ทดสอบแคช ดูพื้นที่เก็บข้อมูล และอื่นๆ
โปรแกรมบันทึก
บันทึก เล่นซ้ำ วัดความไหลลื่นของผู้ใช้ และแก้ไขขั้นตอน
การแสดงภาพ
ค้นพบคอลเล็กชันตัวเลือกที่ส่งผลต่อการแสดงเนื้อหาเว็บ
ป้อนข้อความอัตโนมัติ
ตรวจสอบและแก้ไขข้อบกพร่องของที่อยู่ที่บันทึกไว้
ปัญหา
ค้นหาและแก้ไขปัญหาเกี่ยวกับเว็บไซต์ของคุณ
ความปลอดภัย
ตรวจสอบว่าหน้าเว็บได้รับการป้องกันอย่างเต็มที่ด้วย HTTPS
เครื่องมือตรวจสอบหน่วยความจำ
ตรวจสอบ ArrayBuffer, TypedArray หรือ DataView ใน JavaScript รวมถึง WebAssembly และหน่วยความจำของแอป C++ Wasm
เงื่อนไขของเครือข่าย
ลบล้างสตริง User Agent
การบล็อกคำขอของเครือข่าย
ทดสอบเว็บไซต์โดยการบล็อกคำขอของเครือข่าย
สื่อ
ดูข้อมูลและแก้ไขข้อบกพร่องของโปรแกรมเล่นสื่อตามแท็บเบราว์เซอร์
ภาพเคลื่อนไหว
ตรวจสอบและแก้ไขภาพเคลื่อนไหว
การเปลี่ยนเส้นทาง
ติดตามการเปลี่ยนแปลงใน HTML, CSS และ JavaScript
ความครอบคลุม
ค้นหาและวิเคราะห์โค้ด JavaScript และ CSS ที่ไม่ได้ใช้
แหล่งข้อมูลสำหรับนักพัฒนาแอป
ตรวจสอบว่าการแมปแหล่งที่มาโหลดสำเร็จหรือไม่ และโหลดด้วยตนเอง
ภาพรวม CSS
ระบุการปรับปรุง CSS ที่สามารถทำได้
ประภาคาร
เพิ่มความเร็วเว็บไซต์ด้วยแผง Lighthouse
ข้อมูลเชิงลึกเกี่ยวกับประสิทธิภาพ
รับข้อมูลเชิงลึกที่นำไปใช้ได้จริงเกี่ยวกับประสิทธิภาพของเว็บไซต์
เครื่องมือตรวจสอบประสิทธิภาพ
ตรวจสอบประสิทธิภาพการโหลดและรันไทม์
แหล่งที่มาด่วน
ดูและแก้ไขไฟล์ต้นฉบับพร้อมกับเข้าถึงแผงอื่นๆ ได้
เซ็นเซอร์
จำลองเซ็นเซอร์ของอุปกรณ์
WebAudio
ดูเมตริก WebAudio API
WebAuthn
จำลอง Authenticator