chrome+debugger调试vue

2020-07-12 821 阅读1分钟

环境准备

vscode
vscode上安装debugger for chrome插件
chrome浏览器

操作步骤

在vscode里打开自己的项目，点击vscode左侧调试，添加一个chrome配置。完成后项目根目录多出一个.vscode文件,里面有个launch.json是我们接下来需要用的
修改配置文件launch.json，如下

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}/src",
      "breakOnLoad": false, // 不需要启动调试时就命中断点，可以选择false来关闭
      "sourceMapPathOverrides": {
        // f12的source看到的路径是webpack:///src/views/Home.vue
        // 所以下面配置相当于webpack:///src/* 下所有目录与我们项目目录${workspaceFolder}/src/下所有文件做映射
        "webpack:///./*": "${webRoot}/*", 
        "webpack:///src/*": "${webRoot}/*", 
      }
    }
  ]
}

启动自己的vue项目
在vue项目里打上断点
点击vscode的调试，运行调试。运行后会打开新的浏览器窗口运行我们的项目，刷新一下页面，就会停留在我们的断点处，然后可以继续进行调试了