Chrome DevTools MCP

Chrome DevTools สำหรับเอเจนต์

Chrome DevTools สำหรับเอเจนต์ (chrome-devtools-mcp) ช่วยให้เอเจนต์เขียนโค้ดของคุณ (เช่น Antigravity, Claude, Cursor หรือ Copilot) ควบคุมและตรวจสอบเบราว์เซอร์ Chrome ที่ทำงานอยู่ได้ โดยทำหน้าที่เป็นเซิร์ฟเวอร์ Model-Context-Protocol (MCP) มอบพลังเต็มรูปแบบของ Chrome DevTools ให้กับผู้ช่วยเขียนโค้ด AI ของคุณ เพื่อการทำงานอัตโนมัติที่เชื่อถือได้ การดีบักเชิงลึก และการวิเคราะห์ประสิทธิภาพ นอกจากนี้ยังมี CLI สำหรับการใช้งานโดยไม่ต้องใช้ MCP

ข้อมูลอ้างอิงเครื่องมือ | บันทึกการเปลี่ยนแปลง | การมีส่วนร่วม | การแก้ไขปัญหา | หลักการออกแบบ

คุณสมบัติหลัก

• รับข้อมูลเชิงลึกด้านประสิทธิภาพ: ใช้ Chrome DevTools เพื่อบันทึก traces และดึงข้อมูลเชิงลึกด้านประสิทธิภาพที่นำไปปฏิบัติได้
• การดีบักเบราว์เซอร์ขั้นสูง: วิเคราะห์คำขอเครือข่าย จับภาพหน้าจอ และ ตรวจสอบข้อความคอนโซลเบราว์เซอร์ (พร้อม source-mapped stack traces)
• การทำงานอัตโนมัติที่เชื่อถือได้ ใช้ puppeteer เพื่อดำเนินการอัตโนมัติใน Chrome และรอผลลัพธ์ของการกระทำโดยอัตโนมัติ

ข้อจำกัดความรับผิดชอบ

chrome-devtools-mcp เปิดเผยเนื้อหาของอินสแตนซ์เบราว์เซอร์ให้กับไคลเอนต์ MCP ทำให้สามารถตรวจสอบ ดีบัก และแก้ไขข้อมูลใดๆ ในเบราว์เซอร์หรือ DevTools ได้ หลีกเลี่ยงการแชร์ข้อมูลที่ละเอียดอ่อนหรือข้อมูลส่วนบุคคลที่คุณไม่ต้องการแชร์กับ ไคลเอนต์ MCP

chrome-devtools-mcp รองรับอย่างเป็นทางการเฉพาะ Google Chrome และ Chrome for Testing เท่านั้น เบราว์เซอร์ที่ใช้ Chromium อื่นๆ อาจทำงานได้ แต่ไม่รับประกัน และคุณอาจพบพฤติกรรมที่ไม่คาดคิด ใช้ดุลยพินิจของคุณเอง เรามุ่งมั่นที่จะให้การแก้ไขและการสนับสนุนสำหรับ Extended Stable Chrome เวอร์ชันล่าสุด

เครื่องมือประสิทธิภาพอาจส่ง URL ของ trace ไปยัง Google CrUX API เพื่อดึงข้อมูล ประสบการณ์ผู้ใช้จริง ซึ่งช่วยให้เห็นภาพรวมประสิทธิภาพแบบองค์รวมโดย นำเสนอข้อมูลภาคสนามควบคู่ไปกับข้อมูลในห้องปฏิบัติการ ข้อมูลนี้รวบรวมโดย Chrome User Experience Report (CrUX) หากต้องการปิดใช้งาน ให้รันด้วยแฟล็ก --no-performance-crux

สถิติการใช้งาน

Google เก็บรวบรวมสถิติการใช้งาน (เช่น อัตราความสำเร็จในการเรียกใช้เครื่องมือ เวลาแฝง และข้อมูลสภาพแวดล้อม) เพื่อปรับปรุงความน่าเชื่อถือและประสิทธิภาพของ Chrome DevTools MCP

การเก็บรวบรวมข้อมูลถูกเปิดใช้งานตามค่าเริ่มต้น คุณสามารถเลือกไม่เข้าร่วมได้โดยส่งแฟล็ก --no-usage-statistics เมื่อเริ่มต้นเซิร์ฟเวอร์:

"args": ["-y", "chrome-devtools-mcp@latest", "--no-usage-statistics"]

Google จัดการข้อมูลนี้ตาม นโยบายความเป็นส่วนตัวของ Google

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

การเก็บรวบรวมจะถูกปิดใช้งานหากตั้งค่าตัวแปรสภาพแวดล้อม CHROME_DEVTOOLS_MCP_NO_USAGE_STATISTICS หรือ CI

การตรวจสอบการอัปเดต

