VScode配置项目debugging 以及遇到的启动问题

千层土拨鼠

2023-03-02 827 阅读1分钟

默认配置流程：

1.下载调试插件，node / browser调试工具：`@id:ms-vscode.js-debug-nightly`

截屏2023-03-02 11.11.34.png

2.初次设置项目调试，点击创建launch.json文件：

截屏2023-03-02 11.08.23.png

3.选择项目对应工作区，再选择对应的调试器：

截屏2023-03-02 11.13.15.png

4.生成对应调试器默认设置的launch.json文件，到这里一切正常：

   {
       "version": "0.2.0",
       "configurations": [{
           "type": "chrome",
           "request": "launch",
           "name": "Launch chrome against localhost",
           "url": "http://localhost:8080",
           "webRoot": "${workspaceFolder}",
       }]
   }

手动修改调试信息

1. 开启服务器

项目的服务器指令启动：如使用vite或三方插件lite-server：
使用VScode的live server插件启动：
1. 下载此插件
2. 项目右下角点击GO Live启动

2. 根据开启的服务器ip修改默认的launch.json文件中的`url`，如下:

截屏2023-03-02 11.36.02.png

  "url": "http://localhost:5500",

3. 准备就绪，运行调试：

截屏2023-03-02 11.37.47.png

问题：

蹦出来类似的信息说吧啦吧啦undefined

解决步骤：

ctrl+shift+p打开指令
输入 setting.json，选择首选项：打开用户设置：
找到 "debug.javascript.defaultRuntimeExecutable"属性，没有自己添加上
在这个对象属性中添加上 "pwa-chrome": "chrome"；如果是用edge或者node失败，就对应添加"pwa-msedge": "edge"或"pwa-node": "node"；让调试工具默认识别执行程序
在launch.json中添加"runtimeExecutable":"stable":
再次运行调试。成功识别并运行