มีอะไรใหม่ใน DevTools (Chrome 151)

Matthias Rohmer

เผยแพร่: 28 กรกฎาคม 2026

Chrome 151 เปิดตัววิดเจ็ตเพิ่มเติมสำหรับคำแนะนำแบบทีละขั้นของ Agent ในความช่วยเหลือจาก AI รายละเอียดการแยกความเฉพาะเจาะจงของ CSS ในแท็บ "รูปแบบ" การรองรับ ::interest-button псевдоэлемент และการอัปเดตที่สำคัญสำหรับเซิร์ฟเวอร์ MCP ของเครื่องมือสำหรับนักพัฒนาเว็บ

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

ในรุ่นล่าสุดจนถึง v1.6.0 เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome สำหรับ Agent ได้ขยายความสามารถในการแก้ไขข้อบกพร่องสำหรับ Agent การเขียนโค้ด เช่น Antigravity, Claude, Codex และอื่นๆ อย่างมาก

การอัปเดตในเวอร์ชัน v1.4.0 ถึง v1.6.0 มีดังนี้

  • การแก้ไขข้อบกพร่องของหน่วยความจำที่ดียิ่งขึ้น: get_heapsnapshot_duplicate_strings เครื่องมือใหม่จะตรวจหาการใช้หน่วยความจำอย่างสิ้นเปลืองที่เกิดจากการจัดสรรสตริงที่ซ้ำซ้อนในฮีป JavaScript get_heapsnapshot_details จะแสดงผลจำนวนออบเจ็กต์ทั้งหมดและ ขนาดหน่วยความจำรวม, สแนปชอตฮีปรวมที่กรองได้, เส้นทางการเก็บรักษา รูท GC และเปิดใช้การเปรียบเทียบหน่วยความจำในสแนปชอต
  • การเข้ารหัสรูปแบบ GCF (experimentalGcfFormat): เพิ่มการรองรับการตอบกลับของเครื่องมือที่เข้ารหัส GCF เพื่อเพิ่มประสิทธิภาพแบนด์วิดท์และประสิทธิภาพการแยกวิเคราะห์สำหรับไคลเอ็นต์ที่รองรับ
  • การกำหนดเส้นทางหน้าเว็บแบบหลายเอเจนต์พร้อมกันและบริบทที่แยกกัน: --experimentalPageIdRouting ช่วยให้เอเจนต์ย่อยแบบคู่ขนานทำงานใน แท็บเบราว์เซอร์ต่างๆ พร้อมกันได้โดยใช้pageIdการกำหนดเส้นทางที่ชัดเจน --isolated โหมดและพารามิเตอร์ isolatedContext จะสร้างโปรไฟล์และพื้นที่เก็บข้อมูล Chrome ชั่วคราวต่อเซสชัน

ดูข้อมูลเพิ่มเติมและเริ่มต้นใช้งานได้ที่ที่เก็บเครื่องมือสำหรับนักพัฒนาเว็บสำหรับเอเจนต์ใน GitHub

ความช่วยเหลือจาก AI

รูปภาพ/ภาพหน้าจอ: แผงความช่วยเหลือจาก AI ที่แสดงวิดเจ็ตแทร็กเครือข่ายใหม่ในบรรทัด และคำแนะนำแบบอินเทอร์แอกทีฟที่รองรับตาราง GFM

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

นอกจากนี้ ตอนนี้ข้อความตอบกลับยังรองรับการแสดงตาราง GitHub Flavored Markdown (GFM) อย่างเต็มรูปแบบสำหรับสรุปข้อมูลตารางที่จัดรูปแบบแล้ว

การแบ่งย่อยความเฉพาะเจาะจงของ CSS และ::interest-buttonการรองรับ

เคล็ดลับเครื่องมือใหม่เกี่ยวกับรายละเอียดความจำเพาะของ CSS ในแท็บ "รูปแบบ"

