Chrome DevTools lets Github Copilot control and inspect a live Chrome browser, giving the full power of Chrome DevTools for reliable automation, in-depth debugging, and performance analysis. This extension works even if MCP Server was disabled in GitHub Copilot or VSCode Settings.
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Chrome DevTools lets Github Copilot control and inspect a live Chrome browser, giving the full power of Chrome DevTools for reliable automation, in-depth debugging, and performance analysis. This extension works even if MCP Server was disabled in GitHub Copilot or VSCode Settings.
⚠️ IMPORTANT: Manual Tool Set Configuration Required
This extension's tools need to be manually configured as a tool set in VS Code. Follow these steps to enable all tools at once:
Steps to Configure Tool Set:
Press Ctrl+Shift+P (or Cmd+Shift+P on Mac)
Search for and select: Chat: Configure Tool Sets...
Select an existing tool set file or create a new file (e.g., user-toolsets.json)
Add the following JSON configuration to the file:
{
"chrome-devtools": {
"tools": [
"click",
"close_page",
"drag",
"emulate_cpu",
"emulate_network",
"evaluate_script",
"fill",
"fill_form",
"get_console_message",
"get_network_request",
"handle_dialog",
"hover",
"list_console_messages",
"list_network_requests",
"list_pages",
"navigate_page",
"navigate_page_history",
"new_page",
"performance_analyze_insight",
"performance_start_trace",
"performance_stop_trace",
"resize_page",
"select_page",
"take_screenshot",
"take_snapshot",
"upload_file",
"wait_for"
],
"description": "Chrome DevTools lets Copilot control and inspect a live Chrome browser, giving the AI coding assistant access to the full power of Chrome DevTools for reliable automation, in-depth debugging, and performance analysis",
"icon": "tools"
}
}
Save the file
The tool set will now be available in GitHub Copilot, you can invoke it using '#chrome-devtools'
Why is this needed? VS Code doesn't currently support including toolSets in extensions (planned for future releases). This manual step groups all tools under a single name (#chrome-devtools) for easier management and invocation similar to MCP Server.
Configuration
Configure the extension using these settings:
chrome-devtools-mcp-relay.autoConnect: Automatically connect to MCP server when VS Code starts. If disabled (default), the server will connect on first tool use. (Default: false)
chrome-devtools-mcp-relay.additionalMCPServerArguments: Additional MCP Server arguments that need to be used when connecting to the Chrome DevTools MCP Server. You can find the argument details here
Type: Dynamic Argument - This value will be appended to the MCP server command at runtime
Features
This extension integrates with an MCP (Model Context Protocol) server to provide enhanced AI capabilities.
click: Clicks on the provided element
close_page: Closes the page by its index. The last open page cannot be closed.
drag: Drag an element onto another element
emulate_cpu: Emulates CPU throttling by slowing down the selected page's execution.
emulate_network: Emulates network conditions such as throttling or offline mode on the selected page.
evaluate_script: Evaluate a JavaScript function inside the currently selected page. Returns the response as JSON
so returned values have to JSON-serializable.
fill: Type text into a input, text area or select an option from a
fill_form: Fill out multiple form elements at once
get_console_message: Gets a console message by its ID. You can get all messages by calling list_console_messages.
get_network_request: Gets a network request by URL. You can get all requests by calling list_network_requests.
handle_dialog: If a browser dialog was opened, use this command to handle it
hover: Hover over the provided element
list_console_messages: List all console messages for the currently selected page since the last navigation.
list_network_requests: List all requests for the currently selected page since the last navigation.
list_pages: Get a list of pages open in the browser.
navigate_page: Navigates the currently selected page to a URL.
navigate_page_history: Navigates the currently selected page.
new_page: Creates a new page
performance_analyze_insight: Provides more detailed information on a specific Performance Insight that was highlighted in the results of a trace recording.
performance_start_trace: Starts a performance trace recording on the selected page. This can be used to look for performance problems and insights to improve the performance of the page. It will also report Core Web Vital (CWV) scores for the page.
performance_stop_trace: Stops the active performance trace recording on the selected page.
resize_page: Resizes the selected page's window so that the page has specified dimension
select_page: Select a page as a context for future tool calls.
take_screenshot: Take a screenshot of the page or element.
take_snapshot: Take a text snapshot of the currently selected page based on the a11y tree. The snapshot lists page elements along with a unique
identifier (uid). Always use the latest snapshot. Prefer taking a snapshot over taking a screenshot.
upload_file: Upload a file through a provided element.
wait_for: Wait for the specified text to appear on the selected page.
MCP Server Connection
This extension connects to an MCP server using the following configuration:
Transport Type: stdio
Command: npx
Arguments: ["-y","chrome-devtools-mcp@latest"]
Note: If you have configured settings with "Dynamic Argument" mapping, those arguments will be automatically appended to the command at runtime based on your VS Code settings. This allows you to customize the MCP server behavior without rebuilding the extension.
