มีอะไรใหม่ในเครื่องมือสำหรับนักพัฒนาเว็บ - พฤศจิกายน 2026

Matthias Rohmer

เผยแพร่เมื่อวันที่ 20 ตุลาคม 2026

Chrome 155 และ Chrome 156 เปิดตัวเวอร์ชันเสถียรในเดือนตุลาคม โดยนำความสามารถใหม่ๆ ในการแก้ไขข้อบกพร่องและการเขียนมาสู่เบราว์เซอร์ของคุณในเดือนพฤศจิกายน ซึ่งรวมถึงการตรวจสอบรูปแบบ CSS ในเครื่องมือสำหรับนักพัฒนาเว็บสำหรับ Agent, เครื่องมือแก้ไข position-area แบบอินเทอร์แอกทีฟสำหรับการกำหนดตำแหน่ง Anchor ของ CSS ในองค์ประกอบ และการวินิจฉัยแหล่งที่มาของโฆษณาและไฟล์ Manifest ของการติดตั้งบนเว็บในแอปพลิเคชัน นอกจากนี้ คุณยังตรวจหาตัวแปรบริบทที่ไม่มีการใช้งานได้ในหน่วยความจำ ตรวจสอบคำเตือนการโหลดล่วงหน้าของ Early Hints และการลบล้างแบบถาวรในเครือข่าย รวมถึงไปยังส่วนต่างๆ ของไทม์ไลน์ได้อย่างราบรื่นยิ่งขึ้นในประสิทธิภาพ

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

เซิร์ฟเวอร์ MCP ของเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome เพิ่มการตรวจสอบสไตล์ CSS, การรองรับไฟล์การกำหนดค่า และการแยกวิเคราะห์การติดตามแบบแยกส่วนสำหรับเอเจนต์การเขียนโค้ด ดังนี้

• การตรวจสอบสไตล์ CSS: ตรวจสอบสไตล์ที่คำนวณและจับคู่ด้วยเครื่องมือ get_css_styles ซึ่งรองรับการแบ่งหน้า (pageSize และ pageIdx) และจัดรูปแบบกฎที่จับคู่ กฎที่รับค่ามา องค์ประกอบจำลอง กฎ @keyframes และ @ (@position-try, @property และ @function)
• การควบคุมไฟล์การกำหนดค่าและเส้นทาง: จัดการแฟล็กเซิร์ฟเวอร์ด้วยไฟล์การกำหนดค่าเฉพาะ กำหนดค่ารูทของระบบไฟล์ที่กำหนดเอง และใช้ --allow-unrestricted-paths โดยค่าเริ่มต้นใน CLI
• การแยกวิเคราะห์บัฟเฟอร์การติดตามแบบแยกส่วน: แยกวิเคราะห์การบันทึกประสิทธิภาพขนาดใหญ่ด้วยโปรแกรมแยกวิเคราะห์บัฟเฟอร์การติดตามแบบแยกส่วนและบัฟเฟอร์การติดตามเริ่มต้นขนาด 1.2 GB เครื่องมือสำหรับนักพัฒนาเว็บยังกำหนดขอบเขตอินสแตนซ์เครื่องมือติดตามต่อการแยกวิเคราะห์เพื่อป้องกันไม่ให้หน่วยความจำรั่วไหลด้วย
• การจัดการกล่องโต้ตอบและความต่อเนื่องของคอนโซล: จัดการกล่องโต้ตอบ JavaScript ที่ทริกเกอร์ระหว่างการดำเนินการของเครื่องมือป้อนข้อมูลโดยอัตโนมัติ และเก็บประวัติข้อความคอนโซลไว้ตลอดการไปยังส่วนต่างๆ ของเอกสารเดียวกัน
• การอัปเดตเมนู: คลิกดาวน์โหลดเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome สำหรับ Agent ในเมนูหลักของเครื่องมือสำหรับนักพัฒนาเว็บเพื่อเปิดวิธีการตั้งค่า

ดูข้อมูลเพิ่มเติมในที่เก็บ chrome-devtools-mcp

องค์ประกอบ: เครื่องมือแก้ไขพื้นที่ตำแหน่งภาพ การเลือก Anchor โดยนัย และการอัปเดตการเขียน CSS

แผงองค์ประกอบจะเปิดตัวเครื่องมือภาพสำหรับการกำหนดตำแหน่ง Anchor ของ CSS และขยายการตรวจสอบ CSS ดังนี้

