如何带--remote-debugging-port标志本地运行Vue应用并绑定Chrome调试器？

你遇到的问题核心是Chrome远程调试端口和Vue应用的启动端口冲突，你设置的--remote-debugging-port参数值为8080，和Vue应用默认的启动端口一致，导致访问localhost:8080时优先命中了Chrome自带的远程调试服务页面，而非你的应用。按照以下步骤操作即可解决：

1. 更换Chrome远程调试端口 #

首先完全关闭所有正在运行的Chrome进程（包括后台驻留的进程），之后用非冲突的端口启动Chrome，推荐使用调试场景常用的9222端口：

• Windows：按下Win+R打开运行窗口，输入以下命令后回车：

  "C:\Program Files\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222
  

  注意如果你的Chrome安装在其他路径，需要替换为对应的实际安装路径。
• macOS：打开终端输入以下命令后回车：

  /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222
  

• Linux：打开终端输入以下命令后回车：

  google-chrome --remote-debugging-port=9222
  

2. 启动Vue应用 #

正常执行你的项目启动命令（比如npm run dev/npm run serve），确认应用正常运行在localhost:8080，在刚才启动的Chrome窗口访问该地址即可正常打开你的Vue应用。

3. 配置VS Code调试参数 #

在项目根目录的.vscode/launch.json文件中，调整attach模式的配置如下：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "attach",
      "name": "Attach to Vue App",
      "port": 9222,
      "urlFilter": "http://localhost:8080/*",
      "webRoot": "${workspaceFolder}/src"
    }
  ]
}

配置说明：

• port需要和你刚才设置的Chrome远程调试端口保持一致
• urlFilter用于精准匹配你的Vue应用页面，避免绑定到其他Chrome标签页
• 如果是Vite搭建的项目，可以将webRoot改为${workspaceFolder}，避免断点映射失效

4. 启动调试 #

确保Chrome已经打开了localhost:8080的应用页面，切换到VS Code的调试面板，选择刚才配置的「Attach to Vue App」选项，点击启动按钮即可完成绑定，代码中打的断点可以正常命中。

内容的提问来源于stack exchange，提问作者Łukasz