ตามค่าเริ่มต้น เซิร์ฟเวอร์จะตรวจสอบ npm registry เป็นระยะเพื่อหาการอัปเดต และบันทึกการแจ้งเตือนเมื่อมีเวอร์ชันใหม่กว่า คุณสามารถปิดใช้งานการตรวจสอบการอัปเดตเหล่านี้ได้โดยการตั้งค่าตัวแปรสภาพแวดล้อม CHROME_DEVTOOLS_MCP_NO_UPDATE_CHECKS

ความต้องการ

• Node.js เวอร์ชัน LTS
• Chrome เวอร์ชันเสถียรปัจจุบันหรือใหม่กว่า
• npm

เริ่มต้นใช้งาน

เพิ่มการกำหนดค่าต่อไปนี้ไปยังไคลเอนต์ MCP ของคุณ:

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "chrome-devtools-mcp@latest"]
    }
  }
}

[!NOTE] การใช้ chrome-devtools-mcp@latest ทำให้มั่นใจได้ว่าไคลเอนต์ MCP ของคุณจะใช้ Chrome DevTools MCP server เวอร์ชันล่าสุดเสมอ

หากคุณสนใจเฉพาะงานเบราว์เซอร์พื้นฐาน ให้ใช้โหมด --slim:

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "chrome-devtools-mcp@latest", "--slim", "--headless"]
    }
  }
}

ดู ข้อมูลอ้างอิงเครื่องมือแบบ Slim

การกำหนดค่าไคลเอนต์ MCP

amp mcp add chrome-devtools -- npx chrome-devtools-mcp@latest

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "chrome-devtools-mcp@latest",
        "--browser-url=http://127.0.0.1:9222"
      ]
    }
  }
}

claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest

/plugin marketplace add ChromeDevTools/chrome-devtools-mcp

/plugin install chrome-devtools-mcp@chrome-devtools-plugins

codex mcp add chrome-devtools -- npx chrome-devtools-mcp@latest

[mcp_servers.chrome-devtools]
command = "cmd"
args = [
    "/c",
    "npx",
    "-y",
    "chrome-devtools-mcp@latest",
]
env = { SystemRoot="C:\\Windows", PROGRAMFILES="C:\\Program Files" }
startup_timeout_ms = 20_000

cmd mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest

copilot

/mcp add

code --add-mcp '{"name":"io.github.ChromeDevTools/chrome-devtools-mcp","command":"npx","args":["-y","chrome-devtools-mcp"],"env":{}}'

code --add-mcp '{"""name""":"""io.github.ChromeDevTools/chrome-devtools-mcp""","""command""":"""npx""","""args""":["""-y""","""chrome-devtools-mcp"""]}'

droid mcp add chrome-devtools "npx -y chrome-devtools-mcp@latest"

# Either MCP only:
gemini mcp add chrome-devtools npx chrome-devtools-mcp@latest
# Or as a Gemini extension (MCP+Skills):
gemini extensions install --auto-update https://github.com/ChromeDevTools/chrome-devtools-mcp

gemini mcp add -s user chrome-devtools npx chrome-devtools-mcp@latest

grok mcp add chrome-devtools npx chrome-devtools-mcp@latest

mcp-proxy --transport streamablehttp --port 8080 -- npx -y chrome-devtools-mcp@latest

[[mcp_servers]]
name = "chrome-devtools"
transport = "stdio"
command = "npx"
args = ["chrome-devtools-mcp@latest"]

{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "chrome-devtools": {
      "type": "local",
      "command": ["npx", "-y", "chrome-devtools-mcp@latest"]
    }
  }
}

qodercli mcp add chrome-devtools -- npx chrome-devtools-mcp@latest

qodercli mcp add -s user chrome-devtools -- npx chrome-devtools-mcp@latest

ป้อนพรอมต์ต่อไปนี้ใน MCP Client ของคุณเพื่อตรวจสอบว่าทุกอย่างทำงานได้หรือไม่:

Check the performance of https://developers.chrome.com

MCP Client ของคุณควรเปิดเบราว์เซอร์และบันทึก performance trace

[!NOTE] เซิร์ฟเวอร์ MCP จะเริ่มเบราว์เซอร์โดยอัตโนมัติเมื่อ MCP Client ใช้เครื่องมือที่ต้องการอินสแตนซ์เบราว์เซอร์ที่กำลังทำงานอยู่ การเชื่อมต่อกับเซิร์ฟเวอร์ Chrome DevTools MCP เพียงอย่างเดียวจะไม่เริ่มเบราว์เซอร์โดยอัตโนมัติ

เครื่องมือ

หากคุณพบปัญหาใดๆ โปรดดู คู่มือการแก้ไขปัญหา ของเรา

• การทำงานอัตโนมัติของอินพุต (10 เครื่องมือ)
  • click
  • drag
  • fill
  • fill_form
  • handle_dialog
  • hover
  • press_key
  • type_text
  • upload_file
  • click_at
• การทำงานอัตโนมัติของการนำทาง (6 เครื่องมือ)
  • close_page
  • list_pages
  • navigate_page
  • new_page
  • select_page
  • wait_for
