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

แก้ไขข้อบกพร่องด้วย AI

สํารวจว่านวัตกรรม AI ในเครื่องมือสําหรับนักพัฒนาเว็บช่วยให้คุณทําสิ่งต่างๆ ได้มากขึ้นและเร็วขึ้นได้อย่างไร
ให้ Gemini ช่วยคุณวิเคราะห์และปรับปรุงการจัดรูปแบบ เครือข่าย แหล่งที่มา และประสิทธิภาพของเว็บไซต์
ใช้ Gemini เพื่อรับคำแนะนำโค้ดขณะเขียนโค้ดในแผงคอนโซลและแผงแหล่งที่มา
ทําความเข้าใจข้อความและข้อผิดพลาดในคอนโซลของเครื่องมือสําหรับนักพัฒนาเว็บ และดูวิธีแก้ไขโดยไม่ต้องคัดลอกและวาง
มอบเครื่องมือที่เชื่อถือได้แบบเดียวกันกับที่คุณใช้ตรวจสอบกิจกรรมเครือข่าย บันทึกการติดตาม และแก้ปัญหาเว็บแอปพลิเคชันภายในเวิร์กโฟลว์ AI ให้กับเอเจนต์การเขียนโค้ด

เชื่อมต่อเซิร์ฟเวอร์ MCP ของเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome (Model Context Protocol) กับเครื่องมือที่คุณเลือก เช่น Gemini CLI, Claude Code, Cline, Copilot และอื่นๆ

ดูข้อมูลเพิ่มเติมใน GitHub

เคล็ดลับเกี่ยวกับเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์

ดูซีรีส์วิดีโอรายเดือนของเราที่จะพาคุณไปดูสถานการณ์การแก้ไขข้อบกพร่องทั่วไปในเครื่องมือสำหรับนักพัฒนาเว็บอย่างสนุกสนาน
มาดูทัวร์ชมแผงประสิทธิภาพที่อัปเดตแล้ว ซึ่งจะแสดงวิธีวัด Core Web Vitals (LCP, CLS, INP) และวิธีรับคำแนะนำที่ปรับให้เหมาะกับคุณจาก Gemini
ออกทะเลไปกับเครื่องมือสำหรับนักพัฒนาเว็บและกลายเป็นโจรสลัดนักแก้จุดบกพร่องกันเถอะ ดูเทคนิคในการจำลองรูปแบบโฟกัส ทดสอบแบบฟอร์มด้วยการป้อนข้อความอัตโนมัติ และแก้ไขข้อผิดพลาดในแบ็กเอนด์ด้วยการลบล้างเครือข่าย
สำรวจประสิทธิภาพของการดีบั๊กที่ AI ช่วยด้วยเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ดูว่าข้อมูลเชิงลึกของ Console, ความช่วยเหลือจาก AI ในการจัดรูปแบบ ประสิทธิภาพ เครือข่าย และแหล่งที่มาจะช่วยเพิ่มประสิทธิภาพเวิร์กโฟลว์ได้อย่างไร
สำรวจเทคนิคขั้นสูงของแผงเครือข่าย ซึ่งรวมถึงวิธีค้นหาจุดคอขวดด้านประสิทธิภาพ แก้จุดบกพร่องของป๊อปอัป กำหนดค่าเงื่อนไขของเครือข่าย ใช้แป้นพิมพ์ลัดเพื่อระบุผู้เริ่มคำขอเครือข่าย และอื่นๆ

ดูข้อมูลเชิงลึกเกี่ยวกับประสิทธิภาพ

