chrome-devtools-mcp的使用案例：连接一个远程运行的chrome实例

1、连接一个远程运行的chrome实例

以windwos系统为例

1.1、启动chrome实例

查看本地chrome程序的安装路径

 

cmd运行，将会在本地以--remote-debugging-port=9222 打开chrome

 

1.2、案例

以spring-AI为例

 pom.xml

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>3.4.5</version>
        <relativePath/>
    </parent>
    <groupId>com.example</groupId>
    <artifactId>ai-mcp-fileserver</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>Spring AI - Model Context Protocol - Fileserver</name>
    <description>Simple AI Application using MCP client to chat with FileServer</description>
    <properties>
        <java.version>17</java.version>
    </properties>

    <dependencyManagement>
        <dependencies>
            <dependency>
                <groupId>org.springframework.ai</groupId>
                <artifactId>spring-ai-bom</artifactId>
                <version>1.1.0-SNAPSHOT</version>
                <type>pom</type>
                <scope>import</scope>
            </dependency>
        </dependencies>
    </dependencyManagement>

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.ai</groupId>
            <artifactId>spring-ai-starter-model-openai</artifactId>
        </dependency>

        <!-- 阿里的灵积
        <dependency>
            <groupId>com.alibaba.cloud.ai</groupId>
            <artifactId>spring-ai-alibaba-starter-dashscope</artifactId>
            <version>1.0.0.2</version>
        </dependency>-->

        <dependency>
            <groupId>org.springframework.ai</groupId>
            <artifactId>spring-ai-starter-mcp-client</artifactId>
        </dependency>

    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

    <repositories>
        <repository>
            <id>spring-milestones</id>
            <name>Spring Milestones</name>
            <url>https://repo.spring.io/milestone</url>
            <snapshots>
                <enabled>false</enabled>
            </snapshots>
        </repository>
        <repository>
            <id>spring-snapshots</id>
            <name>Spring Snapshots</name>
            <url>https://repo.spring.io/snapshot</url>
            <releases>
                <enabled>false</enabled>
            </releases>
        </repository>
            <repository>
            <id>central-portal-snapshots</id>
            <name>Central Portal Snapshots</name>
            <url>https://central.sonatype.com/repository/maven-snapshots/</url>
            <releases>
                <enabled>false</enabled>
            </releases>
            <snapshots>
                <enabled>true</enabled>
            </snapshots>
        </repository>
    </repositories>

</project>

application.properties

spring.application.name=mcp
spring.main.web-application-type=NONE
server.port=8086
server.servlet.context-path=/

spring.ai.chat.client.enabled=false

#spring.ai.openai.base-url=https://api.deepseek.com/
#spring.ai.openai.api-key=sk-xxx
#spring.ai.openai.chat.options.model=deepseek-chat
#spring.ai.openai.chat.options.max_completion_tokens=8000
#spring.ai.openai.chat.options.temperature=0.1
spring.ai.openai.base-url=https://dashscope.aliyuncs.com/compatible-mode
spring.ai.openai.api-key=sk-xxx
spring.ai.openai.chat.options.model=qwen3-max

#spring.ai.dashscope.base-url=https://dashscope.aliyuncs.com/compatible-mode/v1
#spring.ai.dashscope.api-key=sk-xxx
#spring.ai.dashscope.chat.options.model=qwen3-vl-plus

spring.ai.mcp.client.toolcallback.enabled=true
spring.ai.mcp.client.stdio.servers-configuration= classpath:mcp-servers-config.json

logging.level.io.modelcontextprotocol.client=DEBUG
logging.level.io.modelcontextprotocol.spec=DEBUG

 

LLMConfig类

package com.example;

import io.modelcontextprotocol.client.McpSyncClient;
import org.springframework.ai.chat.client.ChatClient;
import org.springframework.ai.chat.model.ChatModel;
import org.springframework.ai.mcp.SyncMcpToolCallbackProvider;
import org.springframework.beans.factory.annotation.Qualifier;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;

import java.util.List;

@Configuration
public class LLMConfig {

    @Bean
    public ChatClient.Builder openAiChatClient(@Qualifier("openAiChatModel") ChatModel openAiChatModel,
                                               List<McpSyncClient> mcpSyncClients) {
        return ChatClient.builder(openAiChatModel)
                .defaultToolCallbacks(new SyncMcpToolCallbackProvider(mcpSyncClients));
    }

//    @Bean
//    public ChatClient.Builder dashscopeChatClient(@Qualifier("dashscopeChatModel") ChatModel openAiChatModel) {
//        return ChatClient.builder(openAiChatModel);
//    }
}

 

Application类

package com.example;

import org.springframework.ai.chat.client.ChatClient;
import org.springframework.beans.factory.annotation.Qualifier;
import org.springframework.boot.CommandLineRunner;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.context.ConfigurableApplicationContext;
import org.springframework.context.annotation.Bean;

@SpringBootApplication
public class Application {

    public static void main(String[] args) {
        SpringApplication.run(Application.class, args);
    }

