มีอะไรใหม่ในเครื่องมือสำหรับนักพัฒนาเว็บ (Chrome 152)

Matthias Rohmer

เผยแพร่เมื่อ: 25 สิงหาคม 2569

Chrome 152 มีการปรับปรุงการแก้ไขข้อบกพร่องของเครือข่ายอย่างมากด้วยการส่งคำขออีกครั้งและการตรวจสอบเพย์โหลดไบนารี, การตกแต่งองค์ประกอบที่กำหนดเองและการซ้อน CSS ที่ได้รับการปรับปรุงในองค์ประกอบ, Core Web Vitals สำหรับการนำทางแบบนุ่มนวลในเมตริกประสิทธิภาพแบบเรียลไทม์, การส่งออกตารางที่มีโครงสร้างในคอนโซล และการปรับปรุงสำหรับเซิร์ฟเวอร์ MCP ของ DevTools

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

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

• รายละเอียดออบเจ็กต์ของฮีปสแนปชอต (get_heapsnapshot_object_details): ตรวจสอบพร็อพเพอร์ตี้ออบเจ็กต์ JavaScript แบบละเอียด ชื่อคลาส และเส้นทางการเก็บรักษา GC root โดยตรงจากฮีปสแนปชอต
• การกรองบริบท V8 เนทีฟ: กรองออบเจ็กต์สแนปชอตฮีปตามบริบทการดำเนินการเนทีฟและตรวจสอบบริบทเนทีฟในข้อมูลสรุปสแนปชอต
• การปรับปรุงความเสถียรและวงจรของ Daemon: เพิ่มการเก็บรักษาคำขอเครือข่ายแบบจำกัดต่อการนำทาง การตรวจสอบรหัสเซสชัน คำเตือนเกี่ยวกับเวอร์ชันที่ไม่ตรงกันของ CLI กับ Daemon และการหยุดทำงานของ Worker อย่างราบรื่นเมื่อ ทิ้งบริบท

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

เครือข่าย: แก้ไขและส่งคำขออีกครั้ง ข้อมูลเชิงลึกเกี่ยวกับการโหลดล่วงหน้า และการถอดรหัสเพย์โหลดไบนารี

• ส่งคำขอ Fetch และ XHR อีกครั้ง: ตอนนี้รายการในเมนูบริบท "เล่น XHR ซ้ำ" ก่อนหน้านี้ เปลี่ยนเป็นส่งอีกครั้งแล้ว ตอนนี้เครื่องมือนี้รองรับคำขอเครือข่ายที่ดึงข้อมูลได้ทั้งหมด โดยจะแปลงคำขอมาตรฐานเป็นคำสั่งเรียก fetch() พร้อมทั้งรักษาความเที่ยงตรงของการเล่นซ้ำทั้งหมด ควบคู่ไปกับ XHR คำขอจะติดตามและแสดงบริบทการดำเนินการ และผู้เริ่มต้นคอนโซลด้วย
• คอลัมน์โหลดล่วงหน้าและ "คัดลอกเป็นองค์ประกอบการโหลดล่วงหน้า": คอลัมน์ใหม่ที่เจาะจงสำหรับโหลดล่วงหน้าจะแสดงว่ามีการเริ่มคำขอของเครือข่ายโดยใช้การโหลดล่วงหน้าแบบคาดการณ์หรือไม่ นอกจากนี้ คุณยังคลิกขวาที่คำขอใดก็ได้ แล้วเลือกคัดลอกเป็นองค์ประกอบการโหลดล่วงหน้าเพื่อสร้างแท็ก <link rel="preload"> ที่พร้อม วางลงใน HTML ตอนนี้เราได้จัดหมวดหมู่คำแนะนำเบื้องต้นไว้ในคอลัมน์ผู้เริ่มแล้ว
• โปรแกรมดูไบนารีสำหรับเพย์โหลดคำขอ: ตอนนี้แท็บเพย์โหลดมีตัวเลือกวิธีการถอดรหัส (Base64, Hex และ UTF-8) สำหรับเพย์โหลดคำขอแบบไบนารีและแบบบีบอัด ซึ่งจะเหมือนกับแท็บการตอบกลับ
• คอลัมน์หมายเลขคำขอที่ปักหมุด: ตอนนี้ระบบได้ปักหมุดคอลัมน์คำขอ # ไว้ที่ ตำแหน่งแรกในตารางข้อมูลเครือข่ายเพื่อให้ง่ายต่อการอ้างอิงคำขอ
• การกรองโฮสต์ในเว็บไซต์เดียวกัน: การค้นหาโดเมน ชื่อโฮสต์ หรือพอร์ต (เช่น localhost หรือ example.com) ในแถบตัวกรองเครือข่ายจะกรองคำขอในเว็บไซต์เดียวกันได้อย่างถูกต้อง
• การถอดรหัสพารามิเตอร์การค้นหาเริ่มต้น: ตอนนี้ระบบจะถอดรหัสพารามิเตอร์การค้นหาและแบบฟอร์มในแท็บ เพย์โหลดโดยอัตโนมัติสำหรับคำขอทั้งหมด

