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

Matthias Rohmer

เผยแพร่: 30 มิถุนายน 2026

Chrome 150 นำการแก้ไขข้อบกพร่องของหน่วยความจำที่ได้รับการปรับปรุงมาสู่ DevTools สำหรับเอเจนต์ ปรับปรุงความช่วยเหลือจาก AI ด้วยวิดเจ็ตเพิ่มเติม และเปิดตัวความสามารถในการแก้ไขกฎ CSS @container และ @function อย่างเต็มรูปแบบ

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

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

ฟีเจอร์และการปรับปรุงที่สำคัญตั้งแต่รุ่นล่าสุดมีดังนี้

• ชุดเครื่องมือแก้ไขข้อบกพร่องของหน่วยความจำ (--experimentalMemory): ตอนนี้เอเจนต์สามารถจับภาพ และวิเคราะห์สแนปชอตฮีป V8 ได้โดยตรงเพื่อวินิจฉัยการรั่วไหลของหน่วยความจำ JavaScript และวิเคราะห์ลําดับชั้นการคงอยู่ออบเจ็กต์
• การจัดการส่วนขยาย Chrome (--categoryExtensions): ตัวแทนสามารถจัดการ วงจรการใช้งานส่วนขยาย (ติดตั้ง ถอนการติดตั้ง โหลดซ้ำ แสดงรายการ) และบันทึก บันทึกคอนโซลของ Service Worker ในเบื้องหลังเพื่อการวินิจฉัย
• ทักษะของเอเจนต์ที่รวมไว้: ตอนนี้เราได้เผยแพร่ไดเรกทอรี skills/ โดยตรง ในการเผยแพร่แพ็กเกจ npm ซึ่งช่วยให้เอเจนต์ไคลเอ็นต์ MCP ค้นพบและดำเนินการเวิร์กโฟลว์การเรียกดูและการแก้ไขข้อบกพร่องเฉพาะทางได้โดยอัตโนมัติ
• การเพิ่มประสิทธิภาพโทเค็นและเอาต์พุต: การจำกัดขนาดภาพหน้าจอที่ แหล่งที่มาจะช่วยลดการใช้โทเค็น และการรองรับ TOON (Token-Oriented Object Notation) แบบทดลองจะช่วยเพิ่มประสิทธิภาพการจัดรูปแบบ Structured Data
• การนำทางและบริบทที่ดียิ่งขึ้น: list_pages ตอนนี้มีชื่อหน้า พร้อมกับ URL และรหัสเป้าหมายเพื่อการเลือกบริบทแบบหลายแท็บที่ดียิ่งขึ้น ขณะที่allowedUrlPatternและblockedUrlPatternตัวเลือกการกำหนดค่า บังคับใช้การรักษาความปลอดภัยขอบเขตการท่องเว็บอย่างเข้มงวด

หากต้องการดูข้อมูลอัปเดตล่าสุดเกี่ยวกับ DevTools สำหรับเอเจนต์และร่วมสนับสนุน โปรดไปที่ที่เก็บ GitHub

ข้อมูลเชิงลึกที่ละเอียดยิ่งขึ้นในความช่วยเหลือจาก AI

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

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

รองรับการแก้ไขอย่างเต็มรูปแบบสำหรับกฎ @ เพิ่มเติมของ CSS

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

• การแก้ไขกฎ@containerในตำแหน่ง: ตอนนี้คุณแก้ไขชื่อคอนเทนเนอร์และเงื่อนไขการค้นหาในกฎ CSS @container ได้โดยตรง ซึ่งช่วยให้ทดสอบการออกแบบการค้นหาคอนเทนเนอร์ที่ตอบสนองได้อย่างราบรื่น
• การแก้ไขกฎ @function CSS: เพิ่มการรองรับการแก้ไขกฎ CSS @function ที่กำหนดเองอย่างเต็มรูปแบบ
• @counter-styleการแก้ไขกฎ: เพิ่มการเติมโค้ดอัตโนมัติสำหรับพร็อพเพอร์ตี้ list-style-type โดยลิงก์พร็อพเพอร์ตี้เหล่านั้นกับคำจำกัดความ @counter-style ที่เกี่ยวข้องโดยตรง
• ยุบกฎที่ไม่มีส่วนช่วย: การตั้งค่ากำหนดใหม่ช่วยให้คุณ ยุบกฎรูปแบบ CSS ที่ไม่มีส่วนช่วย เพื่อให้แผงรูปแบบ เน้นเฉพาะรูปแบบที่ใช้งานอยู่