    @Bean
    public CommandLineRunner predefinedQuestions(@Qualifier("openAiChatClient") ChatClient.Builder chatClientBuilder,
                                                 //List<McpSyncClient> mcpSyncClients,
                                                 ConfigurableApplicationContext context) {
        return args -> {
            var chatClient = chatClientBuilder
                    //.defaultToolCallbacks(new SyncMcpToolCallbackProvider(mcpSyncClients))
                    .build();

            String question = "打开http://localhost:8001/index.html";
            System.out.println("QUESTION: " + question);
            System.out.println("ASSISTANT: " + chatClient.prompt(question).call().content());
            System.out.println("~~~~~~~~~~~~~~~~~~~~~~~~~~任务完成~~~~~~~~~~~~~~~~~~~~~~~~~~");
            context.close();
        };
    }

}

 

下面的内容摘录自 https://github.com/ChromeDevTools/chrome-devtools-mcp

1、Getting started

Add the following config to your MCP client:

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

2、Configuration

The Chrome DevTools MCP server supports the following configuration option:

--browserUrl, -u Connect to a running Chrome instance using port forwarding. For more details see: https://developer.chrome.com/docs/devtools/remote-debugging/local-server.
    Type: string

--wsEndpoint, -w WebSocket endpoint to connect to a running Chrome instance (e.g., ws://127.0.0.1:9222/devtools/browser/). Alternative to --browserUrl.
    Type: string

--wsHeaders Custom headers for WebSocket connection in JSON format (e.g., '{"Authorization":"Bearer token"}'). Only works with --wsEndpoint.
    Type: string

--headless Whether to run in headless (no UI) mode.
    Type: boolean
    Default: false

--executablePath, -e Path to custom Chrome executable.
    Type: string

--isolated If specified, creates a temporary user-data-dir that is automatically cleaned up after the browser is closed. Defaults to false.
    Type: boolean

--userDataDir Path to the user data directory for Chrome. Default is $HOME/.cache/chrome-devtools-mcp/chrome-profile$CHANNEL_SUFFIX_IF_NON_STABLE
    Type: string

--channel Specify a different Chrome channel that should be used. The default is the stable channel version.
    Type: string
    Choices: stable, canary, beta, dev

--logFile Path to a file to write debug logs to. Set the env variable DEBUG to * to enable verbose logs. Useful for submitting bug reports.
    Type: string

--viewport Initial viewport size for the Chrome instances started by the server. For example, 1280x720. In headless mode, max size is 3840x2160px.
    Type: string

--proxyServer Proxy server configuration for Chrome passed as --proxy-server when launching the browser. See https://www.chromium.org/developers/design-documents/network-settings/ for details.
    Type: string

--acceptInsecureCerts If enabled, ignores errors relative to self-signed and expired certificates. Use with caution.
    Type: boolean

--chromeArg Additional arguments for Chrome. Only applies when Chrome is launched by chrome-devtools-mcp.
    Type: array

--categoryEmulation Set to false to exclude tools related to emulation.
    Type: boolean
    Default: true

--categoryPerformance Set to false to exclude tools related to performance.
    Type: boolean
    Default: true

--categoryNetwork Set to false to exclude tools related to network.
    Type: boolean
    Default: true

Pass them via the args property in the JSON configuration. For example:

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

 

3、Connecting via WebSocket with custom headers

You can connect directly to a Chrome WebSocket endpoint and include custom headers (e.g., for authentication):

{
  "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\"}"
      ]
    }
  }
}

To get the WebSocket endpoint from a running Chrome instance, visit http://127.0.0.1:9222/json/version and look for the webSocketDebuggerUrl field.

You can also run npx chrome-devtools-mcp@latest --help to see all available configuration options.

4、User data directory

chrome-devtools-mcp starts a Chrome's stable channel instance using the following user data directory:

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

The user data directory is not cleared between runs and shared across all instances of chrome-devtools-mcp. Set the isolated option to true to use a temporary user data dir instead which will be cleared automatically after the browser is closed.

 

5、Connecting to a running Chrome instance

You can connect to a running Chrome instance by using the --browser-url option. This is useful if you want to use your existing Chrome profile or if you are running the MCP server in a sandboxed environment that does not allow starting a new Chrome instance.

Here is a step-by-step guide on how to connect to a running Chrome Stable instance:

Step 1: Configure the MCP client

Add the --browser-url option to your MCP client configuration. The value of this option should be the URL of the running Chrome instance. http://127.0.0.1:9222 is a common default.

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

Step 2: Start the Chrome browser

Start the Chrome browser with the remote debugging port enabled. Make sure to close any running Chrome instances before starting a new one with the debugging port enabled. The port number you choose must be the same as the one you specified in the --browser-url option in your MCP client configuration.

For security reasons, Chrome requires you to use a non-default user data directory when enabling the remote debugging port. You can specify a custom directory using the --user-data-dir flag. This ensures that your regular browsing profile and data are not exposed to the debugging session.

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"