VSCode如何设置Vue前端的debug调试

时间:2022-07-24
本文章向大家介绍VSCode如何设置Vue前端的debug调试，主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。

vscode在调试vue.代码时，如何进行debug?

1.安装Chrome Debug插件。

2.在launch.json中，将url修改成你前端项目的路径：

  1 {
  2   // Use IntelliSense to learn about possible attributes.
  3   // Hover to view descriptions of existing attributes.
  4   // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  5   "version": "0.2.0",
  6   "configurations": [
  7     {
  8       "type": "chrome",
  9       "request": "launch",
 10       "name": "Chrome 调试",
 11       "url": "http://localhost:8090/#/login",
 12       "webRoot": "${workspaceFolder}/src",
 13       "breakOnLoad": false,
 14       "sourceMapPathOverrides": {
 15         "webpack:///src/*": "${webRoot}/*"
 16       }
 17     }
 18   ]
 19 }

3.vue-cli2版本的，修改config/index.js中配置：

完成以上配置，重启项目，打上断点即可。

随机文章
Javascript知识点必读
最近更新