ปัญหาเกี่ยวกับ Chromium: 507611251, 41491726, 480080406, 351662727, 514846131

รองรับการยกเลิกการทำซ้ำของเบรกพอยต์และการแมปแหล่งที่มาแบบเรียกซ้ำในแหล่งที่มา

แผงแหล่งที่มามีการแก้ไขข้อบกพร่องที่แม่นยำยิ่งขึ้นในไปป์ไลน์การสร้างที่ซับซ้อนและทันสมัย

• การขจัดข้อมูลที่ซ้ำกันของเบรกพอยต์เชิงตรรกะ: เครื่องหมายเบรกพอยต์ในแถบแสดงหมายเลขบรรทัด จะขจัดข้อมูลที่ซ้ำกันในแพ็กเกจที่แยกโค้ดและเทมเพลต SSR/ไคลเอ็นต์ที่คอมไพล์แล้ว โดยใช้การแมปตำแหน่งที่ใกล้ที่สุดที่แก้ไขแล้ว ซึ่งจะช่วยป้องกันไม่ให้มีตัวบ่งชี้เบรกพอยต์ซ้ำ เมื่อแก้ไขข้อบกพร่องของโค้ดที่แชร์ในหลายๆ ชิ้นหรือ สภาพแวดล้อม
• Source Map แบบเรียกซ้ำ EvalOriginและแบบซ้อน: ตอนนี้ดีบักเกอร์รองรับโครงสร้างEvalOriginแบบเรียกซ้ำและเชนการแปลแบบซ้อนใน Source Map แล้ว เพื่อให้มั่นใจว่า Stack Trace และลักษณะการทำงานแบบทีละขั้นตอนจะถูกต้องในเวิร์กโฟลว์การคอมไพล์แบบหลายขั้นตอน
• แป้นพิมพ์ลัดไปที่บรรทัด: เพิ่ม ALT + G เป็นแป้นพิมพ์ลัดเพิ่มเติม สำหรับการนำทาง "ไปที่บรรทัด" ในเอดิเตอร์ เพื่อหลีกเลี่ยงการขัดแย้งกับ แป้นพิมพ์ลัด Gemini ใน Chrome ใหม่
• การจัดรูปแบบแอตทริบิวต์การนำเข้า: อัปเดตตัวแยกวิเคราะห์ Acorn พื้นฐานเพื่อ รองรับการจัดรูปแบบการพิมพ์ที่สวยงามสำหรับไวยากรณ์แอตทริบิวต์การนำเข้า JavaScript มาตรฐาน

ปัญหาเกี่ยวกับ Chromium: 493674242, 485142682, 480172712, 491167992

การรักษาความปลอดภัยและการเพิ่มความแข็งแกร่งแบบข้ามต้นทางในเครื่องมือสำหรับนักพัฒนาเว็บ

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

• การป้องกัน Self-XSS สำหรับข้อความสด: เพิ่มกล่องโต้ตอบคำเตือน Self-XSS และกลไกการป้องกันเมื่อสร้างข้อความสดในConsole
• รายการที่อนุญาตสำหรับการนำทางของเครื่องบันทึกและยืนยันการเล่นซ้ำ: ตอนนี้แผงเครื่องบันทึก จะบังคับใช้รายการที่อนุญาตสำหรับการนำทางอย่างเข้มงวดเพื่อป้องกันการไปยังหน้าเว็บที่มีสิทธิ์สูง ควบคู่ไปกับการยืนยันแหล่งที่มาของส่วนขยายอย่างเข้มงวดภายใน ส่วนการเล่นซ้ำ
• ข้อจำกัดการลบล้างเครือข่ายของส่วนขยาย: การลบล้างเครือข่ายที่จัดการโดยส่วนขยายจะบังคับใช้นโยบายโฮสต์ของ runtime_blocked_hosts อย่างเคร่งครัด
• การสร้าง @font-face ที่ปลอดภัย: ปรับโครงสร้าง@font-faceการสร้างกฎ โดยใช้ CSSStyleSheet API และการแปลงสตริง URL ที่ปลอดภัยเพื่อป้องกันการแทรก CSS ผ่าน URL ข้อมูล

ไฮไลต์อื่นๆ

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

