เผยแพร่: 22 มิถุนายน 2026
เมื่อเอเจนต์ AI พัฒนาจากการสร้างข้อความเพียงอย่างเดียวไปเป็นการเรียกดู การโต้ตอบ และ การทำงานที่ซับซ้อนบนเว็บไซต์ นักพัฒนาแอปจะต้องมีเครื่องมือเฉพาะเพื่อ รับประกันประสบการณ์การใช้งานคุณภาพสูงสำหรับผู้ใช้ที่ไม่ใช่มนุษย์เหล่านี้ หมวดหมู่การท่องเว็บแบบเอเจนต์ใหม่ของ Lighthouse พร้อมด้วยการปรับปรุงเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome จะช่วยให้คุณตรวจสอบได้อย่างแม่นยำและมีเฟรมเวิร์กการทดสอบที่จะช่วยสร้าง เว็บไซต์ที่พร้อมใช้งานกับเอเจนต์
การเปลี่ยนไปใช้เว็บแบบเอเจนต์มี 2 ขั้นตอนหลักๆ ได้แก่ เอเจนต์ค้นหาเว็บและเอเจนต์ใช้เว็บ
เมื่อตัวแทนค้นหาเว็บไซต์ หลักการสำหรับการปรับแต่งเว็บไซต์ให้ติดอันดับบนเครื่องมือการค้นหา (SEO) จะยังคงมีผล ในบล็อกโพสต์นี้ เราจะมุ่งเน้นไปที่สิ่งที่นักพัฒนาซอฟต์แวร์ทำได้เมื่อเอเจนต์โต้ตอบกับเว็บไซต์โดยตรง
ตรวจสอบ ปรับปรุง และแก้ไขข้อบกพร่องของเว็บไซต์ที่พร้อมใช้งานสำหรับตัวแทน
เอเจนต์ AI ต้องมีสัญญาณที่คาดการณ์ได้และอ่านได้ด้วยเครื่องเพื่อให้ดำเนินการตามขั้นตอนในเว็บไซต์ของคุณได้อย่างน่าเชื่อถือ เช่น การจองนัดหมายหรือการสั่งซื้อ เครื่องมือที่จะช่วยคุณประเมินและปรับปรุงความพร้อมมีดังนี้
ตรวจสอบความพร้อมของเว็บไซต์สำหรับเอเจนต์
หมวดหมู่การเรียกดูแบบ Agentic ใหม่ ใน Lighthouse พร้อมใช้งานตั้งแต่ M150 เป็นต้นไป และมีชุด การตรวจสอบที่กำหนดไว้เพื่อให้นักพัฒนาแอปประเมินได้ว่าเว็บไซต์ของตนเหมาะกับ Agent มากน้อยเพียงใด ซึ่งจะช่วยกระตุ้นให้มีการนำมาตรฐานอุตสาหกรรมใหม่ๆ มาใช้
สิ่งที่การตรวจสอบจะตรวจสอบ: การตรวจสอบจะมุ่งเน้นที่ 3 ด้านสําคัญที่มีความสําคัญต่อ การโต้ตอบกับเครื่อง
- การช่วยเหลือพิเศษ: การช่วยเหลือพิเศษมีไว้สำหรับมนุษย์เป็นอันดับแรก Agent ใช้Accessibility Tree ที่ได้มาจาก DOM สำหรับเทคโนโลยีความช่วยเหลือพิเศษ (AT) เป็นโมเดลข้อมูลหลัก การตรวจสอบการเรียกดูแบบตัวแทนจะตรวจสอบหมวดหมู่ย่อยจากการตรวจสอบการช่วยเหลือพิเศษซึ่งมีความสําคัญต่อการโต้ตอบของเครื่อง ตัวอย่างเช่น การตรวจสอบทั้ง 2 รายการจะยืนยัน ว่าองค์ประกอบแบบอินเทอร์แอกทีฟทุกรายการมีชื่อแบบเป็นโปรแกรม แผนผังการช่วยเหลือพิเศษที่สร้างขึ้นอย่างถูกต้องเป็นวิธีหลักที่ AI Agent ใช้ทำความเข้าใจหน้าเว็บ
- ความเสถียร: วัดความเสถียรของภาพโดยใช้ Cumulative Layout Shift (CLS) เพื่อให้มั่นใจว่าองค์ประกอบจะไม่เคลื่อนที่อย่างไม่คาดคิด ซึ่งจะช่วยป้องกันไม่ให้ตัวแทนคลิกผิด
- การผสานรวม WebMCP: ตรวจสอบความพร้อมใช้งานของเครื่องมือ WebMCP ที่ลงทะเบียน แบบฟอร์มที่ไม่มี WebMCP แบบประกาศ และความถูกต้องของสคีมา การใช้ WebMCP ช่วยให้เอเจนต์แสดงตรรกะและแบบฟอร์มของเว็บไซต์อย่างชัดเจน จึงทำให้การโต้ตอบมีความน่าเชื่อถือ
คะแนน: การท่องเว็บแบบเอเจนต์เป็นข้อมูลและไม่มีการเปรียบเทียบ ณ เวลาที่เผยแพร่ ซึ่งแตกต่างจากหมวดหมู่อื่นๆ ของ Lighthouse โดยเรามุ่งเน้นที่การให้สัญญาณที่นำไปใช้ได้จริง (สถานะผ่านหรือไม่ผ่านและคำเตือน) มากกว่าการจัดอันดับที่แน่นอน
ดูข้อมูลเพิ่มเติมเกี่ยวกับการตรวจสอบการตรวจสอบที่เฉพาะเจาะจงและสิ่งที่คุณทำได้เพื่อปรับปรุงได้ในเอกสารประกอบสำหรับการตรวจสอบการเรียกดูของเอเจนต์สำหรับ Lighthouse
ทำให้การโต้ตอบระหว่างตัวแทนกับเว็บไซต์เร็วขึ้นและเชื่อถือได้มากขึ้น
WebMCP เป็นมาตรฐานที่เสนอซึ่งมีเป้าหมายเพื่อเปิดเผยเครื่องมือโครงสร้างต่อ AI Agent ในเว็บไซต์ที่มีอยู่ ซึ่งจะช่วยเร่งและลดความซับซ้อนของการโต้ตอบของเอเจนต์ ดูข้อมูลเพิ่มเติมเกี่ยวกับการติดตั้งใช้งานได้ที่อ่านเกี่ยวกับ WebMCP
ใช้ฟีเจอร์ล่าสุดโดยใช้ Agent เขียนโค้ดที่คุณต้องการ
คำแนะนำเกี่ยวกับเว็บสมัยใหม่มีแนวทางปฏิบัติแนะนำและทักษะต่างๆ เพื่อช่วย
นักพัฒนาซอฟต์แวร์สร้างเว็บไซต์ที่พร้อมใช้งานกับเอเจนต์ โดยมีwebmcpทักษะที่ช่วยให้คุณมอบหมายการติดตั้งใช้งานเครื่องมือ WebMCP ให้กับเอเจนต์การเขียนโค้ดได้
การผสานรวมคำแนะนำในการพัฒนาเว็บที่ทันสมัยเข้ากับเวิร์กโฟลว์การพัฒนาจะช่วยให้คุณมั่นใจได้ว่าแอปพลิเคชันสร้างขึ้นตามมาตรฐานสมัยใหม่ที่เป็นมิตรกับเอเจนต์ตั้งแต่ต้นจนจบ ดูข้อมูลเพิ่มเติมได้ที่เอกสารประกอบเกี่ยวกับคำแนะนำในการพัฒนาเว็บที่ทันสมัย
ทดสอบและแก้ไขข้อบกพร่องของเว็บไซต์ด้วยเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome สำหรับเอเจนต์
เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome สำหรับเอเจนต์มีลักษณะการทดสอบที่ไม่เหมือนใครสำหรับการแก้ไขข้อบกพร่องอย่างละเอียดและการพัฒนาแบบวนซ้ำ ซึ่งจะช่วยให้คุณ เปลี่ยน IDE หรือเอเจนต์การเขียนโค้ดที่ทำงานด้วยระบบ AI ของคุณเองให้เป็นเอเจนต์การท่องเว็บได้ และให้คุณควบคุมได้ในระดับสูง
เครื่องมือสำหรับนักพัฒนาเว็บสำหรับเอเจนต์ช่วยให้คุณทำสิ่งต่อไปนี้ได้
- จำลองการโต้ตอบของเอเจนต์: คุณสามารถจำลองขั้นตอนที่แน่นอนซึ่งเอเจนต์ จะทำได้ ซึ่งก็คือ "กลายเป็นผู้ใช้" (หรือเอเจนต์) เพื่อทำซ้ำ ความล้มเหลวและยืนยันว่าโฟลว์ของเว็บไซต์เป็นแบบกำหนด
- การเรียกใช้ Lighthouse โดยตรง: สภาพแวดล้อมการทดสอบสามารถเรียกใช้เครื่องมือ
lighthouse_auditในแท็บที่ใช้งานอยู่ได้โดยตรง ซึ่งจะช่วยให้คุณตรวจสอบสุขภาพแบบหลายหมวดหมู่ได้ทันทีตามสถานะปัจจุบันของหน้าเว็บ เพื่อให้คุณยืนยันการแก้ไขซ้ำๆ ตามมาตรฐานการเรียกดูแบบ Agentic - Screencast และการแก้ไขข้อบกพร่อง: เครื่องมือนี้มีการบันทึกโดยละเอียดและความสามารถในการทำ Screencast เพื่อให้คุณเห็นว่าเอเจนต์รับรู้และโต้ตอบกับหน้าเว็บอย่างไร ซึ่งจะแสดงสัญญาณบางอย่างที่เครื่องอ่านได้ เช่น โครงสร้างการช่วยเหลือพิเศษ ซึ่งอาจทำให้เอเจนต์สับสน
ซึ่งจะช่วยให้คุณมั่นใจได้ว่าผู้ใช้ที่ไม่ใช่มนุษย์จะได้รับประสบการณ์การใช้งานคุณภาพสูงก่อน การติดตั้งใช้งาน
ดูข้อมูลเพิ่มเติมเกี่ยวกับความสามารถและการกำหนดค่าเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome สำหรับ เอเจนต์ได้ที่ที่เก็บ GitHub
การกำหนดค่าตัวอย่างต่อไปนี้ของเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome สำหรับ Agent
(~/.gemini/config/mcp_config.json สำหรับ AntigravityCLI หรือกำหนดค่าใน
Antigravity) จะเชื่อมต่อกับ Chrome Canary
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": [
"-y",
"chrome-devtools-mcp@latest",
"--autoConnect",
"--categoryExperimentalWebmcp",
"--channel=canary"
]
}
}
}
ใช้คำค้นหาตัวอย่างต่อไปนี้ "ใช้ MCP ของเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ไปที่ https://googlechromelabs.github.io/webmcp-tools/demos/pizza-maker/ แล้วสร้าง พิซซ่าที่มีเห็ด 10 ดอกและพริกหยวก 2 เม็ดให้หน่อย อย่าลืมสรุป สิ่งที่คุณทำและเครื่องมือที่คุณเรียกใช้ด้วย"
นอกจากนี้ คุณยังใช้เครื่องมือสำหรับนักพัฒนาเว็บสำหรับเอเจนต์เพื่อทำการตรวจสอบ Lighthouse ความพร้อมของเอเจนต์ได้ด้วย
"ฉันต้องการทำการตรวจสอบ Lighthouse แบบเอเจนต์ใน https://googlechromelabs.github.io/webmcp-tools/demos/french-bistro/?notoolname โดยใช้ MCP ของเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome และขอสรุปแบบเต็ม"
ขั้นตอนถัดไป
หากต้องการมีส่วนร่วมและเข้าร่วมการสนทนา โปรดดูที่เก็บอย่างเป็นทางการของ Lighthouse
ดูข้อมูลเพิ่มเติมเกี่ยวกับ WebMCP ได้ที่เอกสารประกอบของ WebMCP ดูข้อมูลเพิ่มเติมเกี่ยวกับคำแนะนำในการพัฒนาเว็บที่ทันสมัยได้ที่เอกสารประกอบเกี่ยวกับคำแนะนำในการพัฒนาเว็บที่ทันสมัย ดูข้อมูลเพิ่มเติม เกี่ยวกับการเพิ่มประสิทธิภาพเว็บไซต์สำหรับ Generative AI ได้ที่การเพิ่มประสิทธิภาพเว็บไซต์ สำหรับฟีเจอร์ Generative AI ใน Google Search