5年前端刚会用vscode debug vue项目转载

说真的，做了5年前端我也换过几家公司

我发现我的前端同事都不会debug，都是用的console.log，那我也不学

这里说的是在vscode里debug，不是代码里写debugger后用浏览器调试

反正console也能勉强用

反正前端大多时候也不怎么写复杂的业务逻辑

就算写那我就多console几下，到时候一起删了好了

就这样，我console了5年。。。

期间中途也有忍不住的时候，但是我还是忍了。

直到今天，又接手到这种代码，然后又是在一个加班的夜里，我忍不了了，死活我都要学会用vscode调试vue项目。

debug有那么方便吗

这么说吧，100个后端开发，100个都必须会debug，连项目启动都规定只能用debug模式启动，方便调试。

因为业务逻辑复杂的地方，你不debug，就不知道代码的走向，去到哪个作用域你都不知道，你一个个console，每个作用域都写一遍吗，然后去比对先执行的哪个console?

正片开始

灰常简单，3步搞定

1. 开启sourcemap

vue.config.js文件中，添加如下配置:

 
js
代码解读
复制代码

configureWebpack: {
   devtool: process.env.NODE_ENV !== "production" ? "source-map" : '',
 }

原理：暴露未编译前的目录结构，使程序能够精确定位代码断点位置（大概这个意思）

2.启动项目记录下访问端口

3.新建debug配置

 
js
代码解读
复制代码

{
  // 使用 IntelliSense 了解相关属性。
  // 悬停以查看现有属性的描述。
  // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch Edge",
      "request": "launch",
      "type": "msedge",
      "url": "http://localhost:8081",
      "webRoot": "${workspaceFolder}",
      "sourceMapPathOverrides": {
        "webpack:///src/*": "${workspaceFolder}/src/*"
      }
    }
  ]
}