• เครื่องมือแก้ไขposition-areaแบบภาพ: คลิกแถบสีในบรรทัดข้างการประกาศ position-area ในแท็บรูปแบบเพื่อเลือกพื้นที่ตารางกริดของ Anchor แบบภาพ กำหนดค่าแกนพร้อมกันหรือแยกกัน สลับคีย์เวิร์ด self และย่อคีย์เวิร์ดที่ไม่มีแกนให้สั้นลง
• การเลือก Anchor โดยนัยในเครื่องมือตกแต่ง Popover: คลิกขวาที่เครื่องมือตกแต่ง Popover ในแผนผัง DOM เมื่อองค์ประกอบมี Anchor โดยนัยหลายรายการเพื่อตรวจสอบและข้ามไปยังองค์ประกอบ Anchor ที่เกี่ยวข้อง
• การวางซ้อนกล่องการกำหนดตำแหน่ง Anchor: ตรวจสอบระยะขอบ ระยะห่างจากขอบ เส้นขอบ และกล่องเนื้อหาของบล็อกที่มีการแก้ไขส่วนแทรก (IMCB) โดยตรงบนการวางซ้อนวิวพอร์ตเมื่อแก้ไขข้อบกพร่องขององค์ประกอบที่กำหนดตำแหน่ง Anchor
• wrap-reverse ในเครื่องมือแก้ไข Flexbox: เปิด/ปิด flex-wrap: wrap-reverse โดยตรงจากเครื่องมือแก้ไข Flexbox แบบภาพในแท็บรูปแบบ
• รูปแบบ CSS ที่ไม่ได้ใช้งานสำหรับ@starting-styleและกฎที่รับค่ามา: ตรวจสอบกฎ@starting-styleและส่วนInherited fromที่ไม่ได้ใช้งาน โดยคงสถานะการขยายและยุบด้วยตนเองไว้ตลอดการอัปเดต
• คุณสมบัติที่กำหนดเองแบบมีขีดกลางหลายขีดและการเติมคลาสอัตโนมัติ: ตรวจสอบและแก้ไขคุณสมบัติที่กำหนดเองของ CSS ที่ขึ้นต้นด้วยขีดกลาง 3 ขีดขึ้นไป (เช่น ---theme-color) และกรองคลาสที่ใช้แล้วออกจากคำแนะนำที่เติมข้อความอัตโนมัติของเพิ่มคลาสใหม่

ปัญหาเกี่ยวกับ Chromium: 553335561, 438724570, 413061413, 397184392, 539424116, 533783988

แอปพลิเคชัน: การวินิจฉัยไฟล์ Manifest ของการติดตั้งบนเว็บ แหล่งที่มาของโฆษณา และการอัปเดตตารางพื้นที่เก็บข้อมูล

แผงแอปพลิเคชันและปัญหาจะเพิ่มการวินิจฉัยสำหรับไฟล์ Manifest ของ Web Install, แหล่งที่มาของสคริปต์โฆษณา และการตรวจสอบพื้นที่เก็บข้อมูล ดังนี้

• การวินิจฉัยไฟล์ Manifest ของ Web Install: ตรวจสอบข้อผิดพลาดของไฟล์ Manifest ของ Web Install (navigator.install และ <install>) ในแผงปัญหา ซึ่งครอบคลุมถึงการดึงข้อมูลไม่สำเร็จ ข้อผิดพลาดด้านไวยากรณ์ ค่า start_url ที่ไม่ถูกต้อง ชื่อหรือรหัสที่ขาดหายไป และไฟล์ Manifest ที่ขาดหายไป พร้อมลิงก์โดยตรงไปยังไฟล์ Manifest ที่ได้รับผลกระทบ
• เอกสารประกอบเกี่ยวกับคอลัมน์และเมตริกที่มาของโฆษณา: ดูคอลัมน์ที่มาของโฆษณาใหม่ในส่วนโฆษณาของแผงแอปพลิเคชันเพื่อดูว่าสคริปต์โฆษณาตรงกับเชนสคริปต์ระดับบนหรือกฎรายการตัวกรองหรือไม่ พร้อมกับเคล็ดลับเครื่องมือเอกสารประกอบและลิงก์ดูข้อมูลเพิ่มเติมเกี่ยวกับเมตริกโฆษณา
• หลักสรีรศาสตร์ของตาราง IndexedDB และคุกกี้: ขยายออบเจ็กต์ที่ฝังในตารางกริดข้อมูล IndexedDB ที่มีความสูงของแถวแบบไดนามิกซึ่งจะคงตำแหน่งการเลื่อนไว้ และลบแถวที่เลือกในตารางคุกกี้โดยใช้แป้นพิมพ์หรือเมนูตามบริบท

ปัญหาเกี่ยวกับ Chromium: 333795265, 553428200, 514957134, 555304817, 555304814, 562142155

เครือข่าย: คำเตือนการโหลดล่วงหน้าของ Early Hints และการลบล้างแบบถาวร

แผงเครือข่ายจะปรับแต่งการวินิจฉัย Early Hints, การลบล้างในเครื่อง และเวิร์กโฟลว์ส่วนหัวที่กำหนดเอง ดังนี้