• ประสิทธิภาพ: แก้ไขTraceTreeการเพิ่มขนาดการโอนสำหรับคำขอเครือข่ายที่แคชไว้ โดยบังคับให้ขนาดการโอนเป็น 0 ไบต์เมื่อแคชที่ระบุตรงกัน
• ประสิทธิภาพ: อัปเดตตัวจัดรูปแบบประสิทธิภาพเพื่อรองรับข้อมูลภาคสนามของรายงานประสบการณ์ของผู้ใช้ (UX) ของ Chrome (CrUX) deviceScope ที่ไม่บังคับ
• ประสิทธิภาพ: เปิดใช้การเลื่อนแนวนอนในตารางแผนภูมิการเรียกเพื่อป้องกัน การตัดข้อความที่ยาวเกินไปใน URL ของไฟล์ที่ยาว
• ประสิทธิภาพ: แก้ไขการแสดงผลซ้ำที่ใช้งานไม่ได้และการเสียหายของสถานะ DOM ใน แถบด้านข้างข้อมูลเชิงลึกในไฟล์การติดตามหลายไฟล์
• ประสิทธิภาพ: ย้ายการติดตามการลบล้างไทม์ไลน์และโหมดแก้ไขข้อบกพร่อง จากการตั้งค่า Flag ทดลองไปยังการตั้งค่าเครื่องมือสำหรับนักพัฒนาเว็บมาตรฐาน
• เครือข่าย: เปลี่ยนชื่อคอลัมน์ที่ไม่ถูกต้องกลับไปเพื่อคืนค่าคอลัมน์ Has overrides และแก้ไขตรรกะการจัดเรียงสำหรับการลบล้างส่วนหัวและเนื้อหา
• เครือข่าย: แก้ไขการจัดรูปแบบ CSS attr() ในแถบน้ำตกของ Server-Timing เพื่อให้สีที่สร้างต่อแถวแสดงอย่างถูกต้อง
• เครือข่าย: แก้ไขการสร้างคำสั่งคัดลอกเป็น cURL สำหรับคุกกี้ที่ไม่มีชื่อ
• แอปพลิเคชัน: รายการพื้นที่เก็บข้อมูลในเครื่องและพื้นที่เก็บข้อมูลเซสชันที่เชื่อมต่อในแผงแอปพลิเคชันโดยใช้โครงสร้างพื้นฐาน StorageAgent ใหม่
• แอปพลิเคชัน: แก้ไขลำดับความสำคัญของสถานะการโหลดเชิงคาดการณ์เพื่อให้ URL ที่ โหลดล่วงหน้าและแสดงผลล่วงหน้าสำเร็จทั้ง 2 อย่างแสดงเป็น "แสดงผลล่วงหน้า" ได้อย่างถูกต้อง
• แอปพลิเคชัน: แสดงเคล็ดลับเครื่องมือที่มีค่าตรงตามไบต์ในคอลัมน์ต่างๆ ในมุมมอง Heap Snapshot
• ปัญหา: แสดงประเภทปัญหา BackUINavigationWouldSkipAd เมื่อใดก็ตามที่ การย้อนกลับจะข้ามรายการโฆษณา
• ปัญหา: เพิ่มการรองรับการแสดงปัญหาเกี่ยวกับคำขอการยืนยันอีเมล (EmailVerificationRequestIssue)
• Lighthouse: เพิ่มช่องทำเครื่องหมายหมวดหมู่การท่องเว็บแบบ Agentic AI (ปิดใช้โดยค่าเริ่มต้น) ในแผงการกำหนดค่า Lighthouse และอัปเดตเครื่องมือ Lighthouse ที่รวมไว้เป็น v13.3.0

ปัญหาใน Chromium: 518021339, 40908621, 517519019, 487755345, 505284391, 465915378, 512908993, 40543651

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

Chrome 150 มีการปรับปรุงหลายอย่างเกี่ยวกับการประกาศของโปรแกรมอ่านหน้าจอ โครงสร้างวิดเจ็ต และความหมายของ ARIA ในเครื่องมือสำหรับนักพัฒนาเว็บ ดังนี้

• ปรับปรุงการอ่านออกเสียงของโปรแกรมอ่านหน้าจอเมื่อเลือกแท็บและไปยังส่วนต่างๆ ภายในแท็บ "สไตล์"
• เพิ่มเคล็ดลับเครื่องมือที่สื่อความหมายในไอคอนปิดกล่องโต้ตอบ และอนุญาตให้ใช้แอตทริบิวต์รายละเอียดและคำอธิบาย ARIA ในเคล็ดลับเครื่องมือ
• บังคับใช้บทบาท ARIA menuitem ที่เข้มงวดกับรายการในเมนูตามบริบทเพื่อปรับปรุง การไปยังส่วนต่างๆ สำหรับเทคโนโลยีความช่วยเหลือพิเศษ

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