ปัญหาเกี่ยวกับ Chromium: 40726969, 41299075, 40138847, 40222701, 525848667, 507077182, 498482622, 520437951, 40267477

องค์ประกอบ: เครื่องมือตกแต่งองค์ประกอบที่กำหนดเอง การโต้ตอบตัวเลือกหลักของ CSS ที่ซ้อนกัน และการเลือก$0องค์ประกอบเสมือน

การตรวจสอบและสร้างคอมโพเนนต์ของเว็บและ CSS สมัยใหม่จะรวดเร็วและใช้งานง่ายขึ้นในแผงองค์ประกอบ

• ป้ายตกแต่งองค์ประกอบที่กำหนดเอง: องค์ประกอบ HTML ที่กำหนดเอง (ระบุโดยแท็กที่มีเครื่องหมายขีดคั่นหรือแอตทริบิวต์ is="..." สำหรับองค์ประกอบในตัวที่กำหนดเอง) จะแสดงป้ายตกแต่ง custom-element ในโครงร่างแผนผัง DOM แล้ว
• การโต้ตอบและการเจาะจงของตัวเลือกหลักของ CSS ที่ซ้อนกัน: ตอนนี้การวางเมาส์เหนือ ตัวเลือกหลักในกฎ CSS ที่ซ้อนกันและกฎที่ซ้อนกันที่รับค่ามาจะ ไฮไลต์องค์ประกอบที่ตรงกันในหน้าเว็บและตอบสนองต่อการกรองแท็บรูปแบบ เพิ่มป๊อปโอเวอร์เคล็ดลับเครื่องมือความเฉพาะเจาะจงสำหรับ@nested-declarations กฎ
• การเลือกองค์ประกอบเสมือนผ่าน $0: การเลือกองค์ประกอบเสมือน เช่น ::before หรือ ::after ในแผนผัง DOM ขององค์ประกอบจะผูกองค์ประกอบเหล่านั้นกับ ตัวแปรคอนโซล $0 โดยตรงเพื่อให้ตรวจสอบ JavaScript ได้ทันที
• การเติมข้อความอัตโนมัติสำหรับประเภท text-wrap และ <image>: ตอนนี้แผงรูปแบบจะ แนะนำค่าคีย์เวิร์ดทั้งหมดสำหรับ text-wrap (wrap, nowrap, balance, pretty, stable) และเติมข้อความอัตโนมัติสำหรับพร็อพเพอร์ตี้ CSS ที่ยอมรับประเภทข้อมูล <image>
• การรับรู้แถบเลื่อนของโมเดลกล่อง: ตอนนี้แผนภาพเมตริกของโมเดลกล่องจะคำนวณและแสดงผลขนาดกล่องเนื้อหาได้อย่างถูกต้องเมื่อองค์ประกอบมีแถบเลื่อนที่มองเห็นได้

