VSCode调试vue项目

Posted 2023-04-23

参考技术A

先决条件

你必须安装好 Chrome 和 VS Code。同时请确保自己在 VS Code 中安装了 Debugger for Chrome 扩展的最新版本。

在可以从 VS Code 调试你的 Vue 组件之前，你需要更新 webpack 配置以构建 source map。做了这件事之后，我们的调试器就有机会将一个被压缩的文件中的代码对应回其源文件相应的位置。这会确保你可以在一个应用中调试，即便你的资源已经被 webpack 优化过了也没关系。

打开 config/index.js 并找到 devtool 属性。将其更新为：

如果使用 vue-cli3 你需要设置 vue.config.js 内的 devtool 属性：

进入Debugger视图，添加Chrome配置，将内容替换成以下内容

设置断点

此处response返回数据

启动调试

在终端使用如下命令开启这个应用

进入Debug视图，选择‘vuejs:chrome’配置，然后按F5或点击绿色的play按钮

随着一个新的 Chrome 实例打开 http://localhost:8080，你的断点现在应该被命中了。

总结vscode调试vue,nodejs的各种方法

之前写项目一直都是console.log()来调试的，浪费了很多时间，现在整理一下用vscode对nuxt(vue)前后端进行调试的方法

前端的调试

chrome+launch

使用chrome调试，模式为launch。不多说，直接上图





当执行到到的位置就会出现

chrome+attach

使用chrome调试，模式为attach,跟launch的区别是不会打开新的浏览器窗口


然后启动调试，之后马上切换到chrome，让vscode的调试程序可以“粘上”到你的项目

chrome自带

使用chrome自带的调试，在代码中加入debugger关键字即可

后端调试

node+attach

与上面前端的attach方法几乎一样，区别是chorme换成了node，只贴几个重要的图

debugger和编辑器打的小红点都是可以触发的

优点是基本不怎么用配置，缺点是每次启动都要attach一下

node直接启动

后面几种都是直接launch的方法，第一种为node直接启动的方法，如图

然后修改launch.json文件吧下面位置的路径改成你的项目启动入口

然后需要在后面加上,"console": "integratedTerminal",如果不加的话启动调试的时候看不见打包进度。而且，需要自动重启的话要再加上"runtimeExecutable": "nodemon",当然，前提是装了nodemon

这种方法适合不需要编译就可以直接运行的项目，而且需要知道入口文件的位置，不适合typescript项目。

npm脚本调试

添加配置的时候选择通过npm启动，如图

修改配置，其中端口号随意，并非项目的端口号

再修改pakage.json,添加--inspect，注意这个参数需要放在入口文件之前，否则会提示连不上端口的错误。

针对typescript

除了下面两种方法，使用前面的attach方法也是可以的，配置非常简单，推荐使用。

• 1. Tsconfig.json中添加或设置"sourceMap": true

  2. 创建launch.json，如果根目录下有tsconfig.json，vscode会生成如图的代码

     

  3. 然后command+shift+p查找task，或者在首选项设置里面找，点击配置task
     
     拉到最下面，找到构建的那几项，如果有tsconfig.build.json一般就选这个，没有就选tsconfig.json
     
     修改tas.json文件
     
     修改launch.json文件
     
     
     执行结果
     

• 针对typescript第二种方法

  这里主要参考https://segmentfault.com/a/1190000011935122。

  直接使用ts-node,和直接使用node调试js项目类似。

  1. 安装ts-node,npm i ts-node

  2. 创建launch.json，选择node，上面有这里不再赘述。

  3. 修改launch.json如图

     
     其中args表示ts-node后面的参数，这里只填了当前文件
     program选择ts-node的启动文件

  4. 切换到项目入口文件，直接启动调试。

     

  这种方法优点是不需要自行编译ts文件，缺点是要多装一个包，需要知道入口文件位置,而且不能热启动

总结

上面的方法基本覆盖了js项目大部分的比较常用的调试方法，而且本人全部测试过。前端的调试有chrome这个神器，非常简单，后端使用vscode的attach的方法基本可以应付所有的框架项目。