เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome สำหรับเอเจนต์คือชุดเครื่องมือที่นำความสามารถของเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome มาสู่เวิร์กโฟลว์การเขียนโค้ด AI ของคุณ การติดตั้งเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome สำหรับตัวแทน จะช่วยให้คุณเข้าถึงสิ่งต่อไปนี้ได้
- เซิร์ฟเวอร์ MCP: เชื่อมต่อ AI Agent กับอินสแตนซ์เบราว์เซอร์ที่ใช้งานอยู่โดยใช้Model Context Protocol แบบโอเพนซอร์ส
- Chrome DevTools CLI: อินเทอร์เฟซสำหรับโต้ตอบกับเบราว์เซอร์โดยตรง จากเทอร์มินัล
- ทักษะของ Agent: คำสั่งจากผู้เชี่ยวชาญที่สอน Agent ให้ทราบวิธี ประสานงานเครื่องมือหลายอย่างสำหรับงานที่ซับซ้อน เช่น การแก้ไขข้อบกพร่องด้านการช่วยเหลือพิเศษหรือ ประสิทธิภาพ
ในบริบทของการพัฒนาเว็บ เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome สำหรับ Agent จะผสานรวมความสามารถในการแก้ไขข้อบกพร่องเข้ากับ AI Agent ของคุณ
เช่น ตัวแทนสามารถใช้เครื่องมือเพื่อบันทึกและประเมินร่องรอยประสิทธิภาพ เพื่อวิเคราะห์ประสิทธิภาพของเว็บไซต์และระบุการปรับปรุงที่อาจเกิดขึ้น นอกเหนือจากการพัฒนาเว็บแล้ว เครื่องมือสำหรับนักพัฒนาเว็บสำหรับ Agent ยังช่วยให้ Agent เรียกดูเว็บแบบเรียลไทม์ได้แทนที่จะดึงเฉพาะ HTML แบบคงที่
ตั้งค่า
คู่มือนี้จะแสดงวิธีตั้งค่าเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome สำหรับเอเจนต์เพื่อช่วยให้เอเจนต์การเขียนโค้ดควบคุมและตรวจสอบเบราว์เซอร์ Chrome ที่ใช้งานอยู่ได้
ใช้แพ็กเกจ chrome-devtools-mcp เพื่อควบคุมและตรวจสอบเบราว์เซอร์ Chrome ที่ใช้งานจริงจากเอเจนต์การเขียนโค้ด (เช่น Gemini, Claude, Cursor หรือ Copilot) โปรดทราบว่าแม้ว่าเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome สำหรับเอเจนต์จะมีชุดเต็มของเครื่องมือครบชุด แต่ CLI รองรับเฉพาะชุดย่อยที่กำหนดเป้าหมายสำหรับการทำงานอัตโนมัติที่ใช้เชลล์
IDE และโมเดลที่รองรับ
เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome สำหรับเอเจนต์รองรับเครื่องมือหรือ IDE ใดก็ตามที่รองรับโปรโตคอล MCP ซึ่งรวมถึง Antigravity, Gemini CLI, Claude Code, Cursor, Copilot และอื่นๆ
ข้อควรพิจารณาด้านความปลอดภัย
เนื่องจากตัวแทนจะดูและโต้ตอบกับหน้าเว็บที่เข้าถึงได้ จึงดำเนินการในนามของคุณได้อย่างมีประสิทธิภาพหากคุณเชื่อมต่อกับเบราว์เซอร์ที่มีเซสชันที่ใช้งานอยู่และได้รับการตรวจสอบสิทธิ์ โปรดหลีกเลี่ยงการแชร์ข้อมูลที่มีความละเอียดอ่อนหรือข้อมูลส่วนบุคคล ที่คุณไม่ต้องการแชร์กับตัวแทน
ข้อกำหนดเบื้องต้น
ก่อนติดตั้งเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome สำหรับตัวแทน โปรดตรวจสอบว่าสภาพแวดล้อมเป็นไปตามข้อกำหนดต่อไปนี้
หากต้องการตั้งค่าเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome สำหรับเอเจนต์ ให้เลือกวิธีที่ตรงกับสภาพแวดล้อมการเขียนโค้ดที่คุณต้องการ แม้ว่าเอเจนต์บางรายจะกำหนดให้ติดตั้งด้วยตนเอง แต่เอเจนต์รายอื่นๆ จะมีเครื่องมือที่ผสานรวมไว้ล่วงหน้า
Antigravity
เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome สำหรับตัวแทนจะมาพร้อมกับ Antigravity 2.0 คุณเริ่มใช้งานได้ทันทีด้วยAgent ย่อยของเบราว์เซอร์ ลองใช้คำสั่งเครื่องหมายทับ เช่น
/browser Navigate to the Google homepage
หากต้องการเข้าถึงทักษะของเอเจนต์เฉพาะทาง เราขอแนะนำให้ติดตั้งปลั๊กอิน DevTools ในขั้นตอนสร้างด้วย Google ของการตั้งค่าเริ่มต้นหรือในการตั้งค่าแอปพลิเคชัน ดูข้อมูลเพิ่มเติมได้ที่เอกสารประกอบของ Antigravity Browser Subagent
ติดตั้งโดยใช้ CLI
หากต้องการตั้งค่าเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome สำหรับตัวแทน คุณสามารถใช้ไฟล์การกำหนดค่า JSON หรือคำสั่ง CLI เพื่อติดตั้งเซิร์ฟเวอร์โดยตรงหากตัวแทนรองรับ นอกจากนี้ เอเจนต์บางรายยังมีส่วนขยายหรือปลั๊กอินอย่างเป็นทางการที่มีทักษะของเอเจนต์ และคำแนะนำจากผู้เชี่ยวชาญที่จะช่วยให้เอเจนต์ใช้ฟีเจอร์ DevTools ได้
หากตัวแทนของคุณไม่อยู่ในรายการนี้ คุณจะดูวิธีติดตั้งได้ในที่เก็บ GitHub ของเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome สำหรับตัวแทน
หากต้องการเพิ่มเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome สำหรับ Agent ลงใน Agent บรรทัดคำสั่ง ให้ใช้คำสั่ง CLI ในตัวสำหรับ Agent ที่เฉพาะเจาะจง
Gemini CLI
ติดตั้งส่วนขยาย Gemini CLI ที่มีแพ็กเกจ MCP และทักษะที่เกี่ยวข้องโดยใช้คำสั่งต่อไปนี้
# Gemini extension (MCP+Skills)
gemini extensions install --auto-update https://github.com/ChromeDevTools/chrome-devtools-mcp
ติดตั้งเฉพาะแพ็กเกจ MCP ด้วยคำสั่งต่อไปนี้
# MCP only
gemini mcp add chrome-devtools npx chrome-devtools-mcp@latest
Claude Code
หากต้องการติดตั้งเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome สำหรับเอเจนต์เป็นปลั๊กอินโค้ดของ Claude ให้ใช้คำสั่ง เครื่องหมายทับต่อไปนี้ในโค้ดของ Claude เพิ่มรีจิสทรีของมาร์เก็ตเพลส
/plugin marketplace add ChromeDevTools/chrome-devtools-mcp
และติดตั้งปลั๊กอินจากรีจิสทรีของมาร์เก็ตเพลส
/plugin install chrome-devtools-mcp@chrome-devtools-plugins
ดูข้อมูลเพิ่มเติมได้ที่หน้าปลั๊กอิน Claude ในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome อย่างเป็นทางการ
Codex
codex mcp add chrome-devtools -- npx chrome-devtools-mcp@latest
ติดตั้งโดยใช้การกำหนดค่า JSON
สำหรับ Agent อื่นๆ ที่รองรับคีย์การกำหนดค่า mcpServers ให้เพิ่มรายการนี้ด้วยตนเอง
และตรวจสอบว่าได้ติดตั้ง DevTools สำหรับ Agent ผ่าน npm i
chrome-devtools-mcp แล้ว
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["-y", "chrome-devtools-mcp@latest"]
}
}
}
ติดตั้งในเอเจนต์อื่นๆ
หากต้องการกำหนดค่าสำหรับเอเจนต์ที่ไม่ได้แสดงไว้ โปรดดูที่ ที่เก็บ Chrome DevTools MCP GitHub
ทดสอบการตั้งค่า
ป้อนพรอมต์ต่อไปนี้ในเอเจนต์เพื่อตรวจสอบว่าทุกอย่างทำงานได้หรือไม่
Check the performance of https://developers.chrome.com
Agent ควรเปิดหน้าต่างเบราว์เซอร์และบันทึกการติดตามประสิทธิภาพ
แก้ปัญหาการตั้งค่า
หากเอเจนต์เรียกใช้เครื่องมือไม่สำเร็จและมีสิทธิ์เข้าถึงทักษะเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome เอเจนต์ อาจพยายามแก้ไขปัญหาโดยอัตโนมัติ หากไม่เป็นเช่นนั้น คุณสามารถ แจ้งเอเจนต์อย่างชัดเจนได้ดังนี้
Use the Chrome DevTools troubleshooting skill to fix my setup.
หรือจะเจาะจงกว่านี้ก็ได้
I'm having trouble with Chrome DevTools for agents. I tried to run [Tool Name]
but got the error: [Error Message]. I am on [OS Name]. Use the Chrome DevTools
troubleshooting skill to fix my setup.
การกำหนดค่าขั้นสูง
ต่อไปนี้เป็นวิธีอื่นๆ ที่ตัวแทนสามารถเข้าถึงเบราว์เซอร์ได้
กำหนดค่าโหมดไม่มีส่วนหัว
หากต้องการเรียกใช้งานในเบื้องหลังโดยไม่มีหน้าต่างเบราว์เซอร์ที่มองเห็นได้ คุณสามารถเรียกใช้ Chrome ในโหมด Headless (ไม่มี UI) ได้ เพิ่มแฟล็ก --headless ลงในอาร์กิวเมนต์ของเซิร์ฟเวอร์
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": [
"-y",
"chrome-devtools-mcp@latest",
"--headless"
]
}
}
}
เชื่อมต่อกับเซสชันเบราว์เซอร์ที่มีอยู่
โดยค่าเริ่มต้น เครื่องมือสำหรับนักพัฒนาเว็บสำหรับเอเจนต์จะเริ่มอินสแตนซ์ Chrome ใหม่ อย่างไรก็ตาม คุณสามารถ
เชื่อมต่อ Agent กับเซสชันเบราว์เซอร์ที่มีอยู่ได้โดยใช้แฟล็ก --autoConnect
ซึ่งจะมีประโยชน์อย่างยิ่งหากตัวแทนต้องตรวจสอบปัญหาที่ต้องมีการลงชื่อเข้าใช้หรือเซสชันที่คุณเริ่มไว้แล้ว
การเชื่อมต่อกับเซสชันที่มีอยู่ทำได้ 2 วิธีดังนี้
ใช้การเชื่อมต่ออัตโนมัติ (Chrome 144 ขึ้นไป)
เมื่อกำหนดค่าเซิร์ฟเวอร์ MCP ของเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ด้วย--autoConnect ตัวเลือก เซิร์ฟเวอร์ MCP จะเชื่อมต่อกับอินสแตนซ์ Chrome ที่ใช้งานอยู่และขอเซสชันการแก้ไขข้อบกพร่องจากระยะไกล
- ในเบราว์เซอร์ Chrome ที่ทำงานอยู่ ให้ไปที่
chrome://inspect/#remote-debuggingเพื่อเปิดใช้การแก้ไขข้อบกพร่องจากระยะไกล อัปเดตการกำหนดค่า MCP ให้มีแฟล็ก
--autoConnectดังนี้{ "mcpServers": { "chrome-devtools": { "command": "npx", "args": ["chrome-devtools-mcp@latest", "--autoConnect"] } } }ออกพรอมต์ให้ Agent Chrome จะแสดงกล่องโต้ตอบที่ขอ สิทธิ์จากผู้ใช้เพื่ออนุญาตเซสชันการแก้ไขข้อบกพร่องจากระยะไกล คลิกอนุญาต
เชื่อมต่อด้วยตนเองโดยใช้พอร์ตการแก้ไขข้อบกพร่องจากระยะไกล
หากใช้ --autoConnect ไม่ได้ (เช่น หากเรียกใช้เอเจนต์ภายในสภาพแวดล้อมแบบแซนด์บ็อกซ์) คุณจะเริ่ม Chrome ด้วยพอร์ตการแก้ไขข้อบกพร่องได้ด้วยตนเอง
ตัวอย่าง (ใน macOS)
เริ่มเบราว์เซอร์ Chrome โดยเปิดใช้พอร์ตการแก้ไขข้อบกพร่องจากระยะไกล คุณต้องระบุไดเรกทอรีข้อมูลผู้ใช้ที่กำหนดเองด้วยด้วยเหตุผลด้านความปลอดภัย
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-profile-stableกำหนดค่าเอเจนต์ให้เชื่อมต่อโดยใช้พารามิเตอร์
--browser-urlดังนี้{ "mcpServers": { "chrome-devtools": { "command": "npx", "args": [ "chrome-devtools-mcp@latest", "--browser-url=http://127.0.0.1:9222" ] } } }