ปัญหาใน Chromium: 367440148, 535517817, 535522242, 535523039, 537724428, 399305533, 334984154, 383355294, 326260752, 389342065

ประสิทธิภาพ: เมตริกการนำทางแบบนุ่มนวลในเมตริกแบบเรียลไทม์และค่าที่กำหนดล่วงหน้าของภาพหน้าจอที่กำหนดเอง

• การรองรับเมตริกแบบเรียลไทม์สำหรับการนำทางแบบนุ่มนวล: ตอนนี้มุมมองเมตริกแบบเรียลไทม์จะ บันทึกและรายงาน Core Web Vitals (เช่น LCP และ INP) สำหรับการนำทางแบบนุ่มนวลฝั่งไคลเอ็นต์ ในแอปพลิเคชันหน้าเว็บเดียวโดยค่าเริ่มต้น ซึ่งขับเคลื่อนโดยการ อัปเกรดเป็น web-vitals v6.0.0
• ค่าที่กำหนดล่วงหน้าสำหรับการจับภาพหน้าจอที่กำหนดเอง: แสดงค่าที่กำหนดล่วงหน้าสำหรับขนาดเฟรมและจำนวนสูงสุดของภาพหน้าจอที่กำหนดค่าได้สำหรับการติดตาม CDP ในแผงประสิทธิภาพเพื่อปรับแต่งความเที่ยงตรงของการบันทึกภาพภายในงบประมาณหน่วยความจำ
• console.profileEnd()เครื่องมือเปิดเผยการติดตาม: การเรียก console.profileEnd() ใน โค้ดหรือคอนโซลจะเปิดและแสดงการติดตามที่บันทึกไว้โดยอัตโนมัติ ในแผงประสิทธิภาพ
• สรุปแทร็กที่กำหนดเองของ Extensibility API: ตอนนี้สรุปการติดตามประสิทธิภาพจะประมวลผลและนำเสนอกลุ่มแทร็กที่กำหนดเองซึ่งลงทะเบียนโดยใช้ Extensibility API แล้ว

ปัญหาเกี่ยวกับ Chromium: 514721939 490140054 536954453 535506117

Console: ส่งออกตารางเป็นมาร์กดาวน์หรือ CSV และการป้องกันผลข้างเคียง

• คัดลอกตารางคอนโซลเป็น Markdown หรือ CSV: ตอนนี้คุณสามารถคัดลอกตารางที่บันทึกโดยใช้ console.table() ไปยังคลิปบอร์ดโดยตรงเป็นตาราง Markdown หรือข้อมูล CSV ที่จัดรูปแบบจากเมนูตามบริบทได้แล้ว
• การป้องกันการประเมินผลข้างเคียง: การประเมินเมื่อวางเมาส์ของดีบักเกอร์จะป้องกันนิพจน์ที่มี new, เทมเพลตลิเทอรัลที่ติดแท็ก, import() แบบไดนามิก และตัวดำเนินการ delete เพื่อป้องกันการเปลี่ยนแปลงสถานะโดยไม่ตั้งใจขณะหยุดชั่วคราว

ปัญหาใน Chromium: 40924951, 40133606

ไฮไลต์อื่นๆ

การปรับปรุงที่โดดเด่นในระบบย่อยอื่นๆ ของเครื่องมือสำหรับนักพัฒนาเว็บ