เครื่องมือที่หลากหลายที่จะช่วยคุณวัดและเพิ่มประสิทธิภาพด้านต่างๆ ของรันไทม์ เช่น แผงประสิทธิภาพ, Lighthouse และอื่นๆ
ดูข้อมูลเกี่ยวกับฟีเจอร์ทั้งหมดในแผงประสิทธิภาพ เช่น วิธีบันทึกการติดตามประสิทธิภาพ วิธีดูและวิเคราะห์การติดตาม และอื่นๆ
ดูข้อมูลเกี่ยวกับฟีเจอร์ใหม่ของเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ เช่น การปรับเทียบการจำกัด CPU เพื่อช่วยให้คุณตัดสินใจแก้ไขข้อบกพร่องด้านประสิทธิภาพโดยอิงตามข้อมูลจากโลกแห่งความเป็นจริง
ดูข้อมูลเกี่ยวกับข้อมูลเชิงลึกเกี่ยวกับประสิทธิภาพใหม่ ซึ่งเป็นความสามารถของ Lighthouse ได้โดยตรงในแผงประสิทธิภาพของเครื่องมือสำหรับนักพัฒนาเว็บ

ข่าวสารและการอัปเดต

ตรวจสอบและแก้ไขทรัพยากร

ดูข้อมูลเกี่ยวกับฟีเจอร์ทั้งหมดในแผงแหล่งที่มา เช่น วิธีดูและแก้ไขไฟล์ แก้ไขข้อบกพร่อง JavaScript และตั้งค่าเวิร์กスペース
เริ่มใช้งาน
Workspace ช่วยให้คุณบันทึกการเปลี่ยนแปลงที่ทำในเครื่องมือสำหรับนักพัฒนาเว็บไปยังซอร์สโค้ดที่เก็บไว้ในคอมพิวเตอร์ได้ ดูวิธีตั้งค่าพื้นที่ทํางานในโปรเจ็กต์ของคุณเอง
อ่านบทแนะนำ

วิเคราะห์กิจกรรมในเครือข่าย

ดูข้อมูลเกี่ยวกับฟีเจอร์ทั้งหมดในแผงเครือข่าย เช่น ตรวจสอบเนื้อหาการตอบกลับและคำขอ เขียนทับส่วนหัว และอื่นๆ
เริ่มใช้งาน
บทแนะนำแบบปฏิบัติจริงที่แนะนำคุณเกี่ยวกับงานทั่วไปในแผงเครือข่าย
อ่านบทแนะนำ

เครื่องมือเพิ่มเติม

สำรวจฟีเจอร์และความสามารถอื่นๆ ทั้งหมดในเครื่องมือสำหรับนักพัฒนาเว็บ
เรียนรู้วิธีดูและเปลี่ยนแปลง DOM ของหน้าเว็บ
เรียนรู้วิธีดูและเปลี่ยนแปลง CSS ของหน้าเว็บ
ติดตามการเปลี่ยนแปลงใน HTML, CSS และ JavaScript
บันทึกข้อความและเรียกใช้ JavaScript
ประเมินประสิทธิภาพของเว็บไซต์
ค้นหาปัญหาเกี่ยวกับหน่วยความจำที่ส่งผลต่อประสิทธิภาพของหน้าเว็บ ซึ่งรวมถึงการรั่วไหลของหน่วยความจำ และอื่นๆ
ตรวจสอบ แก้ไข และแก้ไขข้อบกพร่องของเว็บแอป ทดสอบแคช ดูพื้นที่เก็บข้อมูล และอื่นๆ
ตรวจสอบและแก้ไขภาพเคลื่อนไหว
บันทึก เล่นซ้ำ วัดความไหลลื่นของผู้ใช้ และแก้ไขขั้นตอน
ค้นพบคอลเล็กชันตัวเลือกที่ส่งผลต่อการแสดงเนื้อหาเว็บ
ตรวจสอบและแก้ไขข้อบกพร่องของที่อยู่ที่บันทึกไว้
ค้นหาและแก้ไขปัญหาเกี่ยวกับเว็บไซต์ของคุณ
ตรวจสอบว่าหน้าเว็บได้รับการป้องกันอย่างเต็มที่ด้วย HTTPS
ดูข้อมูลและแก้ไขข้อบกพร่องของโปรแกรมเล่นสื่อตามแท็บเบราว์เซอร์
จำลองเซ็นเซอร์ของอุปกรณ์
จำลอง Authenticator