• การจำลอง (2 เครื่องมือ)
  • emulate
  • resize_page
• ประสิทธิภาพ (3 เครื่องมือ)
  • performance_analyze_insight
  • performance_start_trace
  • performance_stop_trace
• เครือข่าย (2 เครื่องมือ)
  • get_network_request
  • list_network_requests
• การดีบัก (8 เครื่องมือ)
  • evaluate_script
  • get_console_message
  • lighthouse_audit
  • list_console_messages
  • take_screenshot
  • take_snapshot
  • screencast_start
  • screencast_stop
• หน่วยความจำ (12 เครื่องมือ)
  • take_heapsnapshot
  • close_heapsnapshot
  • compare_heapsnapshots
  • get_heapsnapshot_class_nodes
  • get_heapsnapshot_details
  • get_heapsnapshot_dominators
  • get_heapsnapshot_duplicate_strings
  • get_heapsnapshot_edges
  • get_heapsnapshot_object_details
  • get_heapsnapshot_retainers
  • get_heapsnapshot_retaining_paths
  • get_heapsnapshot_summary
• ส่วนขยาย (5 เครื่องมือ)
  • install_extension
  • list_extensions
  • reload_extension
  • trigger_extension_action
  • uninstall_extension
• บุคคลที่สาม (2 เครื่องมือ)
  • execute_3p_developer_tool
  • list_3p_developer_tools
• WebMCP (2 เครื่องมือ)
  • execute_webmcp_tool
  • list_webmcp_tools

การกำหนดค่า

เซิร์ฟเวอร์ Chrome DevTools MCP รองรับตัวเลือกการกำหนดค่าต่อไปนี้:

• --autoConnect/ --auto-connect หากระบุ จะเชื่อมต่อกับเบราว์เซอร์ (Chrome 144+) ที่ทำงานอยู่ในเครื่องโดยอัตโนมัติจากไดเรกทอรีข้อมูลผู้ใช้ที่ระบุโดยพารามิเตอร์ channel (channel เริ่มต้นคือ stable) ต้องเริ่มเซิร์ฟเวอร์การดีบักระยะไกลในอินสแตนซ์ Chrome ผ่าน chrome://inspect/#remote-debugging

  • ประเภท: boolean
  • ค่าเริ่มต้น: false