• แหล่งที่มา: ตอนนี้การเปิดอย่างรวดเร็วจะจัดลําดับความสําคัญของไฟล์ Workspace ในเครื่องที่มีการเพิ่มคะแนนสูง ซึ่งจะทําให้ไฟล์ Workspace ปรากฏที่ด้านบนเหนือทรัพยากรในเครือข่าย (ปัญหาใน Chromium: 40260136)
• หน่วยความจำ: มุมมองสรุปภาพรวมของฮีปจะแสดงจำนวนออบเจ็กต์ทั้งหมด พร้อมกับขนาดแบบตื้นที่รวบรวมไว้สำหรับประเภทที่เลือก และมีตัวกรองบริบทการดำเนินการดั้งเดิม (ปัญหาเกี่ยวกับ Chromium: 497855658)
• แอปพลิเคชัน: แผงโฆษณาได้ย้ายปุ่มเปิด/ปิดไฮไลต์โฆษณา ไปยังแผงโดยตรง เพิ่มรหัสองค์ประกอบ iframe ของโฆษณาที่คลิกได้เพื่อแสดง เฟรมในลําดับชั้น และเปิดตัวตารางรายละเอียดเมตริกต่อเฟรม (ปัญหาเกี่ยวกับ Chromium: 514957134)
• แอปพลิเคชัน: ออกแบบส่วนล้างข้อมูลเว็บไซต์ใหม่ในแผงพื้นที่เก็บข้อมูล ให้เป็นกลุ่มที่รวมกันและรวมไว้ด้วยกัน (ปัญหาใน Chromium: 375867286) และแก้ไขรายการ Cache Storage ที่ซ้ำกันหลังจากคืนค่า Back-Forward Cache (ปัญหาใน Chromium: 484693244)
• ส่วนขยาย: ตอนนี้เมธอดแบบไม่พร้อมกันใน chrome.devtools.panels จะแสดงผล JavaScript Promise โดยกำเนิดเมื่อเรียกใช้โดยไม่มี Callback (ปัญหาเกี่ยวกับ Chromium: 496604551)
• การตั้งค่า: แยกค่าที่กำหนดไว้ล่วงหน้าสำหรับการควบคุมเครือข่ายเริ่มต้นและการกำหนดค่าการควบคุมที่กำหนดเอง ออกเป็นส่วนต่างๆ (ปัญหาเกี่ยวกับ Chromium: 342409451)
• Lighthouse: อัปเดตโมดูล Lighthouse ที่รวมไว้เป็นเวอร์ชัน 13.4.1 (ปัญหาใน Chromium: 40543651)
• ปัญหา: DevTools จะแสดงคำเตือนเมื่อรูปภาพที่ใช้ loading="lazy" ไม่มีมิติข้อมูล width หรือ height ที่ชัดเจน
• โหมดอุปกรณ์: ปรับเมนูระดับการซูมให้ง่ายขึ้นด้วยตัวเลือกพอดีกับ หน้าต่างแบบรวม และปิดใช้ปุ่มสลับแสดงกรอบอุปกรณ์เมื่อกราฟิก กรอบไม่พร้อมใช้งาน

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

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

• องค์ประกอบและการช่วยเหลือพิเศษ: เพิ่มตัวเลือกเมนูตามบริบทเพื่อสลับ ระหว่างแผนผัง DOM ขององค์ประกอบกับมุมมองแผนผังการช่วยเหลือพิเศษได้อย่างราบรื่น รวมถึง "เลื่อนไปยังมุมมอง" สำหรับโหนดการช่วยเหลือพิเศษ (ปัญหาใน Chromium: 417929842)
• การช่วยเหลือพิเศษ: เพิ่มการรองรับการคัดลอกโหนดและ ซับทรีของโครงสร้างการช่วยเหลือพิเศษเป็นข้อความธรรมดาโดยใช้เมนูตามบริบท (ปัญหาใน Chromium: 417929842)
• องค์ประกอบ: แก้ไขสีไฮไลต์การค้นหาที่มีคอนทราสต์ต่ำในแผงองค์ประกอบ เมื่อเรียกใช้ในโหมดมืด (ปัญหาใน Chromium: 491718898)
• การนำทาง: การยกเลิกการเชื่อมต่อ DevTools ไปยังหน้าต่างแยกต่างหากหรือการเชื่อมต่อกลับไปยังแท็บจะไม่บังคับให้โฟกัสไปที่ปุ่มเมนูหลักอีกต่อไป
• การตั้งค่า: เพิ่มบริบทที่อธิบายถึงการเข้าถึงให้กับปุ่ม "แสดงเพิ่มเติม" และ "แสดง น้อยลง" ในการตั้งค่า AI