แผงองค์ประกอบมีเครื่องมือตรวจสอบและเขียน CSS ที่ละเอียดยิ่งขึ้นสำหรับ API ของแพลตฟอร์มเว็บสมัยใหม่

  • การแบ่งระดับความจำเพาะของ CSS โดยละเอียด: การวางเมาส์เหนือชื่อตัวเลือกในแท็บรูปแบบจะแสดงเคล็ดลับเครื่องมือโดยละเอียดที่อธิบายว่าคลาส รหัส องค์ประกอบ หรือคลาสเสมือนแต่ละรายการมีส่วนช่วยในการ(a, b, c)คำนวณความจำเพาะอย่างไร นี่เป็นผลงานของชุมชน ขอขอบคุณ @hjanuschka!
  • องค์ประกอบเสมือน ::interest-button: ตอนนี้ DevTools แยกวิเคราะห์และ นำเสนอองค์ประกอบเสมือน ::interest-button CSS ใหม่ (ส่วนหนึ่งของข้อกำหนด HTML interesttarget) ในโครงร่างของทรีองค์ประกอบและแท็บลักษณะ
  • การลิงก์เป้าหมายแบบไม่พร้อมกันสำหรับแอตทริบิวต์ความสัมพันธ์ HTML: ตอนนี้แอตทริบิวต์ HTML เช่น popovertarget, interesttarget และ commandfor จะดึงข้อมูลและลิงก์โหนด DOM เป้าหมายแบบอินไลน์โดยไม่พร้อมกัน
  • การแสดงผลแบบ Lazy สำหรับสไตล์ชีตขนาดใหญ่: ตอนนี้แท็บ Styles จะใช้การตกแต่งพร็อพเพอร์ตี้แบบ Lazy เมื่อองค์ประกอบมีพร็อพเพอร์ตี้ CSS เกิน 200 รายการ ซึ่งจะช่วยลด เวลาการบล็อกการแสดงผลจากหลายวินาทีเหลือเพียงมิลลิวินาที

ปัญหาเกี่ยวกับ Chromium: 353436867, 453705247, 524406293, 457696384, 524131115

การแก้ไขข้อบกพร่องของหน่วยความจำ: การระบุแหล่งที่มาของบริบทดั้งเดิมและการเก็บรักษา Closure

แผงหน่วยความจำที่มีสแนปชอตและเปิดใช้ตัวกรองออบเจ็กต์ที่เก็บไว้โดยบริบท

ตอนนี้การวินิจฉัยหน่วยความจำ JavaScript ที่ซับซ้อนรั่วในเว็บแอปพลิเคชันแบบหลายเฟรมหรือหลายบริบทจะชัดเจนขึ้นอย่างมากในแผงหน่วยความจำ

  • การระบุแหล่งที่มาของบริบท V8 ดั้งเดิม: ตอนนี้สแนปชอตฮีปจะเรียกใช้อัลกอริทึมการระบุแหล่งที่มาแบบ 2 เฟส การอนุมานพอยน์เตอร์แบบคงที่จะแก้ปัญหา native_context maps ส่วนการเข้าถึงกราฟจะติดตามออบเจ็กต์ที่เหลือ ระบบจะระบุแหล่งที่มาของออบเจ็กต์ที่เข้าถึงได้จากบริบทเนทีฟเดียวเป็นบริบทนั้นโดยตรง ส่วนออบเจ็กต์ที่เข้าถึงได้จากหลายบริบทจะจัดหมวดหมู่ไว้ใน Bucket บริบทที่แชร์
  • ตัวกรอง"เก็บไว้โดยบริบท": ตัวกรอง UI ใหม่ในมุมมอง Heap Snapshot ช่วยให้คุณแยกออบเจ็กต์ที่เก็บไว้ผ่านออบเจ็กต์บริบท Closure ของ JavaScript เท่านั้น
  • ลำดับการแสดงพร็อพเพอร์ตี้ที่กำหนดค่าได้: ตัวเลือกเมนูบริบทใหม่ จัดเรียง พร็อพเพอร์ตี้ตามตัวอักษร (เปิดใช้โดยค่าเริ่มต้น) ช่วยให้คุณสลับระหว่าง การจัดเรียงตามตัวอักษรและลำดับการแทรกพร็อพเพอร์ตี้ JS เดิมได้เมื่อ ตรวจสอบพร็อพเพอร์ตี้ออบเจ็กต์ฮีป

ปัญหาเกี่ยวกับ Chromium: 497855658, 423838364, 40833016