• --browserUrl/ --browser-url, -u เชื่อมต่อกับอินสแตนซ์ Chrome ที่ทำงานอยู่และดีบักได้ (เช่น http://127.0.0.1:9222) สำหรับรายละเอียดเพิ่มเติม โปรดดู: https://github.com/ChromeDevTools/chrome-devtools-mcp#connecting-to-a-running-chrome-instance.

  • ประเภท: string
  • ค่าเริ่มต้น: false

• --wsEndpoint/ --ws-endpoint, -w WebSocket endpoint สำหรับเชื่อมต่อกับอินสแตนซ์ Chrome ที่กำลังทำงานอยู่ (เช่น ws://127.0.0.1:9222/devtools/browser/) ทางเลือกแทน --browserUrl

  • ประเภท: string
  • ค่าเริ่มต้น: false

• --wsHeaders/ --ws-headers ส่วนหัวที่กำหนดเองสำหรับการเชื่อมต่อ WebSocket ในรูปแบบ JSON (เช่น '{"Authorization":"Bearer token"}') ใช้งานได้กับ --wsEndpoint เท่านั้น

  • ประเภท: string
  • ค่าเริ่มต้น: false

• --headless ว่าจะรันในโหมด headless (ไม่มี UI) หรือไม่

  • ประเภท: boolean
  • ค่าเริ่มต้น: false

• --executablePath/ --executable-path, -e พาธไปยังไฟล์ปฏิบัติการ Chrome ที่กำหนดเอง

  • ประเภท: string
  • ค่าเริ่มต้น: false

• --isolated หากระบุ จะสร้างไดเรกทอรีข้อมูลผู้ใช้ชั่วคราวที่ถูกล้างโดยอัตโนมัติหลังจากปิดเบราว์เซอร์ ค่าเริ่มต้นคือ false

  • ประเภท: boolean
  • ค่าเริ่มต้น: false

• --userDataDir/ --user-data-dir พาธไปยังไดเรกทอรีข้อมูลผู้ใช้สำหรับ Chrome ค่าเริ่มต้นคือ $HOME/.cache/chrome-devtools-mcp/chrome-profile$CHANNEL_SUFFIX_IF_NON_STABLE

  • ประเภท: string
  • ค่าเริ่มต้น: false

• --channel ระบุ channel ของ Chrome อื่นที่ควรใช้ ค่าเริ่มต้นคือเวอร์ชัน channel stable

  • ประเภท: string
  • ตัวเลือก: canary, dev, beta, stable
  • ค่าเริ่มต้น: false

• --logFile/ --log-file พาธไปยังไฟล์ที่จะเขียนบันทึกการดีบัก ตั้งค่าตัวแปรสภาพแวดล้อม DEBUG เป็น * เพื่อเปิดใช้งานบันทึกแบบละเอียด มีประโยชน์สำหรับการส่งรายงานข้อบกพร่อง

  • ประเภท: string
  • ค่าเริ่มต้น: false

• --viewport ขนาดวิวพอร์ตเริ่มต้นสำหรับอินสแตนซ์ Chrome ที่เริ่มโดยเซิร์ฟเวอร์ ตัวอย่างเช่น 1280x720 ในโหมด headless ขนาดสูงสุดคือ 3840x2160px

  • ประเภท: string
  • ค่าเริ่มต้น: false

• --proxyServer/ --proxy-server การกำหนดค่าพร็อกซีเซิร์ฟเวอร์สำหรับ Chrome ที่ส่งเป็น --proxy-server เมื่อเปิดเบราว์เซอร์ ดู https://www.chromium.org/developers/design-documents/network-settings/ สำหรับรายละเอียด

  • ประเภท: string
  • ค่าเริ่มต้น: false

• --acceptInsecureCerts/ --accept-insecure-certs หากเปิดใช้งาน จะละเว้นข้อผิดพลาดที่เกี่ยวข้องกับใบรับรองที่ลงนามด้วยตนเองและหมดอายุ ใช้ด้วยความระมัดระวัง

  • ประเภท: boolean
  • ค่าเริ่มต้น: false

• --experimentalPageIdRouting/ --experimental-page-id-routing ว่าจะเปิดเผย pageId บนเครื่องมือที่มีขอบเขตหน้าและกำหนดเส้นทางคำขอตาม ID หน้าหรือไม่ (มีประโยชน์สำหรับเซสชันเอเจนต์ที่ทำงานพร้อมกัน)

  • ประเภท: boolean
  • ค่าเริ่มต้น: false

• --experimentalDevtools/ --experimental-devtools ว่าจะเปิดใช้งานการทำงานอัตโนมัติผ่านเป้าหมาย DevTools หรือไม่

  • ประเภท: boolean
  • ค่าเริ่มต้น: false

• --experimentalVision/ --experimental-vision ว่าจะเปิดใช้งานเครื่องมือตามพิกัด เช่น click_at(x,y) หรือไม่ โดยปกติต้องใช้โมเดล computer-use ที่สามารถสร้างพิกัดที่แม่นยำโดยดูจากภาพหน้าจอ

  • ประเภท: boolean
  • ค่าเริ่มต้น: false

• --memoryDebugging/ --memory-debugging, -experimentalMemory ว่าจะเปิดใช้งานเครื่องมือดีบักหน่วยความจำหรือไม่

  • ประเภท: boolean
  • ค่าเริ่มต้น: false

• --experimentalStructuredContent/ --experimental-structured-content ว่าจะส่งออกเนื้อหาที่จัดรูปแบบอย่างมีโครงสร้างหรือไม่

  • ประเภท: boolean
  • ค่าเริ่มต้น: false

• --experimentalIncludeAllPages/ --experimental-include-all-pages ว่าจะรวมหน้าทุกประเภท เช่น webviews หรือหน้าพื้นหลังเป็นหน้าหรือไม่

  • ประเภท: boolean
  • ค่าเริ่มต้น: false

• --experimentalScreencast/ --experimental-screencast เปิดเผยเครื่องมือ screencast ทดลอง (ต้องใช้ ffmpeg) ติดตั้ง ffmpeg https://www.ffmpeg.org/download.html และตรวจสอบให้แน่ใจว่ามีอยู่ใน PATH ของเซิร์ฟเวอร์ MCP

  • ประเภท: boolean
  • ค่าเริ่มต้น: false

• --experimentalFfmpegPath/ --experimental-ffmpeg-path พาธไปยังไฟล์ปฏิบัติการ ffmpeg สำหรับการบันทึก screencast

  • ประเภท: string
  • ค่าเริ่มต้น: false

• --categoryExperimentalWebmcp/ --category-experimental-webmcp ตั้งค่าเป็น true เพื่อเปิดใช้งานการดีบักเครื่องมือ WebMCP ต้องใช้ Chrome 149+ พร้อมแฟล็กต่อไปนี้: --enable-features=WebMCP,DevToolsWebMCPSupport

  • ประเภท: boolean
  • ค่าเริ่มต้น: false

• --chromeArg/ --chrome-arg อาร์กิวเมนต์เพิ่มเติมสำหรับ Chrome ใช้เฉพาะเมื่อ Chrome ถูกเปิดโดย chrome-devtools-mcp

  • ประเภท: array
  • ค่าเริ่มต้น: false

• --blockedUrlPattern/ --blocked-url-pattern จำกัดการเข้าถึงเครือข่ายของเบราว์เซอร์โดยการบล็อกรูปแบบ URL ที่ระบุ (ใช้ https://urlpattern.spec.whatwg.org/) ยกเลิกการแนบจากเป้าหมายที่มี URL ที่ถูกบล็อกอย่างเงียบๆ เมื่อเชื่อมต่อ และบล็อกคำขอรันไทม์ (รวมถึงการนำทางและทรัพยากรย่อย) ยอมรับอาร์เรย์ของรูปแบบ

  • ประเภท: array
  • ค่าเริ่มต้น: false

• --allowedUrlPattern/ --allowed-url-pattern จำกัดการเข้าถึงเครือข่ายของเบราว์เซอร์โดยอนุญาตเฉพาะรูปแบบ URL ที่ระบุ (ใช้ https://urlpattern.spec.whatwg.org/) ต้องใช้ Chrome 149+ ยกเลิกการแนบจากเป้าหมายที่มี URL ที่ไม่ได้รับอนุญาตอย่างเงียบๆ เมื่อเชื่อมต่อ และบล็อกคำขอรันไทม์ (รวมถึงการนำทางและทรัพยากรย่อย) ยอมรับอาร์เรย์ของรูปแบบ

  • ประเภท: array
  • ค่าเริ่มต้น: false

• --ignoreDefaultChromeArg/ --ignore-default-chrome-arg ปิดใช้งานอาร์กิวเมนต์เริ่มต้นสำหรับ Chrome อย่างชัดเจน ใช้เฉพาะเมื่อ Chrome ถูกเปิดโดย chrome-devtools-mcp

  • ประเภท: array
  • ค่าเริ่มต้น: false

• --categoryEmulation/ --category-emulation ตั้งค่าเป็น false เพื่อยกเว้นเครื่องมือที่เกี่ยวข้องกับการจำลอง

  • ประเภท: boolean
  • ค่าเริ่มต้น: true

• --categoryPerformance/ --category-performance ตั้งค่าเป็น false เพื่อยกเว้นเครื่องมือที่เกี่ยวข้องกับประสิทธิภาพ

  • ประเภท: boolean
  • ค่าเริ่มต้น: true

• --categoryNetwork/ --category-network ตั้งค่าเป็น false เพื่อยกเว้นเครื่องมือที่เกี่ยวข้องกับเครือข่าย

  • ประเภท: boolean
  • ค่าเริ่มต้น: true

• --categoryExtensions/ --category-extensions ตั้งค่าเป็น true เพื่อรวมเครื่องมือที่เกี่ยวข้องกับส่วนขยาย หมายเหตุ: ขณะนี้ฟีเจอร์นี้รองรับเฉพาะการเชื่อมต่อแบบ pipe เท่านั้น autoConnect, browserUrl และ wsEndpoint ไม่รองรับฟีเจอร์นี้จนกว่าจะมีการเปิดตัว 149

  • ประเภท: boolean
  • ค่าเริ่มต้น: false

• --categoryExperimentalThirdParty/ --category-experimental-third-party ตั้งค่าเป็น true เพื่อเปิดใช้งานเครื่องมือนักพัฒนาบุคคลที่สามที่เปิดเผยโดยหน้าที่ตรวจสอบเอง

  • ประเภท: boolean
  • ค่าเริ่มต้น: false

• --performanceCrux/ --performance-crux ตั้งค่าเป็น false เพื่อปิดใช้งานการส่ง URL จาก performance traces ไปยัง CrUX API เพื่อรับข้อมูลประสิทธิภาพภาคสนาม

  • ประเภท: boolean
  • ค่าเริ่มต้น: true

• --usageStatistics/ --usage-statistics ตั้งค่าเป็น false เพื่อยกเลิกการเก็บรวบรวมสถิติการใช้งาน Google เก็บรวบรวมข้อมูลการใช้งานเพื่อปรับปรุงเครื่องมือ ซึ่งจัดการภายใต้ Google Privacy Policy (https://policies.google.com/privacy) การดำเนินการนี้ไม่ขึ้นกับเมตริกของเบราว์เซอร์ Chrome ปิดใช้งานหากตั้งค่าตัวแปรสภาพแวดล้อม CHROME_DEVTOOLS_MCP_NO_USAGE_STATISTICS หรือ CI

  • ประเภท: boolean
  • ค่าเริ่มต้น: true

• --screenshotFormat/ --screenshot-format แทนที่รูปแบบเอาต์พุตเริ่มต้นที่ใช้โดย take_screenshot เมื่อผู้เรียกไม่ได้ระบุ JPEG และ WebP มีขนาดเล็กกว่า PNG ประมาณ 3-5 เท่า ซึ่งช่วยลดขนาดบริบทในการสนทนา AI การไม่ตั้งค่าจะคงค่าเริ่มต้นที่มีอยู่ ("png")

  • ประเภท: string
  • ตัวเลือก: jpeg, png, webp
  • ค่าเริ่มต้น: false

• --screenshotQuality/ --screenshot-quality แทนที่คุณภาพการบีบอัดเริ่มต้น (0-100) ที่ใช้โดย take_screenshot สำหรับ JPEG และ WebP เมื่อผู้เรียกไม่ได้ระบุ ค่าที่ต่ำกว่าหมายถึงไฟล์ที่เล็กลง ละเว้นสำหรับ PNG การไม่ตั้งค่าจะคงค่าเริ่มต้นของ Puppeteer

  • ประเภท: number
  • ค่าเริ่มต้น: false

• --screenshotMaxWidth/ --screenshot-max-width ความกว้างสูงสุดเป็นพิกเซลสำหรับภาพหน้าจอ หากภาพที่จับได้กว้างกว่า ภาพจะถูกย่อขนาดลง (รักษาอัตราส่วนภาพ) ก่อนส่งคืน ลดขนาดบริบทในการสนทนา AI การไม่ตั้งค่าหมายถึงไม่มีการปรับขนาด

  • ประเภท: number
  • ค่าเริ่มต้น: false

• --screenshotMaxHeight/ --screenshot-max-height ความสูงสูงสุดเป็นพิกเซลสำหรับภาพหน้าจอ หากภาพที่จับได้สูงกว่านี้ จะถูกปรับลดขนาด (โดยรักษาอัตราส่วนภาพ) ก่อนส่งกลับ สามารถใช้ร่วมกับ --screenshot-max-width ได้; ตัวคูณมาตราส่วนที่เล็กกว่าจะมีผล หากไม่ตั้งค่าจะไม่มีการปรับขนาด

  • ประเภท: number
  • ค่าเริ่มต้น: false

• --slim เปิดเผยชุดเครื่องมือ "แบบบาง" 3 รายการ ครอบคลุมเฉพาะการนำทาง การเรียกใช้สคริปต์ และภาพหน้าจอ มีประโยชน์สำหรับงานเบราว์เซอร์พื้นฐาน

  • ประเภท: boolean
  • ค่าเริ่มต้น: false

• --redactNetworkHeaders/ --redact-network-headers หากเป็น true จะปกปิดส่วนหัวเครือข่ายบางส่วนที่ถือว่ามีความละเอียดอ่อนก่อนส่งกลับไปยังไคลเอนต์

  • ประเภท: boolean
  • ค่าเริ่มต้น: false

• --allowUnrestrictedPaths/ --allow-unrestricted-paths หากตั้งค่า จะปิดใช้งานข้อจำกัดเส้นทางเริ่มต้นที่ใช้เมื่อไคลเอนต์ MCP ไม่ได้เจรจาความสามารถ roots ตามค่าเริ่มต้น เครื่องมือเขียนไฟล์จะถูกจำกัดให้อยู่ในไดเรกทอรีชั่วคราวของระบบปฏิบัติการเมื่อไม่มีการกำหนดค่า roots ใช้ตัวเลือกนี้เฉพาะเมื่อเชื่อมต่อไคลเอนต์ภายในที่เชื่อถือได้ซึ่งไม่ได้ปรับใช้ MCP roots และต้องการเข้าถึงเส้นทางนอกไดเรกทอรีชั่วคราว

  • ประเภท: boolean
  • ค่าเริ่มต้น: false

ส่งผ่านทางคุณสมบัติ args ในการกำหนดค่า JSON ตัวอย่างเช่น:

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "chrome-devtools-mcp@latest",
        "--channel=canary",
        "--headless=true",
        "--isolated=true"
      ]
    }
  }
}

การเชื่อมต่อผ่าน WebSocket ด้วยส่วนหัวที่กำหนดเอง

คุณสามารถเชื่อมต่อโดยตรงไปยังปลายทาง WebSocket ของ Chrome และรวมส่วนหัวที่กำหนดเอง (เช่น สำหรับการตรวจสอบสิทธิ์):

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "chrome-devtools-mcp@latest",
        "--wsEndpoint=ws://127.0.0.1:9222/devtools/browser/<id>",
        "--wsHeaders={\"Authorization\":\"Bearer YOUR_TOKEN\"}"
      ]
    }
  }
}