• คำเตือนการโหลดล่วงหน้าของ Early Hints เมื่อปิดใช้แคช: ดูคำเตือนในส่วนส่วนหัวของ Early Hints เมื่อการตอบกลับ 103 Early Hints มีลิงก์โหลดล่วงหน้าขณะที่ปิดใช้แคชทำงานอยู่ ซึ่งจะอธิบายสาเหตุที่ Chrome ละเว้นการโหลดล่วงหน้าเหล่านั้น
• การลบล้างในเครื่องแบบถาวรและคอลัมน์ส่วนหัวที่กำหนดเอง: แสดงการลบล้างเนื้อหาการตอบกลับในเครื่องตลอดการนำทางหน้าเว็บ เก็บการกำหนดค่าคอลัมน์ส่วนหัวของคำขอและส่วนหัวการตอบกลับที่กำหนดเอง รวมถึงลำดับการจัดเรียงตลอดการโหลดซ้ำ และคัดลอกเพย์โหลดคำขอแบบข้อมูลดิบที่ถูกตัดออกจากเมนูตามบริบท

ปัญหาเกี่ยวกับ Chromium: 548701038, 559925510, 563542902, 556269542, 377410082

หน่วยความจำ: การตรวจหาช่องบริบทที่ไม่มีการใช้งานในสแนปชอตฮีป

ตอนนี้แผงหน่วยความจำจะตรวจหาตัวแปร Closure ที่ไม่ได้ใช้ซึ่งยังคงเก็บไว้ในบริบทการดำเนินการ V8 เครื่องมือสำหรับนักพัฒนาเว็บจะแยกวิเคราะห์ข้อมูลเมตาของขอบเขต V8 ที่ฝังอยู่ในสแนปชอตฮีปเพื่อเชื่อมโยงการปิดกับออบเจ็กต์ Context ที่แชร์ จากนั้นจะไฮไลต์ช่องบริบทที่ไม่มีการใช้งานซึ่งยังคงทำงานอยู่เนื่องจาก Closure ที่มีอายุการใช้งานยาวนานที่เกี่ยวข้องเมื่อไม่มี Closure ที่ทำงานอยู่เข้าถึงช่องดังกล่าว โดยจัดเรียงตามผลกระทบต่อหน่วยความจำ

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

ประสิทธิภาพ: การไปยังส่วนต่างๆ ของไทม์ไลน์ที่ราบรื่นยิ่งขึ้นและคงสถานะแผนผังการโทรไว้

แผงประสิทธิภาพช่วยให้การนำทางแผนภูมิ Flame Chart ตอบสนองได้ดียิ่งขึ้น และคงบริบทการวิเคราะห์ไว้ในแผงต่างๆ ดังนี้

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

ปัญหาเกี่ยวกับ Chromium: 553831653, 561396590

ไฮไลต์อื่นๆ

Chrome 155 และ Chrome 156 ยังมีการปรับปรุงต่อไปนี้ในแผงเครื่องมือสำหรับนักพัฒนาเว็บด้วย

• เซ็นเซอร์: ลบล้าง navigator.cpuPerformance โดยตรงจากการควบคุมระดับประสิทธิภาพของ CPU ใหม่ในแผงเซ็นเซอร์ หรือปล่อยให้แสดงค่าที่กำหนดล่วงหน้าของการควบคุม CPU ที่ใช้งานอยู่ (ปัญหาเกี่ยวกับ Chromium: 449760252, 526856234, 526857820)
• โหมดอุปกรณ์: คงค่ากำหนดการปรับขนาดและการซูมอัตโนมัติตามอุปกรณ์ที่จำลองไว้ และคงการลบล้าง Save-Data ไว้เมื่อสลับแถบเครื่องมืออุปกรณ์ (ปัญหาเกี่ยวกับ Chromium: 561306841, 555160483)
• ตัวเลือกสี: ดูคำแนะนำสีคอนทราสต์ APCA สำหรับข้อความสีอ่อนบนพื้นหลังสีเข้ม และแปลงสีที่อยู่นอกขอบเขตเป็น oklab() และ oklch() โดยไม่มีค่า NaN (ปัญหาเกี่ยวกับ Chromium: 560325669, 558821258)
• การช่วยเหลือพิเศษ: ระบุปุ่มเปิด/ปิดตัวกรองนิพจน์ทั่วไปที่ใช้งานอยู่ด้วยจุดบอกสถานะที่ไม่ใช่สี ฟังชื่อพร็อพเพอร์ตี้แบบอักษรที่โปรแกรมอ่านหน้าจอประกาศในภาพรวม CSS และไปยังส่วนต่างๆ ด้วยวงแหวนโฟกัสของแป้นพิมพ์ที่ได้รับการปรับปรุงและการมองเห็นคอนทราสต์สูงในแผงต่างๆ (ปัญหาเกี่ยวกับ Chromium: 556764882, 555848535, 555599825, 553804654)

ปัญหาเกี่ยวกับ Chromium: 449760252, 526856234, 526857820, 561306841, 555160483, 560325669, 558821258, 556764882, 555848535, 555599825, 553804654