การกำหนดค่า

Matthias Rohmer
José Luis Zapata

คุณสามารถกำหนดค่าเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome สำหรับ Agent เพื่อปรับแต่งวิธีที่ Agent โต้ตอบกับเบราว์เซอร์ เครื่องมือที่เปิดใช้ และวิธีจัดการข้อมูล

กำหนดค่าเซิร์ฟเวอร์โดยส่งแฟล็กบรรทัดคำสั่งในอาร์เรย์ args ของไฟล์การกำหนดค่าไคลเอ็นต์ Model Context Protocol (MCP) ซึ่งโดยปกติแล้วจะเป็นไฟล์ config.json

เช่น หากต้องการเรียกใช้ Chrome ในโหมด Headless และใช้ช่อง Canary ให้ใช้การกำหนดค่าต่อไปนี้ 

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

สถานการณ์การกำหนดค่าที่พบบ่อย

สถานการณ์ต่อไปนี้อธิบายวิธีทั่วไปในการกำหนดค่าเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome สำหรับ เอเจนต์

เรียกใช้ในโหมดไม่มีส่วนหัว

หากต้องการเรียกใช้ Chrome ในโหมด Headless (ไม่มี UI) เพื่อทำงานในเบื้องหลังโดยไม่มีหน้าต่างเบราว์เซอร์ที่มองเห็นได้ เพิ่มแฟล็ก --headless ลงในอาร์กิวเมนต์ของเซิร์ฟเวอร์

เชื่อมต่อกับเซสชันเบราว์เซอร์ที่มีอยู่

โดยค่าเริ่มต้น เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome สำหรับ Agent จะเริ่มอินสแตนซ์ Chrome ใหม่ อย่างไรก็ตาม คุณ เชื่อมต่อเอเจนต์กับเซสชันเบราว์เซอร์ที่มีอยู่ได้ ซึ่งจะมีประโยชน์หากตัวแทนต้องตรวจสอบปัญหาในเซสชันที่คุณเริ่มแล้ว (เช่น หากคุณลงชื่อเข้าใช้แล้ว)

คุณเชื่อมต่อกับเซสชันที่มีอยู่ได้ 2 วิธี ดังนี้

การเชื่อมต่ออัตโนมัติ (Chrome 144 ขึ้นไป)

หากคุณใช้แฟล็ก --autoConnect เซิร์ฟเวอร์ MCP จะเชื่อมต่อกับอินสแตนซ์ Chrome ที่ใช้งานอยู่โดยอัตโนมัติ

  1. ในเบราว์เซอร์ Chrome ที่ทำงานอยู่ ให้ไปที่ chrome://inspect/#remote-debugging แล้วเปิดใช้การแก้ไขข้อบกพร่องจากระยะไกล
  2. เพิ่ม --autoConnect ลงในการกำหนดค่า MCP โดยทำดังนี้ json "args": ["chrome-devtools-mcp@latest", "--autoConnect"]
  3. เมื่อตัวแทนพยายามเชื่อมต่อ Chrome จะแสดงกล่องโต้ตอบที่ขอ สิทธิ์ คลิกอนุญาต

การเชื่อมต่อด้วยตนเอง

หากใช้ --autoConnect ไม่ได้ (เช่น ในสภาพแวดล้อมแซนด์บ็อกซ์) คุณสามารถเริ่ม Chrome ด้วยพอร์ตการแก้ไขข้อบกพร่องและเชื่อมต่อโดยใช้ --browser-url ด้วยตนเองได้

  1. เริ่ม Chrome จากเทอร์มินัลโดยเปิดใช้การแก้ไขข้อบกพร่องระยะไกลและมี ไดเรกทอรีข้อมูลผู้ใช้ที่กำหนดเอง
    • macOS shell /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-profile-stable
    • Windows: shell start chrome --remote-debugging-port=9222 --user-data-dir=%TEMP%\chrome-profile-stable
    • Linux: shell google-chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-profile-stable
  2. กำหนดค่า Agent ให้เชื่อมต่อกับพอร์ตนี้ json "args": ["chrome-devtools-mcp@latest", "--browser-url=http://127.0.0.1:9222"]