หากต้องการรับปลายทาง WebSocket จากอินสแตนซ์ Chrome ที่กำลังทำงานอยู่ ให้ไปที่ http://127.0.0.1:9222/json/version และมองหาฟิลด์ webSocketDebuggerUrl

คุณยังสามารถเรียกใช้ npx chrome-devtools-mcp@latest --help เพื่อดูตัวเลือกการกำหนดค่าที่มีอยู่ทั้งหมด

แนวคิด

เซสชันพร้อมกัน

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

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "chrome-devtools-mcp@latest",
        "--experimentalPageIdRouting"
      ]
    }
  }
}

หากคุณเรียกใช้เซสชันไคลเอนต์ MCP อิสระหลายเซสชัน และต้องการให้แต่ละเซสชันเปิดโปรไฟล์ Chrome ชั่วคราวของตนเอง ให้ส่ง --isolated ด้วย การดำเนินการนี้จะหลีกเลี่ยงการแชร์ไดเรกทอรีข้อมูลผู้ใช้เริ่มต้นของ Chrome DevTools MCP ระหว่างอินสแตนซ์เซิร์ฟเวอร์เหล่านั้น

ไดเรกทอรีข้อมูลผู้ใช้

chrome-devtools-mcp เริ่มอินสแตนซ์ช่องทางเสถียรของ Chrome โดยใช้ไดเรกทอรีข้อมูลผู้ใช้ต่อไปนี้:

