VSCode Debug 记录

相关教程资料
Debug with VSCode
https://zhuanlan.zhihu.com/p/71928374
开始使用 VSCode 调试
https://zhuanlan.zhihu.com/p/43016278

具体操作及相关知识 上述两个链接已经有比较完备的描述 这里只记录个人遇到的问题

“request”: “attach” 模式下
无法connect设置的端口（默认9222）

相关设置

launch.json

{
  "version": "0.2.0",
  "configurations": [
    // 安装Code Runner插件
    // 运行当前JS代码片段
    {
      "type": "node",
      "request": "launch",
      "name": "Test",
      "skipFiles": ["<node_internals>/**"],
      "program": "${file}"
    },
    // 以下均为 create react-app 脚手架创建出的相关项目的配置
    {
      "type": "chrome",
      "request": "launch",
      // Debug模式下 下拉菜单可以选择的配置名
      "name": "Launch Chrome against localhost",
      // 项目端口
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}"
    },
    {
      "name": "Attach to Chrome",
      // attach模式下 remote debug占用的端口（可以自定义）
      "port": 9222,
      "request": "attach",
      "type": "chrome",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

Chrome快捷方式 右键→属性→目标
在【"】后添加【 --remote-debugging-port=9222】
- -remote前有空格
port可以自定义 与配置文件保持一致即可

这种配置下 如果直接通过VSCode（npm || yarn）启动项目 在有相关配置（脚手架默认配置 || 自己配置）的情况下 会直接打开一个Chrome新窗口（不经过配置的指定【 --remote-debugging-port=xxxx】端口指令）

解决方法：
通过配置了端口指令的快捷方式打开浏览器访问项目即可