2.在config/development.config.js(官网描述的是config/index.js,所以需要根据具体的项目而定)中添加如下配置:
3.点击运行调试按钮,再点击设置按钮,修改launch.json文件,配置如下:
4.在vue项目的文件中设置断点
5.启动vue项目:
6.点击运行调试按钮,再点击运行小图标,这时会弹出新的chrome浏览器页面。
7.在弹出的浏览器窗口的页面进行操作,触发断点时会跳转掉vscode的断点处。
遇到的问题:
官网中的launch.json配置中"url": " http://localhost:8080 ",url的端口是8080,这样调试时浏览器页面显示“无法显示此网页”。这里需要改成自己本地起的服务的端口号。
参考:
在 VS Code 中调试: https://cn.vuejs.org/v2/cookbook/debugging-in-vscode.html
相当于直接使用 node 命令,用 npm run script 脚本 来启动 Node.js 程序是更为常见的场景,比如当目标是运行一个应用。
假设项目的 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)。
别忘了先把我们的脚本加上端口