• Linux / macOS: $HOME/.cache/chrome-devtools-mcp/chrome-profile-$CHANNEL
• Windows: %HOMEPATH%/.cache/chrome-devtools-mcp/chrome-profile-$CHANNEL

ไดเรกทอรีข้อมูลผู้ใช้จะไม่ถูกล้างระหว่างการเรียกใช้และถูกแชร์ระหว่างอินสแตนซ์ทั้งหมดของ chrome-devtools-mcp ตั้งค่าตัวเลือก isolated เป็น true เพื่อใช้ไดเรกทอรีข้อมูลผู้ใช้ชั่วคราวแทน ซึ่งจะถูกล้างโดยอัตโนมัติหลังจากปิดเบราว์เซอร์

การเชื่อมต่อกับอินสแตนซ์ Chrome ที่กำลังทำงานอยู่

ตามค่าเริ่มต้น เซิร์ฟเวอร์ Chrome DevTools MCP จะเริ่มอินสแตนซ์ Chrome ใหม่ด้วยโปรไฟล์เฉพาะ ซึ่งอาจไม่เหมาะในทุกสถานการณ์:

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

ในกรณีเหล่านี้ ให้เริ่ม Chrome ก่อนและให้เซิร์ฟเวอร์ Chrome DevTools MCP เชื่อมต่อกับมัน มีสองวิธีในการดำเนินการนี้:

