vscode attach debug react win

这是配置文件

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "attach",
      "name": "Attach to Chrome",
      "port": 9222,
      "webRoot": "${workspaceFolder}/src",
      "url": "http://localhost:3000/"
    }
  ]
}

我干了啥

1. 启动react项目
2. 谷歌浏览器快捷方式目标那个选项末尾加上这个,注意和该输入框已经存在的文字之间加上空格

 --remote-debugging-port=9222

3. 打开谷歌浏览器的这个页面

   chrome://inspect/#devices
   找到 Devices 里面的

• Discover network targets Configure
  • 这行左侧是一个checkbox 默认应该是勾选的，没勾选你勾一下
  • 点击config 会弹出一个弹框 输入 localhost:9222 点击 Done

4. 然后启动任务管理器杀死你的谷歌浏览器进程，全部杀死，就是你打开任务管理器 --> 应用程序–>找到谷歌浏览器的图标那一栏右键转到进程–>跳转的页面右下角点击结束进程，就能把你的谷歌浏览器关闭完。

5. 然后双击你之前在桌面上配置过的谷歌浏览器的快捷方式

6. 之前启动的react项目的地址拷贝到浏览器地址栏，然后打开开发者工具

7. 此时视角切换到vscode 打开左侧的debug那个东西，因为配置选项只写了一个我们在debug侧边栏的上方点击那绿色的启动 进入调试，此时出现的debug操作悬浮栏的最后一个是一个小锁链的图标，代表着你已经连接上了谷歌浏览器，与此同时vscode的调试控制台 没有 要你安装react 开发者工具的信息，因为对比launch启动方式，他是开启了一个没有任何插件的谷歌浏览器，这就导致你要去配置，等你配置完，关了下次打开，好家伙，又是个白板。

8. 上述步骤完成了项目启动和vscode debug attach（附着） 谷歌浏览器模式 接着你回到react项目里面打上断点 刷新浏览器。谷歌浏览器就可以命中断点了

还有一些就是，你需要下载vscode的插件 Debugger for Chrome
重点是杀死谷歌浏览器进程，假设你开机选项和打开谷歌浏览器后是恢复上次页面。我才会有干扰，但是没有实验。
之前做了很多的方式包括快捷方式加上端口号之类的都失败了，都是基于谷歌浏览器已经打开的模式，你后面的配置可能都没生效

形而上学的思考，因为我的基础不好嘛
因为要连通，所以联通的要素先准备好
1. 谷歌浏览器的远程端口要打开
2. 快捷方式的远程端口配置上
- 在我看来上述两个代表你双击快捷方式是让打开的谷歌浏览器的远程端口是开着的
3. vscode 下载好插件 配置好启动端口
4. 项目地址要先打开不然debug不晓得找哪个地址栏，我看到人家可以选的的一个截图，我估计是你没配置目标运行url，vscode会弹出来
5. 谷歌浏览器的debug要打开
6. 最后要刷新一下竖线是确保你的已经打的断点能被vscode命中到谷歌浏览器上 假如你上述都做到了但是没有命中 请你保持当前状态，长按谷歌浏览器的刷新按钮会弹出三个选项你挑选最后一个清空环迅并硬性重新加载这个在vscode的更新当中有提到 vscode和Chrome debug的时候的时间以及时间执行没命中是因为你的js代码在加载的时候就执行完毕了因此断点也就没卵用了

附上参考链接
这个浏览即可
配置浏览器端口的
大佬这个是配置vue的