在 VS Code 中调试 — Vue项目之Chrome浏览器篇

第一步：安装扩展

在扩展市场中安装这个【Debugger for Chrome】扩展

第二部：修改【vue.config.js】配置文件

在【vue.config.js】配置文件中添加下方代码

const dev = process.env.NODE_ENV === 'development'

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

*注：需要判断环境，生产环境一般不设置该值（或者仅针对开发环境进行设置）。 

大概位置如下图示例：

第三部：设置调试相关配置

1、点击运行 > 添加配置 

2、选择弹出框内任意选项均可（等下需要将上图红框内的代码替换进去 ^ ^！）

 3、替换【launch.json】内代码

复制下方代码进行替换

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "开始调试",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}/src",
      "breakOnLoad": true,
      "sourceMapPathOverrides": {
        "webpack:///src/*": "${webRoot}/*"
      }
    }
  ]
}

替换完如下图示例：

第四部：开始调试

1、按下快捷键【F5（运行 > 启动调试）】进入调试模式

2、代码中的【console相关事件输出】将会显示在下方的【调试控制台】中

3、具体调试控制内容在上方红款内，鼠标悬停会有对应的快捷键显示

*注：调试前需要先启动开发环境的服务哦。 

希望小伙伴们都能掌握这项技能(#^.^#)

官方传送门：在 VS Code 中调试 — Vue项目