API ของส่วนขยายที่แปลงเป็น Promise และการปิดช่องโหว่ด้านความปลอดภัย

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

  • การรองรับ Promise ดั้งเดิม: ตอนนี้เมธอดแบบไม่พร้อมกันใน chrome.devtools.network (getHAR(), Request.getContent()), chrome.devtools.panels และ chrome.devtools.inspectedWindow (eval(), getResources(), Resource.getContent(), Resource.setContent()) จะแสดงออบเจ็กต์ Promise JavaScript มาตรฐานเมื่อเรียกใช้โดยไม่มีพารามิเตอร์การเรียกกลับ
  • ขอบเขตด้านความปลอดภัยของส่วนขยาย: ตอนนี้ส่วนขยาย DevTools ถูกจำกัดไม่ให้ ดึงข้อมูลทรัพยากร HAR ของ URL เป้าหมายที่ถูกบล็อก ต้องเป็นไปตาม สิทธิ์ extensionsOnChromeUrls สำหรับการประเมินข้ามส่วนขยายใน inspectedWindow.eval และบังคับใช้การตรวจสอบ allowFileAccess กับทรัพยากร file://

ไฮไลต์และการแก้ไขอื่นๆ

การปรับปรุงและแก้ไขข้อบกพร่องเล็กๆ น้อยๆ ในรุ่นนี้มีดังนี้

  • ประสิทธิภาพ: เพิ่มเครื่องหมายไทม์ไลน์ Soft FCP (First Contentful Paint) ควบคู่ไปกับเครื่องหมาย Soft LCP และ Soft Navigation พร้อมส่วนหัวของลิ้นชักรายละเอียดที่อัปเดตแล้ว
  • ประสิทธิภาพ: เพิ่มการป้องกันเพื่อข้ามการตรวจสอบแรงกดดันในการประมวลผลระหว่างการปรับเทียบการควบคุมปริมาณ CPU ในอุปกรณ์ Android ที่ไม่มีการรองรับ PressureObserver
  • เครือข่าย: อัปเดตคัดลอกเป็น cURL เพื่อนำหน้า URL เป้าหมายด้วย --url เพื่อ ป้องกันการตีความแฟล็กบรรทัดคำสั่งผิดสำหรับ URL ที่นำหน้าด้วยขีดกลาง
  • แหล่งที่มา: เปิดใช้การแก้ขอบเขตของ Source Map โดยค่าเริ่มต้น ซึ่งจะช่วยปรับปรุง การแก้ขอบเขตตัวแปรและการเลิกย่อสัญลักษณ์ในระหว่างการแก้ไขข้อบกพร่อง
  • การตั้งค่า: อัปเดตค่าที่ตั้งล่วงหน้าของอุปกรณ์จำลองสำหรับ iPhone และ Pixel รุ่นใหม่ๆ ที่มีระยะขอบของพื้นที่ปลอดภัยที่ได้รับการยืนยัน และป้อนข้อมูลล่วงหน้าในช่อง User-Agent ของอุปกรณ์ที่กำหนดเอง ด้วย navigator.userAgent (ปัญหาเกี่ยวกับ Chromium: 40718410, 518215252)
  • การตั้งค่า: อัปเดตเมนูแบบเลื่อนลงของการตั้งค่าการจัดการลิงก์ให้แสดง ชื่อส่วนขยายที่ใช้งานง่ายแทน URL ต้นทางของส่วนขยายแบบดิบ
  • Lighthouse: อัปเดตโมดูล Lighthouse ที่รวมไว้เป็นเวอร์ชัน 13.4.0 (ปัญหาใน Chromium: 40543651)

การปรับปรุงการช่วยเหลือพิเศษ

Chrome 151 มีการปรับปรุงการช่วยเหลือพิเศษดังนี้

  • องค์ประกอบ: กู้คืนระดับการมองเห็นของไอคอนแถบเครื่องมือที่สลับ (เช่น ปุ่มดำเนินการต่อการเรียกใช้สคริปต์) ในโหมดคอนทราสต์สูงของ Windows / @media (forced-colors: active) โดยการนำการลบล้างสีพื้นหลังที่ขัดแย้งกันออก (ปัญหาใน Chromium: 519762185)
  • Console: เพิ่มเคล็ดลับเครื่องมือ title แบบเต็มที่เข้าถึงได้สำหรับค่าสตริง Live Expression ที่ถูกตัดใน Console Pins