假设项目的 package.json 有一个用来调试的 debug 脚本:
我们要怎么启动项目的跟踪调试呢?
文档指路 ➡️ 【Node.js 调试入门】 、 【VSCode 中的 Node.js 调试】 、 【Launch 对 npm 及其他工具的配置支持】
VS Code 支持两种核心调试模式 Launch 和 Attach ,Launch 方式是直接以 debug 模式启动应用,并为我们自动添加一个调试器;而 Attach 方式则是将 VSCode 调试器连接到已经运行中的应用程序或进程。我们这里用的是 Launch 方式。
在终端运行:
或点击VSCode 的小甲虫图标:
上面蓝色位置圈错了,应该是第一个 Node.js。
VSCode 十分智能,预设了很多针对不同需求的启动配置:
让我们来做进一步的修改:
之前那个启动配置项可以删除,留下这个需要的即可。
我们将 console 属性 设置为外部终端,我们启动调试时 VScode 就会自动打开下图中对应的终端(根据操作系统)。可以根据个人使用习惯,自定义用什么终端 (比如我在 VSCode 设置的 Terminal › External: Osx Exec,从默认的改为了 iTerm2)。
别忘了先把我们的脚本加上端口
首先,在需要调试的地方打好断点 如上图,点击左侧的行数,158行就可以打上断点了 点击 vscode 左侧的debug窗口,如果你之前没有配置过 launch.json 文件,那么现实效果就会如下图一样。 点击左上方,【没有配置】,添加配置 VSCode本身就内置了Node.js的调试工具,如果将来你需要调试别的东西,可以在这里选择添加对应的调试插件工具。 这里我们调试的是Node.js,就选择Node.js,然后VSCode会在 /.vscode 目录中新建一个 launch.json 文件launch.json 文件新建好后,我们需要进行一些配置操作,这里我们选择的是,附加到进程。 后面我们是先启动egg的调试进程,然后再将vscode附加到进程中的。 这里有一个很关键的节点, program 这个属性写的就是你需要调试的js文件,我这边调试的是刚才打上断点的文件 pledges.js使用 iterm 进入到工程目录,开启调试模式 在VSCode中选择 Attach to Process ,并且选择egg-cluster这个进程。 等请求进入到刚才打断点的地方,VSCode就会自己跳转到调试点啦,然后就可以尽情调试啦~ BTW,如果你有更好,更简单的调试方式请告诉我...
先决条件
你必须安装好 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,你的断点现在应该被命中了。