简介

介绍VSCode用户在浏览器中如何调试Vue项目代码

下载vscode扩展插件

应用商店中搜索： [Deprecated] Debugger for Chrome，下载不了可能需要翻墙，可以找我要下载好的扩展插件

配置

点击在Debugger图标看到Debug视图，然后点击那个齿轮图标来配置一个 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}/*"
      }
    },
  ]
}

开始调试

运行vue项目，点击要调试的代码，选中行数旁边的位置，会出现小红点;设置好断点之后就可以启动（绿色的图标）；这时候会自动启动一个google浏览器的窗口，操作窗口对应的打断点位置，就会命中断点；这个时候就可以再vscode调试代码了