ใน Chrome 144 ทีมได้เปิดตัวฟีเจอร์ที่รอคอยกันมานานในเซิร์ฟเวอร์ MCP ของ Chrome DevTools ซึ่งก็คือแผงเงื่อนไขคำขอใหม่และการปรับปรุงสำหรับการ แก้ไขข้อบกพร่องของแบบอักษรและสไตล์ชีตที่นำมาใช้
และนี่คือรายการฟีเจอร์ที่น่าทึ่งซึ่งเราได้เปิดตัวตลอดปี 2025 หากต้องการดูว่าคุณพลาดการแจ้งเตือนใดไปหรือไม่ ให้ทำดังนี้ จากนั้นดูไฮไลต์ต่อไปนี้หรือเรียกดูฉบับที่ผ่านมาของ "มีอะไรใหม่ใน DevTools"
การอัปเดตเซิร์ฟเวอร์ MCP ของเครื่องมือสำหรับนักพัฒนาเว็บ
เราได้แก้ไขข้อบกพร่องต่างๆ สำหรับเซิร์ฟเวอร์ MCP ของ DevTools และเปิดตัว v0.12.1 เวอร์ชันนี้มีฟีเจอร์ใหม่ที่สำคัญอย่างการเชื่อมต่ออัตโนมัติ ซึ่งช่วยให้คุณใช้เซสชันเบราว์เซอร์ที่มีอยู่ซ้ำได้ การเชื่อมต่ออัตโนมัติช่วยให้คุณเริ่ม ดีบักด้วยตนเองใน Chrome ได้ จากนั้นก็ชี้ MCP ของเครื่องมือสำหรับนักพัฒนาเว็บไปยังอินสแตนซ์ Chrome เดียวกัน เพื่อทำงานต่อจากที่ค้างไว้
ดูข้อมูลเพิ่มเติมเกี่ยวกับการเชื่อมต่ออัตโนมัติสำหรับ MCP ของเครื่องมือสำหรับนักพัฒนาเว็บในบล็อกโพสต์ที่เกี่ยวข้อง ดูรายการการเปลี่ยนแปลงและการแก้ไขข้อบกพร่องทั้งหมดได้ในบันทึกการเปลี่ยนแปลงแบบสาธารณะใน GitHub
การควบคุมคำขอเครือข่ายแต่ละรายการ
เราได้เปลี่ยนชื่อแผงการบล็อกคำขอเครือข่ายเป็นเงื่อนไขคำขอแล้ว นอกจากคำขอที่ถูกบล็อกแล้ว ตอนนี้แผงนี้ยังช่วยให้คุณจำกัด คำขอแต่ละรายการได้ด้วย
เปิดแผงจาก ⋮ > เครื่องมือเพิ่มเติม > เงื่อนไขคำขอ สลับช่องทำเครื่องหมายเปิดใช้การบล็อกและการควบคุมเพื่อเปิดใช้การบล็อกคำขอ คลิกปุ่ม + เพื่อเพิ่มรูปแบบข้อความใหม่ คลิกไอคอน เพื่อทิ้งกฎทั้งหมด
ดูวิธีควบคุมคำขอเครือข่ายแต่ละรายการในเอกสารที่อัปเดต
แก้ไขกฎ @font-face และ @font-feature-values
@font-face และ @font-feature-values จะแสดงในแผงรูปแบบ
และแก้ไขได้จากแผงดังกล่าว
สไตล์ชีตที่ใช้ในแผงองค์ประกอบ
ตอนนี้แผงองค์ประกอบจะแสดงสไตล์ชีตที่นำมาใช้ภายใต้ Shadow Root และ Document Root ซึ่งจะช่วยให้ผู้ที่ทำงานกับสไตล์ชีตที่สร้างขึ้นค้นหาสไตล์ชีตที่ส่งผลต่อองค์ประกอบของตนและแก้ไขข้อบกพร่องของสไตล์ได้ง่ายขึ้น โดยเฉพาะอย่างยิ่งเมื่อสไตล์ชีตไม่ทำงานอย่างไม่คาดคิด
มีอะไรใหม่ในเครื่องมือสำหรับนักพัฒนาเว็บปี 2025
นวัตกรรม AI
นวัตกรรม AI เริ่มต้นด้วยข้อมูลเชิงลึกของคอนโซล และตอนนี้ได้กลายเป็นส่วนสำคัญของเครื่องมือนักพัฒนาเว็บ Chrome โดยแผงความช่วยเหลือจาก AI เป็นฮับหลักสำหรับการดีบั๊กที่ได้รับความช่วยเหลือจาก AI ซึ่งรับรู้บริบท DevTools มีชุดเครื่องมือที่ทำงานด้วยระบบ AI ที่ครอบคลุมเพื่อเพิ่มประสิทธิภาพเวิร์กโฟลว์ของคุณด้วยคำแนะนำโค้ดในแผงคอนโซลและแหล่งที่มา รวมถึงคำอธิบายประกอบอัตโนมัติจาก Gemini ในการติดตามประสิทธิภาพ
- การแก้ไขสไตล์ตั้งแต่ต้นจนจบ: ขอให้ Gemini แก้ไขปัญหา CSS และเมื่อใช้ร่วมกับ Workspace ให้บันทึกการเปลี่ยนแปลงเหล่านั้นกลับไปยังไฟล์แหล่งข้อมูลในดิสก์โดยตรง
- ถามเกี่ยวกับประสิทธิภาพ: ตอนนี้คุณสามารถพูดคุยเกี่ยวกับการติดตามประสิทธิภาพแบบเต็มด้วยความช่วยเหลือจาก AI หรือ เจาะลึกข้อมูลเชิงลึกด้านประสิทธิภาพ หรือใช้ Gemini เพื่อ ใส่คำอธิบายประกอบในการติดตาม
- การแก้ไขข้อบกพร่องด้วยภาพ: แผงความช่วยเหลือจาก AI กลายเป็นแบบมัลติโมดัล ซึ่งช่วยให้คุณ อัปโหลดรูปภาพหรือ ถ่ายภาพหน้าจอเพื่อช่วยให้ Gemini เข้าใจและช่วยคุณแก้ไขข้อบกพร่องด้านภาพ
ประสิทธิภาพ
เราได้ออกแบบแผงประสิทธิภาพใหม่เพื่อให้การแก้ไขข้อบกพร่องด้านประสิทธิภาพไม่ซับซ้อนและนำไปใช้ได้จริงมากขึ้น เช่น ตอนนี้การติดตามที่บันทึกไว้มาพร้อมกับ ข้อมูลเชิงลึกที่คัดสรรมาแล้ว ซึ่งจะช่วยให้คุณระบุปัญหาคอขวดได้เร็วขึ้นและไปยังส่วนต่างๆ ของการติดตามได้เร็วขึ้น การปรับปรุงอื่นๆ มีดังนี้
- ข้อมูลเชิงลึกที่นำไปใช้ได้จริง: เราได้เปิดตัวชุดข้อมูลเชิงลึกเกี่ยวกับประสิทธิภาพที่แข็งแกร่ง ซึ่งระบุ ปัญหาที่เฉพาะเจาะจง เช่น LCP ตามเฟส สาเหตุของการเปลี่ยนแปลงเลย์เอาต์ และ เวลาในการตอบสนองของคำขอเอกสาร
- บริบทในโลกแห่งความเป็นจริง: เราได้ผสานรวมข้อมูลภาคสนาม และข้อมูล CrUX เข้ากับแผงประสิทธิภาพโดยตรง เพื่อให้คุณตรวจสอบผลลัพธ์ในห้องทดลองกับประสบการณ์ของผู้ใช้จริงได้
- บริบทของเฟรมเวิร์ก: Angular v20 และ React v19.2 ใช้ Extensibility API แล้ว การทำความเข้าใจคอขวดของชุดข้อความหลักจะง่ายขึ้นเมื่อดู แผนผังคอมโพเนนต์โดยตรง ขอขอบคุณทีม Angular และ React ที่เป็นพาร์ทเนอร์กับเรา
- การทำงานร่วมกันที่ดียิ่งขึ้น: การแชร์การติดตามทำได้ง่ายขึ้นด้วยความสามารถในการ ใส่คำอธิบายประกอบในการติดตามและตัวเลือกในการส่งออกเนื้อหาของทรัพยากรและแผนที่ต้นฉบับ เพื่อให้เพื่อนร่วมงาน หรือตัวคุณเองในอนาคตมีบริบททั้งหมดที่ต้องการ
แพลตฟอร์มแบบเว็บ
DevTools ตามทันแพลตฟอร์มเว็บที่พัฒนาอยู่เสมอ โดยเพิ่มเครื่องมือเฉพาะสำหรับ ข้อกำหนด CSS ล่าสุด พร้อมทั้งปรับปรุงประสบการณ์ของนักพัฒนาซอฟต์แวร์สำหรับ ฟีเจอร์ที่มีอยู่
เราได้เพิ่มการติดตามอย่างละเอียดสำหรับห่วงโซ่ตัวแปร CSS ที่ซับซ้อน ความพร้อมใช้งานของ Baseline
ในเคล็ดลับเครื่องมือของพร็อพเพอร์ตี้ และเพิ่งเปิดตัวการรองรับการแก้ไขข้อบกพร่อง
สําหรับภาพเคลื่อนไหวรายการที่ซับซ้อนโดยใช้กฎ @starting-style และ
เครื่องมือแก้ไขภาพสําหรับเลย์เอาต์ display: masonry ใหม่
ดาวน์โหลดช่องตัวอย่าง
ลองใช้ Chrome Canary, Dev หรือ Beta เป็นเบราว์เซอร์เริ่มต้นสำหรับการพัฒนา ช่องตัวอย่างเหล่านี้ช่วยให้คุณเข้าถึงฟีเจอร์ล่าสุดของ DevTools ทดสอบ API ของแพลตฟอร์มเว็บที่ล้ำสมัย และช่วยคุณค้นหาปัญหาในเว็บไซต์ก่อนที่ผู้ใช้จะพบ
ติดต่อทีมเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome
ใช้ตัวเลือกต่อไปนี้เพื่อพูดคุยเกี่ยวกับฟีเจอร์ใหม่ การอัปเดต หรือสิ่งอื่นๆ ที่เกี่ยวข้องกับเครื่องมือสำหรับนักพัฒนาเว็บ
- ส่งความคิดเห็นและคำขอฟีเจอร์มาให้เราที่ crbug.com
- รายงานปัญหาเกี่ยวกับเครื่องมือสำหรับนักพัฒนาเว็บโดยใช้ ตัวเลือกเพิ่มเติม > ความช่วยเหลือ > รายงานปัญหาเกี่ยวกับเครื่องมือสำหรับนักพัฒนาเว็บในเครื่องมือสำหรับนักพัฒนาเว็บ
- ทวีตถึง @ChromeDevTools
- แสดงความคิดเห็นในวิดีโอ YouTube เกี่ยวกับฟีเจอร์ใหม่ในเครื่องมือสำหรับนักพัฒนาเว็บหรือวิดีโอ YouTube เกี่ยวกับเคล็ดลับเครื่องมือสำหรับนักพัฒนาเว็บ