เผยแพร่เมื่อ: 13 พฤศจิกายน 2026
หากคุณเป็นผู้อ่านเว็บไซต์นี้เป็นประจำ ติดตาม Chrome สำหรับนักพัฒนาซอฟต์แวร์ บน X, LinkedIn หรือ Bluesky หรือเปิดแผงมีอะไรใหม่ในเครื่องมือสำหรับนักพัฒนาเว็บในสัปดาห์นี้ คุณคงได้ยินข่าวนี้แล้ว แต่สำหรับทุกคนที่มุ่งมั่นพัฒนาผลิตภัณฑ์ คำแนะนำในการพัฒนาเว็บที่ทันสมัยเผยแพร่แล้วในเวอร์ชันเสถียร 1.0
นับตั้งแต่แชร์เวอร์ชันตัวอย่างทดลองใช้ในงาน Google I/O เราได้ทำการปรับปรุงหลายอย่างและพัฒนาคำแนะนำในการพัฒนาเว็บที่ทันสมัยให้เป็นการทำงานร่วมกันข้ามเบราว์เซอร์กับ Firefox และ Edge เราใช้เวลาในสัปดาห์นี้เพื่ออธิบายข้อมูลดังกล่าวผ่านบทความ กรณีศึกษา วิดีโอ และเอกสาร
ข้อมูลโดยสรุป
Frontier Model มักจะใช้รูปแบบเดิมสำหรับการพัฒนาเว็บโดยค่าเริ่มต้น เช่น นักพัฒนาซอฟต์แวร์ชอบไลบรารีภาพเคลื่อนไหว JavaScript มากกว่าภาพเคลื่อนไหวที่ขับเคลื่อนด้วยการเลื่อน CSS หรือสร้างมอนสเตอร์ div ที่ซ้อนกันอย่างซับซ้อนแทนที่จะใช้ appearance: base-select สำหรับเมนูแบบเลื่อนลงที่ปรับแต่งได้
คำแนะนำในการพัฒนาเว็บที่ทันสมัยช่วยแก้ปัญหานี้ได้โดยการแทรกคำแนะนำที่กระชับและมีขอบเขตตามงานโดยอิงตามพรอมต์ของคุณ สิ่งที่จะมาพร้อมกับเวอร์ชัน 1.0 มีดังนี้
- คู่มือที่ผ่านการตรวจสอบโดยผู้เชี่ยวชาญเพิ่มเติม: ครอบคลุมประสิทธิภาพ, สไตล์, การช่วยเหลือพิเศษ, ความปลอดภัย, ความเป็นส่วนตัว, แบบฟอร์ม และอื่นๆ ทักษะแต่ละอย่างได้รับการตรวจสอบโดยผู้เชี่ยวชาญด้านเทคนิคและผ่านการทดสอบแล้ว คุณสามารถเรียกดูทักษะได้ภายในแคตตาล็อกคำแนะนำ
- ข้ามเบราว์เซอร์โดยค่าเริ่มต้น: การทำงานร่วมกันโดยทีมที่สร้าง Mozilla Firefox, Microsoft Edge และ Google Chrome คำแนะนำทุกรายการได้รับการปรับปรุงด้วยข้อมูลความเข้ากันได้พื้นฐานและทางเลือกสำรอง
- ชุดการประเมินสาธารณะ: การประเมินหลายพันครั้งที่ตรวจสอบได้ในแดชบอร์ดการประเมินสาธารณะ ซึ่งไฮไลต์การเพิ่มขึ้นของอัตราการผ่าน
อ่านโพสต์ประกาศเกี่ยวกับคำแนะนำในการพัฒนาเว็บที่ทันสมัย 1.0 เพื่อดูตัวอย่างที่ชัดเจนของช่องว่างด้านความรู้เกี่ยวกับ AI ที่คำแนะนำนี้ช่วยแก้ปัญหา เวิร์กโฟลว์ตั้งแต่ต้นจนจบด้วยเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome สำหรับ Agent และวิธีการอัปเดตจากเวอร์ชันตัวอย่างในงาน I/O
อย่าเพิ่งเชื่อคำพูดเราเพียงอย่างเดียว
ในฐานะผู้ร่วมสร้างคำแนะนำในการพัฒนาเว็บที่ทันสมัย แน่นอนว่าเราอาจมีอคติอยู่บ้าง มาดูความรู้สึกของพาร์ทเนอร์หลังจากที่ได้ทดลองใช้ชุดเครื่องมือเขียนโค้ด AI ของ Chrome อย่างเต็มรูปแบบในเวิร์กโฟลว์ประจำวันกัน
- Policybazaar และ Pensionbazaar: ลดเวลาในการตอบสนองของหน้าเว็บใหม่และข้อบกพร่องของ UI ลงมากกว่า 90% ด้วยการปิดลูปการสร้างและยืนยัน ขณะที่ Policybazaar ลดความพยายามในการตรวจสอบ Core Web Vitals ด้วยตนเองในหน้า Landing Page ประมาณ 30 หน้าลง 92%
- MetaMask: เชื่อมต่อคำแนะนำในการพัฒนาเว็บที่ทันสมัยเข้ากับบ็อตตรวจสอบ PR ที่ให้คำแนะนำแบบ 3 บรรทัดใน Pull Request ประมาณ 480 รายการ ซึ่งช่วยกระตุ้นให้เกิดการแก้ไข HTML เชิงความหมายและการช่วยเหลือพิเศษ 43 รายการ โดยมีเวลาตอบสนองเฉลี่ย 15 นาที
- WeTV: เพิ่มเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome สำหรับ Agent และคำแนะนำในการพัฒนาเว็บที่ทันสมัยลงใน CI/CD เพื่อวิเคราะห์และแก้ไขการถดถอยของ CLS ที่เกิดซ้ำได้ 90% โดยอัตโนมัติ ซึ่งช่วยลดเวลาในการแก้ไขข้อบกพร่องได้ 87%
- note inc.: รวมคำแนะนำในการพัฒนาเว็บที่ทันสมัยเข้ากับกฎสำหรับระบบการออกแบบภายใน ซึ่งช่วยเพิ่มอัตราการผ่านการตรวจสอบเว็บที่ทันสมัยจาก 61% เป็น 94% และเพิ่มการจัดลำดับความสำคัญของรูปภาพ LCP ที่เหมาะสมขึ้น 28%
เริ่มต้นใช้งาน
แม้ว่าคุณอาจโชคดีหากขอให้ Agent ติดตั้งคำแนะนำในการพัฒนาเว็บที่ทันสมัย
แต่คุณก็มั่นใจได้ว่าจะใช้คำสั่ง npx ต่อไปนี้เพื่อตั้งค่าโปรเจ็กต์
และ Agent ในขั้นตอนทีละขั้นได้
npx modern-web-guidance@latest install
นอกจากนี้ คุณยังสำรวจตัวเลือกการติดตั้งอื่นๆ ใน GitHub ได้ด้วย
เมื่อตั้งค่าแล้ว คุณสามารถเจาะลึกกรณีการใช้งานใหม่ๆ และดูวิธีการทำงานเบื้องหลังของคำแนะนำในการพัฒนาเว็บที่ทันสมัย 1.0 ได้ดังนี้
- การปรับปรุงฐานของโค้ดที่มีอยู่ให้ทันสมัย:
วิธีที่
npx modern-web-guidance@latest legacy-scanจับคู่การตรวจสอบไวยากรณ์ในเครื่องอย่างรวดเร็วกับการตรวจสอบ Agent ตามบริบทเพื่อชำระหนี้ทางเทคนิคโดยไม่มีการเลิกใช้งานที่วุ่นวาย - นอกเหนือจากการสร้างโค้ด: การเรียนรู้อย่างต่อเนื่องของนักพัฒนาซอฟต์แวร์: ดูวิธีใช้คำแนะนำในการพัฒนาเว็บที่ทันสมัยเป็นเครื่องมือการเรียนรู้และการค้นพบแบบอินเทอร์แอกทีฟเพื่อให้ทันกับฟีเจอร์ HTML, CSS และ Web API ที่ทันสมัยขณะเขียนโค้ดด้วย AI Agent
- ข้ามเบราว์เซอร์โดยค่าเริ่มต้น: วิธีการทำงานของฟังก์ชันสำรองของ Baseline:
วิธีที่คำแนะนำใช้ข้อมูล web-features แบบเรียลไทม์เพื่อจับคู่การเพิ่มประสิทธิภาพแบบต่อเนื่อง, การค้นหา
@supportsและ Polyfill กับเป้าหมายเบราว์เซอร์ของคุณ - 10 สิ่งที่ AI ทำผิดพลาดในการพัฒนาเว็บ: สำรวจช่องโหว่ด้านการช่วยเหลือพิเศษ, UX, ประสิทธิภาพ และความปลอดภัยที่พบบ่อย 10 รายการ ซึ่งแม้แต่โมเดล Frontier ล่าสุดก็ยังไม่ผ่านการตรวจสอบเว็บสมัยใหม่ของเราประมาณครึ่งหนึ่ง
- การค้นหาเวกเตอร์ในเครื่องสำหรับเอเจนต์การเขียนโค้ด: จาก 507 MB เป็นลูป 7 บรรทัด: ดูเบื้องหลังการทำงานของคำแนะนำในการพัฒนาเว็บที่ทันสมัยในการดึงข้อมูลคำแนะนำที่เกี่ยวข้องจากฐานความรู้ที่มีคำแนะนำมากกว่า 200 รายการในหน่วยมิลลิวินาทีโดยไม่ต้องเติมหน้าต่างบริบทของเอเจนต์
อนาคตของการพัฒนาเว็บแบบ Agentic ด้วย Chrome
การใช้คำแนะนำในการพัฒนาเว็บที่ทันสมัยกับ Agent การเขียนโค้ดจะช่วยให้คุณเริ่มต้นได้อย่างยอดเยี่ยม แต่คุณสามารถ (และควร) ดำเนินการเพิ่มเติมได้ ตัวแทนของคุณต้องมีวิธีเรียกใช้ ตรวจสอบ และยืนยันโค้ดนั้นในเบราว์เซอร์จริง
เป็นเวลากว่า 1 ปีแล้วที่เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome สำหรับ Agent ช่วยให้ Agent การเขียนโค้ดมองเห็นรันไทม์แบบเรียลไทม์ด้วยชุดเครื่องมือที่หลากหลาย ตั้งแต่การตรวจสอบการช่วยเหลือพิเศษและประสิทธิภาพไปจนถึงการแก้ไขข้อบกพร่องของหน่วยความจำและการบันทึกภาพเคลื่อนไหว เพื่อให้ Agent ปรับแต่งได้อย่างละเอียด
ในอีกไม่กี่สัปดาห์ข้างหน้า เราจะเฉลิมฉลองความสำเร็จขั้นต่อไปของเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome สำหรับ Agent การส่งบริบทที่ถูกต้องจาก Chrome ไปยังตัวแทนจะง่ายยิ่งขึ้น
ลองใช้คำแนะนำในการพัฒนาเว็บที่ทันสมัย 1.0 แล้วบอกเราว่าคุณคิดอย่างไร ทั้งคำแนะนำในการพัฒนาเว็บที่ทันสมัยและเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome สำหรับ Agent สร้างขึ้นแบบเปิดใน GitHub หากคุณพบงานบนแพลตฟอร์มเว็บที่ Agent ของคุณยังคงทำผิดพลาดหรือมีแนวคิดเกี่ยวกับสิ่งที่เราควรจัดการต่อไป โปรดเปิดปัญหาและแจ้งให้เราทราบ