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

Sofia Emelianova
Sofia Emelianova
GitHub

เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome (MCP) สำหรับเอเจนต์ AI

ตอนนี้คุณดูตัวอย่างเซิร์ฟเวอร์ Model Context Protocol (MCP) ใหม่ของเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ได้แล้ว ซึ่งจะนำความสามารถของเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome มาสู่ผู้ช่วยเขียนโค้ด AI

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

ดูวิธีการทำงานด้วยตัวคุณเอง

ดูข้อมูลเพิ่มเติมได้ที่เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome (MCP) สำหรับเอเจนต์ AI

แก้ไขข้อบกพร่องของแผนผังทรัพยากร Dependency ของเครือข่ายด้วย Gemini

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

ภาพก่อนและหลังเพิ่มปุ่ม "แก้ไขข้อบกพร่องด้วย AI" ลงในข้อมูลเชิงลึก "แผนผังการขึ้นต่อกันของเครือข่าย"

ส่งออกแชทกับ Gemini

ตอนนี้คุณสามารถส่งออกแชทปัจจุบันกับ Gemini หรือคัดลอกคำตอบของ Gemini ไปยังคลิปบอร์ดได้โดยคลิกปุ่มส่งออกการสนทนาในแถบการดำเนินการด้านบน หรือคัดลอกคำตอบใต้ข้อความของ Gemini ในแชท

ก่อนและหลังเพิ่มปุ่มส่งออกและคัดลอกลงในความช่วยเหลือจาก AI

การกำหนดค่าการติดตามที่คงอยู่ในแผงประสิทธิภาพ

เมื่อกำหนดค่าแทร็กที่บันทึกไว้ในแผงประสิทธิภาพ ตอนนี้ DevTools จะบันทึกการกำหนดค่าและนำไปใช้เมื่อคุณนำเข้ากลับหรือบันทึกแทร็กใหม่

กรองคำขอจากเครือข่ายที่ได้รับการปกป้อง IP

ในแผงเครือข่าย ตอนนี้คุณสามารถกรองคำขอที่ส่งไปยังพร็อกซีการปกป้อง IP ได้แล้ว

ก่อนและหลังเพิ่มตัวกรอง "คำขอที่ได้รับการปกป้องด้วย IP" ลงในแผงเครือข่าย

แท็บองค์ประกอบ > เลย์เอาต์เพิ่มการรองรับเลย์เอาต์แบบก้อนอิฐ

ตอนนี้คุณตรวจสอบเลย์เอาต์แบบก้อนอิฐได้แล้วในแท็บองค์ประกอบ > ลักษณะ

เลย์เอาต์แบบเมสันรีเป็นวิธีการจัดเลย์เอาต์ที่แกนหนึ่งใช้เลย์เอาต์ตารางกริดที่เข้มงวดตามปกติ ซึ่งส่วนใหญ่มักจะเป็นคอลัมน์ และอีกแกนหนึ่งใช้เลย์เอาต์แบบเมสันรี

ก่อนและหลังเพิ่มการรองรับเลย์เอาต์แบบก้อนอิฐลงใน Elements - Layout

Lighthouse 12.8.2

ตอนนี้แผง Lighthouse ทำงานด้วย Lighthouse 12.8.2

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

ดูรายการการเปลี่ยนแปลงทั้งหมดด้วย

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

ปัญหาใน Chromium: 40543651

ไฮไลต์อื่นๆ

การแก้ไขและการปรับปรุงที่สำคัญบางส่วนในรุ่นนี้มีดังนี้

  • ประสิทธิภาพ: เหตุการณ์ Callback ที่ไม่มีการใช้งานในคำขอตอนนี้มีพร็อพเพอร์ตี้ timeout แล้ว (crbug.com/441679219)
  • การช่วยเหลือพิเศษ ตอนนี้โปรแกรมอ่านหน้าจอจะอ่านข้อความต่อไปนี้
    • "นี่คือฟีเจอร์ใหม่" สำหรับรายการเมนูคำสั่งที่ได้รับการโปรโมต (crbug.com/441485154)
    • แถบเครื่องมือสรุปการเติมโค้ดอัตโนมัติ (crbug.com/433952045)
  • เครือข่าย: การคลิกขวาที่รายการบันทึกเครือข่ายจะเลือกรายการนั้น (crbug.com/368510578)

ดาวน์โหลดช่องตัวอย่าง

ลองใช้ Chrome Canary, Dev หรือ Beta เป็นเบราว์เซอร์เริ่มต้นสำหรับการพัฒนา ช่องตัวอย่างเหล่านี้ช่วยให้คุณเข้าถึงฟีเจอร์ล่าสุดของ DevTools ทดสอบ API ของแพลตฟอร์มเว็บที่ล้ำสมัย และช่วยคุณค้นหาปัญหาในเว็บไซต์ก่อนที่ผู้ใช้จะพบ

ติดต่อทีมเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome

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

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

รายการทุกอย่างที่ครอบคลุมในซีรีส์มีอะไรใหม่ในเครื่องมือสำหรับนักพัฒนาเว็บ