其他分享
首页 > 其他分享> > 使用Vscode调试vue代码

使用Vscode调试vue代码

作者:互联网

如何在 VS Code 中调试浏览器中运行的通过 Vue CLI 生成的 Vue.js 应用程序官网解释

先决条件
修改vscode配置

1、修改config/index.js

devtool: 'source-map', 
module.exports = {
  configureWebpack: {
    devtool: 'source-map'
  }
}

2、配置launch.json 的文件
点击在 Activity Bar 里的 Debugger 图标来到 Debug 视图,然后点击那个齿轮图标来配置一个 launch.json 的文件。
在这里插入图片描述将生成的 launch.json 的内容替换成为相应的配置:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "vuejs: chrome",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}/src",
      "breakOnLoad": true,
      "sourceMapPathOverrides": {
        "webpack:///src/*": "${webRoot}/*"
      }
    },
    {
      "type": "firefox",
      "request": "launch",
      "name": "vuejs: firefox",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}/src",
      "pathMappings": [{ "url": "webpack:///src/", "path": "${webRoot}/" }]
    }
  ]
}
断点调试

1、根据需要在程序中打上断点
2、打开终端,输入程序启动命令(此处使用yarn run dev)
在这里插入图片描述
3、在Debug中,点击运行按钮或按下F5开始调试
在这里插入图片描述
备注:
有时候调试工具连接不上程序,提示需要打开launch.json文件,点击确定即可。

标签:src,vue,launch,Vscode,devtool,js,webRoot,json,调试
来源: https://blog.csdn.net/Nie2014/article/details/118046923