DevTools
เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome คือชุดเครื่องมือสําหรับนักพัฒนาเว็บที่สร้างขึ้นในเบราว์เซอร์ Google Chrome โดยตรง เครื่องมือสำหรับนักพัฒนาเว็บช่วยให้คุณแก้ไขหน้าเว็บได้อย่างรวดเร็วและวินิจฉัยปัญหาได้อย่างรวดเร็ว ซึ่งช่วยให้คุณสร้างเว็บไซต์ที่ดีขึ้นและรวดเร็วขึ้นได้
เปิดเครื่องมือสำหรับนักพัฒนาเว็บ
วิธีต่างๆ ที่คุณจะใช้เปิดเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ได้
มีอะไรใหม่ในเครื่องมือสำหรับนักพัฒนาเว็บ
ติดตามการเปลี่ยนแปลงล่าสุดของเครื่องมือสำหรับนักพัฒนาเว็บ
เคล็ดลับเครื่องมือสำหรับนักพัฒนาเว็บ
ชุดวิดีโอสั้นๆ ที่จะช่วยให้คุณเรียนรู้ฟีเจอร์ต่างๆ ในเครื่องมือสำหรับนักพัฒนาเว็บ
คำสั่งและทางลัด
ทำงานเสร็จอย่างรวดเร็ว
เรียกใช้คำสั่งในเมนูคำสั่ง
คำแนะนำเกี่ยวกับวิธีเปิดเมนูคำสั่ง เรียกใช้คำสั่ง เปิดไฟล์ ดูการทำงานอื่นๆ และอีกมากมาย
แป้นพิมพ์ลัด
เอกสาร Canonical สำหรับแป้นพิมพ์ลัดของ Chrome DevTools
ปิดใช้ JavaScript
ดูลักษณะและการทํางานของหน้าเว็บเมื่อปิดใช้ JavaScript
จำลองอุปกรณ์เคลื่อนที่ด้วยโหมดอุปกรณ์
ใช้อุปกรณ์เสมือนจริงในโหมดอุปกรณ์ของ Chrome เพื่อสร้างเว็บไซต์ที่เน้นอุปกรณ์เคลื่อนที่
ค้นหาในทรัพยากรที่โหลด
ค้นหาข้อความในทรัพยากรทั้งหมดที่โหลดด้วยแท็บค้นหา
แผง
ค้นพบประสิทธิภาพของแผงเครื่องมือสำหรับนักพัฒนาเว็บแต่ละแผง
องค์ประกอบ - DOM
เรียนรู้วิธีดูและเปลี่ยนแปลง DOM ของหน้าเว็บโดยใช้เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome
องค์ประกอบ - CSS
ดูวิธีดูและเปลี่ยน CSS ของหน้าเว็บโดยใช้เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome
คอนโซล
บันทึกข้อความและเรียกใช้ JavaScript
แหล่งที่มา
ดูและแก้ไขไฟล์ สร้างข้อมูลโค้ด แก้ไขข้อบกพร่องของ JavaScript และตั้งค่า Workspace
เครือข่าย
บันทึกคำขอเครือข่าย
ประสิทธิภาพ
ประเมินประสิทธิภาพของเว็บไซต์ด้วยเครื่องมือสำหรับนักพัฒนาเว็บ
หน่วยความจำ
ค้นหาปัญหาด้านหน่วยความจำที่ส่งผลกระทบต่อประสิทธิภาพของหน้าเว็บ รวมถึงหน่วยความจำรั่วไหล หน่วยความจำที่เพิ่มขึ้น และการมีหน่วยความจำขยะที่สะสมบ่อย
แอปพลิเคชัน
ตรวจสอบ แก้ไข และแก้ไขข้อบกพร่องของเว็บแอป ทดสอบแคช และดูพื้นที่เก็บข้อมูล
โปรแกรมบันทึก
บันทึก เล่นซ้ำ วัดความไหลลื่นของผู้ใช้ และแก้ไขขั้นตอน
การแสดงภาพ
ค้นพบคอลเล็กชันตัวเลือกที่ส่งผลต่อการแสดงเนื้อหาเว็บ
ปัญหา
ค้นหาและแก้ไขปัญหาเกี่ยวกับเว็บไซต์ของคุณ
ความปลอดภัย
ใช้แผงความปลอดภัยเพื่อให้มั่นใจว่าหน้าเว็บได้รับการปกป้องอย่างสมบูรณ์ด้วย HTTPS
เครื่องมือตรวจสอบหน่วยความจำ
ตรวจสอบ ArrayBuffer, TypedArray หรือ DataView ใน JavaScript รวมถึง WebAssembly และหน่วยความจำของแอป C++ Wasm
เงื่อนไขของเครือข่าย
ลบล้างสตริง User Agent ปิดใช้ "เลือก" โดยอัตโนมัติและเลือกจากรายการหรือป้อนสตริงที่กำหนดเอง
สื่อ
ใช้แผงสื่อเพื่อดูข้อมูลและแก้ไขข้อบกพร่องของโปรแกรมเล่นสื่อในแต่ละแท็บเบราว์เซอร์
ภาพเคลื่อนไหว
ตรวจสอบและแก้ไขภาพเคลื่อนไหวด้วยแท็บภาพเคลื่อนไหว
การเปลี่ยนแปลง
ติดตามการเปลี่ยนแปลงใน HTML, CSS และ JavaScript
ความครอบคลุม
ค้นหาและวิเคราะห์โค้ด JavaScript และ CSS ที่ไม่ได้ใช้ใน Chrome DevTools
แหล่งข้อมูลสำหรับนักพัฒนาแอป
ใช้แท็บลิ้นชักทรัพยากรสำหรับนักพัฒนาซอฟต์แวร์เพื่อตรวจสอบว่าแผนที่แหล่งที่มาโหลดสำเร็จหรือไม่และโหลดด้วยตนเอง
ภาพรวม CSS
ระบุการปรับปรุง CSS ที่เป็นไปได้ด้วยแผงภาพรวม CSS
ประภาคาร
เพิ่มความเร็วเว็บไซต์ด้วยแผง Lighthouse
ข้อมูลเชิงลึกเกี่ยวกับประสิทธิภาพ
รับข้อมูลเชิงลึกที่นำไปใช้ได้จริงเกี่ยวกับประสิทธิภาพของเว็บไซต์ด้วยแผงข้อมูลเชิงลึกเกี่ยวกับประสิทธิภาพ
เซ็นเซอร์
จำลองเซ็นเซอร์ของอุปกรณ์
WebAuthn
จำลอง Authenticator