• การเชื่อมต่ออัตโนมัติ (มีให้ใน Chrome 144): เหมาะที่สุดสำหรับการแชร์สถานะระหว่างการทดสอบด้วยตนเองและการทดสอบที่ขับเคลื่อนโดยเอเจนต์
• การเชื่อมต่อด้วยตนเองผ่านพอร์ตการดีบักระยะไกล: เหมาะที่สุดเมื่อทำงานภายในสภาพแวดล้อมแซนด์บ็อกซ์

การเชื่อมต่อกับอินสแตนซ์ Chrome ที่กำลังทำงานอยู่โดยอัตโนมัติ

ขั้นตอนที่ 1: ตั้งค่าการดีบักระยะไกลใน Chrome

ใน Chrome (>= M144) ให้ทำดังต่อไปนี้เพื่อตั้งค่าการดีบักระยะไกล:

1. ไปที่ chrome://inspect/#remote-debugging เพื่อเปิดใช้งานการดีบักระยะไกล
2. ทำตาม UI ของกล่องโต้ตอบเพื่ออนุญาตหรือไม่อนุญาตการเชื่อมต่อการดีบักขาเข้า

ขั้นตอนที่ 2: กำหนดค่าเซิร์ฟเวอร์ Chrome DevTools MCP ให้เชื่อมต่อกับอินสแตนซ์ Chrome ที่กำลังทำงานอยู่โดยอัตโนมัติ

ในการเชื่อมต่อเซิร์ฟเวอร์ chrome-devtools-mcp กับอินสแตนซ์ Chrome ที่กำลังทำงานอยู่ ให้ใช้อาร์กิวเมนต์บรรทัดคำสั่ง --autoConnect สำหรับเซิร์ฟเวอร์ MCP

ข้อมูลโค้ดต่อไปนี้เป็นตัวอย่างการกำหนดค่าสำหรับ gemini-cli:

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["chrome-devtools-mcp@latest", "--autoConnect"]
    }
  }
}

ขั้นตอนที่ 3: ทดสอบการตั้งค่าของคุณ

ตรวจสอบให้แน่ใจว่าเบราว์เซอร์ของคุณกำลังทำงานอยู่ เปิด gemini-cli และเรียกใช้พรอมต์ต่อไปนี้:

Check the performance of https://developers.chrome.com

[!NOTE] ตัวเลือก autoConnect ต้องการให้ผู้ใช้เริ่ม Chrome หากผู้ใช้มีหลายโปรไฟล์ที่ใช้งานอยู่ เซิร์ฟเวอร์ MCP จะเชื่อมต่อกับโปรไฟล์เริ่มต้น (ตามที่ Chrome กำหนด) เซิร์ฟเวอร์ MCP สามารถเข้าถึงหน้าต่างที่เปิดอยู่ทั้งหมดสำหรับโปรไฟล์ที่เลือก

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

การคลิก อนุญาต จะส่งผลให้เซิร์ฟเวอร์ Chrome DevTools MCP เปิด developers.chrome.com และทำการตรวจสอบประสิทธิภาพ

การเชื่อมต่อด้วยตนเองโดยใช้การส่งต่อพอร์ต

