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

Matthias Rohmer

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

Chrome 151 มีวิดเจ็ตเพิ่มเติมสำหรับคำแนะนำทีละขั้นตอนสำหรับ Agent ในความช่วยเหลือจาก AI, การแบ่งย่อยความเฉพาะเจาะจงของ CSS โดยละเอียดในแท็บ "รูปแบบ" การรองรับองค์ประกอบเสมือน ::interest-button และการอัปเดตครั้งใหญ่สำหรับเซิร์ฟเวอร์ DevTools MCP

เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome สำหรับ 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 เพื่อเพิ่มประสิทธิภาพแบนด์วิดท์และประสิทธิภาพการแยกวิเคราะห์สำหรับไคลเอ็นต์ที่รองรับ
  • การกำหนดเส้นทางของหน้าเว็บแบบหลาย Agent พร้อมกันและบริบทที่แยกกัน: --experimentalPageIdRouting ช่วยให้ Agent ย่อยทำงานแบบขนานในแท็บเบราว์เซอร์ต่างๆ ได้พร้อมกันโดยใช้การกำหนดเส้นทาง pageId ที่ชัดเจน พารามิเตอร์โหมด --isolated และ isolatedContext จะสร้างโปรไฟล์และพื้นที่เก็บข้อมูล Chrome ชั่วคราวต่อเซสชัน

หากต้องการดูข้อมูลเพิ่มเติมและเริ่มต้นใช้งาน โปรดไปที่ที่เก็บ DevTools for agents ใน GitHub

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

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

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

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

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

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

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

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

ปัญหาของ Chromium: 353436867, 453705247, 524406293, 457696384, 524131115

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

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

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

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

ปัญหาของ Chromium: 497855658, 423838364, 40833016

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

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

  • การรองรับ 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)
  • คอนโซล: เพิ่มคำแนะนำเครื่องมือแบบเต็มข้อความที่เข้าถึงได้สำหรับค่าสตริง Live Expression ที่ถูกตัดให้สั้นลงใน Pins ของคอนโซลtitle