ข้อมูลอ้างอิงตัวเลือกการกำหนดค่า

ส่วนต่อไปนี้จะแสดงรายการค่าสถานะการกำหนดค่าที่ใช้ได้ ดูตัวเลือกและการอัปเดตล่าสุดได้ที่ที่เก็บ MCP GitHub ของเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome

ตัวเลือกการเชื่อมต่อ

ใช้ตัวเลือกเหล่านี้เพื่อกำหนดค่าวิธีที่เซิร์ฟเวอร์เชื่อมต่อกับ Chrome

ธง ประเภท ค่าเริ่มต้น คำอธิบาย
--autoConnect หรือ --auto-connect บูลีน false เชื่อมต่อกับอินสแตนซ์ Chrome (144 ขึ้นไป) ที่ทำงานในเครื่องโดยอัตโนมัติ ต้องเปิดใช้การแก้ไขข้อบกพร่องจากระยะไกลโดยใช้ chrome://inspect/#remote-debugging
--browserUrl หรือ --browser-url
-u		 สตริง false เชื่อมต่อกับอินสแตนซ์ Chrome ที่กำลังทำงานและแก้ไขข้อบกพร่องได้ (เช่น http://127.0.0.1:9222)
--wsEndpoint หรือ --ws-endpoint
-w		 สตริง false ปลายทาง WebSocket เพื่อเชื่อมต่อกับอินสแตนซ์ Chrome ที่ทำงานอยู่ (เช่น ws://127.0.0.1:9222/devtools/browser/<id>) ทางเลือกแทน --browserUrl
--wsHeaders หรือ --ws-headers สตริง false ส่วนหัวที่กำหนดเองสำหรับการเชื่อมต่อ WebSocket ในรูปแบบ JSON (เช่น '{"Authorization":"Bearer token"}') ใช้ได้กับ --wsEndpoint เท่านั้น

ตัวเลือกการเปิดเบราว์เซอร์

ตัวเลือกเหล่านี้จะมีผลเมื่อเซิร์ฟเวอร์ MCP เริ่ม Chrome

ธง ประเภท ค่าเริ่มต้น คำอธิบาย
--headless บูลีน false เรียกใช้ Chrome ในโหมด Headless (ไม่มี UI)
--channel สตริง stable ระบุช่อง Chrome ที่จะใช้ ตัวเลือก: canary, dev, beta และ stable
--executablePath หรือ --executable-path
-e		 สตริง false เส้นทางไปยังไฟล์ปฏิบัติการ Chrome ที่กำหนดเอง
--userDataDir หรือ --user-data-dir สตริง ดูคำอธิบาย เส้นทางไปยังไดเรกทอรีข้อมูลผู้ใช้ ค่าเริ่มต้นคือ $HOME/.cache/chrome-devtools-mcp/chrome-profile$CHANNEL_SUFFIX_IF_NON_STABLE
--isolated บูลีน false สร้างไดเรกทอรีข้อมูลผู้ใช้ชั่วคราวซึ่งจะล้างข้อมูลโดยอัตโนมัติเมื่อปิดเบราว์เซอร์
--viewport สตริง false ขนาดวิวพอร์ตเริ่มต้น (เช่น 1280x720) ในโหมด Headless ขนาดสูงสุดคือ 3840x2160
--proxyServer หรือ --proxy-server สตริง false การกำหนดค่าพร็อกซีเซิร์ฟเวอร์ที่ส่งไปยัง Chrome
--chromeArg หรือ --chrome-arg อาร์เรย์ false อาร์กิวเมนต์เพิ่มเติมสำหรับส่งผ่านไปยัง Chrome
--ignoreDefaultChromeArg หรือ --ignore-default-chrome-arg อาร์เรย์ false ปิดใช้อาร์กิวเมนต์เริ่มต้นสำหรับ Chrome อย่างชัดเจน

ตัวเลือกด้านความปลอดภัยและความเป็นส่วนตัว

ใช้ตัวเลือกเหล่านี้เพื่อจัดการการตั้งค่าความปลอดภัยและความเป็นส่วนตัวของข้อมูล

ธง ประเภท ค่าเริ่มต้น คำอธิบาย
--acceptInsecureCerts หรือ --accept-insecure-certs บูลีน false ไม่สนใจข้อผิดพลาดที่เกี่ยวข้องกับใบรับรองที่หมดอายุและใบรับรองที่ลงนามด้วยตนเอง โปรดใช้ด้วยความระมัดระวัง
--blockedUrlPattern หรือ --blocked-url-pattern อาร์เรย์ false จำกัดการเข้าถึงเครือข่ายโดยการบล็อกรูปแบบ URL ที่ระบุ (ใช้ URLPattern) บล็อกการไปยังส่วนต่างๆ และทรัพยากรย่อย
--allowedUrlPattern หรือ --allowed-url-pattern อาร์เรย์ false จำกัดการเข้าถึงเครือข่ายโดยอนุญาตเฉพาะรูปแบบ URL ที่ระบุ ต้องใช้ Chrome 149 ขึ้นไป
--redactNetworkHeaders หรือ --redact-network-headers บูลีน false ปกปิดส่วนหัวของเครือข่ายที่ละเอียดอ่อนก่อนที่จะส่งกลับไปยังไคลเอ็นต์
--usageStatistics หรือ --usage-statistics บูลีน true เปิดใช้การเก็บรวบรวมสถิติการใช้งานเพื่อปรับปรุงเครื่องมือ นอกจากนี้ยังปิดใช้ได้โดยใช้ตัวแปรสภาพแวดล้อม CHROME_DEVTOOLS_MCP_NO_USAGE_STATISTICS หรือ CI
--performanceCrux หรือ --performance-crux บูลีน true ส่ง URL จากการติดตามประสิทธิภาพไปยัง Google CrUX API เพื่อดึงข้อมูลประสบการณ์ของผู้ใช้จริง

หมวดหมู่ฟีเจอร์

คุณเปิดหรือปิดใช้กลุ่มเครื่องมือได้โดยใช้ฟีเจอร์นี้

ธง ประเภท ค่าเริ่มต้น คำอธิบาย
--categoryEmulation หรือ --category-emulation บูลีน true เปิดใช้เครื่องมือที่เกี่ยวข้องกับการจำลอง
--categoryNetwork หรือ --category-network บูลีน true เปิดใช้เครื่องมือที่เกี่ยวข้องกับเครือข่าย
--categoryPerformance หรือ --category-performance บูลีน true เปิดใช้เครื่องมือที่เกี่ยวข้องกับประสิทธิภาพ
--categoryExtensions หรือ --category-extensions บูลีน false เปิดใช้เครื่องมือที่เกี่ยวข้องกับส่วนขยาย รองรับเฉพาะการเชื่อมต่อแบบไปป์
--categoryExperimentalThirdParty หรือ --category-experimental-third-party บูลีน false เปิดใช้เครื่องมือสำหรับนักพัฒนาแอปของบุคคลที่สามที่หน้าเว็บที่ตรวจสอบแสดง
--categoryExperimentalWebmcp หรือ --category-experimental-webmcp บูลีน false เปิดใช้เครื่องมือแก้ไขข้อบกพร่องของ WebMCP ต้องใช้ Chrome 149 ขึ้นไปที่เปิดใช้ฟีเจอร์ WebMCP
--memoryDebugging หรือ --memory-debugging บูลีน false เปิดใช้เครื่องมือแก้ไขข้อบกพร่องของหน่วยความจำ

ตัวเลือกภาพหน้าจอ

ใช้ตัวเลือกเหล่านี้เพื่อปรับแต่งวิธีที่เอเจนต์จับภาพหน้าจอ

ธง ประเภท ค่าเริ่มต้น คำอธิบาย
--screenshotFormat หรือ --screenshot-format สตริง false ลบล้างรูปแบบเอาต์พุตเริ่มต้น (png) ตัวเลือก: jpeg, png และ webp รูปแบบ jpeg และ webp มีขนาดเล็กกว่า ซึ่งจะช่วยลดขนาดบริบทในการสนทนาด้วย AI
--screenshotQuality หรือ --screenshot-quality ตัวเลข false ลบล้างคุณภาพการบีบอัด (0-100) สำหรับ jpeg และ webp
--screenshotMaxWidth หรือ --screenshot-max-width ตัวเลข false ความกว้างสูงสุดเป็นพิกเซล ระบบจะลดขนาดภาพหน้าจอที่ใหญ่ขึ้น
--screenshotMaxHeight หรือ --screenshot-max-height ตัวเลข false ความสูงสูงสุดเป็นพิกเซล ระบบจะลดขนาดภาพหน้าจอที่ใหญ่ขึ้น

ตัวเลือกทดลอง

ใช้ตัวเลือกเหล่านี้เพื่อเปิดใช้ฟีเจอร์ทดลองที่อยู่ระหว่างการพัฒนา

ธง ประเภท ค่าเริ่มต้น คำอธิบาย
--experimentalPageIdRouting หรือ --experimental-page-id-routing บูลีน false แสดง pageId ในเครื่องมือระดับหน้าเว็บเพื่อกำหนดเส้นทางคำขอในเซสชันของตัวแทนพร้อมกัน
--experimentalDevtools หรือ --experimental-devtools บูลีน false เปิดใช้การทำงานอัตโนมัติในเป้าหมายของเครื่องมือสำหรับนักพัฒนาเว็บ
--experimentalVision หรือ --experimental-vision บูลีน false เปิดใช้เครื่องมือตามพิกัด (เช่น click_at) โดยปกติแล้วต้องใช้โมเดลการใช้งานคอมพิวเตอร์ที่สามารถสร้างพิกัดที่แม่นยำได้โดยดูจากภาพหน้าจอ
--experimentalStructuredContent หรือ --experimental-structured-content บูลีน false เอาต์พุตเป็นเนื้อหาที่มีการจัดรูปแบบโครงสร้าง
--experimentalIncludeAllPages หรือ --experimental-include-all-pages บูลีน false รวมหน้าเว็บทุกประเภท (เช่น WebView และหน้าเว็บในเบื้องหลัง)
--experimentalScreencast หรือ --experimental-screencast บูลีน false แสดงเครื่องมือ Screencast (ต้องมี ffmpeg ใน PATH)
--experimentalFfmpegPath หรือ --experimental-ffmpeg-path สตริง false เส้นทางไปยังไฟล์ปฏิบัติการ ffmpeg

ตัวเลือกอื่นๆ

ใช้ตัวเลือกเหล่านี้เพื่อกำหนดค่าการบันทึกหรือเปิดใช้ชุดเครื่องมือแบบง่าย

ธง ประเภท ค่าเริ่มต้น คำอธิบาย
--slim บูลีน false แสดงชุดเครื่องมือ 3 อย่างแบบย่อ (การนำทาง การเรียกใช้สคริปต์ และภาพหน้าจอ) มีประโยชน์สำหรับงานพื้นฐานของเบราว์เซอร์
--logFile หรือ --log-file สตริง false เส้นทางไปยังไฟล์ที่จะเขียนบันทึกการแก้ไขข้อบกพร่อง

ตัวแปรสภาพแวดล้อม

นอกจากนี้ คุณยังใช้ตัวแปรสภาพแวดล้อมต่อไปนี้เพื่อกำหนดค่าเซิร์ฟเวอร์ได้ด้วย

  • CHROME_DEVTOOLS_MCP_NO_USAGE_STATISTICS: หากตั้งค่าไว้ จะปิดใช้การเก็บรวบรวมสถิติการใช้งาน (เทียบเท่ากับ --no-usage-statistics)
  • CHROME_DEVTOOLS_MCP_NO_UPDATE_CHECKS: หากตั้งค่าไว้ จะปิดใช้การตรวจสอบหาอัปเดตเป็นระยะ
  • CI: หากตั้งค่าไว้ จะปิดใช้การเก็บรวบรวมสถิติการใช้งาน
  • DEBUG: ตั้งค่าเป็น * เพื่อเปิดใช้การบันทึกการแก้ไขข้อบกพร่องแบบละเอียด (ทํางานร่วมกับ --logFile)