คุณสามารถเชื่อมต่อกับอินสแตนซ์ Chrome ที่กำลังทำงานอยู่ได้โดยใช้ตัวเลือก --browser-url สิ่งนี้มีประโยชน์หากคุณกำลังเรียกใช้เซิร์ฟเวอร์ MCP ในสภาพแวดล้อมแซนด์บ็อกซ์ที่ไม่อนุญาตให้เริ่มอินสแตนซ์ Chrome ใหม่

นี่คือคำแนะนำทีละขั้นตอนเกี่ยวกับวิธีเชื่อมต่อกับอินสแตนซ์ Chrome ที่กำลังทำงานอยู่:

ขั้นตอนที่ 1: กำหนดค่าไคลเอนต์ MCP

เพิ่มตัวเลือก --browser-url ในการกำหนดค่าไคลเอนต์ MCP ของคุณ ค่าของตัวเลือกนี้ควรเป็น URL ของอินสแตนซ์ Chrome ที่กำลังทำงานอยู่ http://127.0.0.1:9222 เป็นค่าเริ่มต้นทั่วไป

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "chrome-devtools-mcp@latest",
        "--browser-url=http://127.0.0.1:9222"
      ]
    }
  }
}

ขั้นตอนที่ 2: เริ่มเบราว์เซอร์ Chrome

[!WARNING] การเปิดใช้งานพอร์ตการดีบักระยะไกลจะเปิดพอร์ตการดีบักบนอินสแตนซ์เบราว์เซอร์ที่กำลังทำงานอยู่ แอปพลิเคชันใดๆ บนเครื่องของคุณสามารถเชื่อมต่อกับพอร์ตนี้และควบคุมเบราว์เซอร์ได้ ตรวจสอบให้แน่ใจว่าคุณไม่ได้เรียกดูเว็บไซต์ที่มีความละเอียดอ่อนใดๆ ในขณะที่พอร์ตการดีบักเปิดอยู่

เริ่มเบราว์เซอร์ Chrome โดยเปิดใช้งานพอร์ตการดีบักระยะไกล ตรวจสอบให้แน่ใจว่าได้ปิดอินสแตนซ์ Chrome ที่กำลังทำงานอยู่ก่อนเริ่มใหม่โดยเปิดใช้งานพอร์ตการดีบัก หมายเลขพอร์ตที่คุณเลือกต้องเหมือนกับหมายเลขที่คุณระบุในตัวเลือก --browser-url ในการกำหนดค่าไคลเอนต์ MCP ของคุณ

ด้วยเหตุผลด้านความปลอดภัย Chrome กำหนดให้คุณต้องใช้ไดเรกทอรีข้อมูลผู้ใช้ที่ไม่ใช่ค่าเริ่มต้น เมื่อเปิดใช้งานพอร์ตการดีบักระยะไกล คุณสามารถระบุไดเรกทอรีที่กำหนดเองได้โดยใช้แฟล็ก --user-data-dir สิ่งนี้ทำให้มั่นใจได้ว่าโปรไฟล์และข้อมูลการเรียกดูปกติของคุณจะไม่ถูกเปิดเผยต่อเซสชันการดีบัก

macOS

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-profile-stable

Linux

/usr/bin/google-chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-profile-stable

Windows

"C:\Program Files\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222 --user-data-dir="%TEMP%\chrome-profile-stable"

ขั้นตอนที่ 3: ทดสอบการตั้งค่าของคุณ

หลังจากกำหนดค่าไคลเอนต์ MCP และเริ่มเบราว์เซอร์ Chrome แล้ว คุณสามารถทดสอบการตั้งค่าของคุณได้โดยเรียกใช้พรอมต์ง่ายๆ ในไคลเอนต์ MCP ของคุณ:

Check the performance of https://developers.chrome.com

ไคลเอนต์ MCP ของคุณควรเชื่อมต่อกับอินสแตนซ์ Chrome ที่กำลังทำงานอยู่และรับรายงานประสิทธิภาพ

หากคุณประสบปัญหาการส่งต่อพอร์ตระหว่าง VM กับโฮสต์ โปรดดูส่วน "การดีบักระยะไกลระหว่างเครื่องเสมือน (VM) และโฮสต์ล้มเหลว" ใน docs/troubleshooting.md

สำหรับรายละเอียดเพิ่มเติมเกี่ยวกับการดีบักระยะไกล โปรดดู เอกสารประกอบ Chrome DevTools

การดีบัก Chrome บน Android

โปรดดู คำแนะนำเหล่านี้

ข้อจำกัดที่ทราบ

ดู การแก้ไขปัญหา

การรวมเป็นเอเจนต์ย่อยของเบราว์เซอร์

หากคุณกำลังพัฒนาเครื่องมือเอเจนต์และต้องการให้เอเจนต์ย่อยของเบราว์เซอร์ในตัวเป็นส่วนหนึ่งของผลิตภัณฑ์ของคุณ เราขอแนะนำให้สร้างบน Chrome DevTools สำหรับเอเจนต์

สำหรับการใช้งานอ้างอิง โปรดดู เอกสารประกอบเอเจนต์เบราว์เซอร์ Gemini CLI