作者：世界哪有真情

https://juejin.cn/post/7446578471901872180

说真的，做了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文件中，添加如下配置:

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

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

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

3.新建debug配置

{
  // 使用 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/*"
      }
    }
  ]
}

切记，要用debug这里启动后弹出的浏览器窗口进行操作调试，这是个单独的浏览器窗口

调试操作

在上述通过debug打开的浏览器中操作你的项目

需要在哪调试就在哪打断点

断点有普通断点和条件断点（用于比如循环操作时 当变量为什么条件时激活断点，避免一次一次点断点执行循环）

当执行到你打端点的代码时，程序就会暂停，并且输出当前执行状态的所有信息了

大家看图应该都能看懂，我就不多说了，下面主要讲一下断点的操作

​

 用于从当前断点跳到下一个断点（没有下一个断点程序就执行结束）

一行一行的往下执行

执行到方法时，点击第一个会进入方法里面去，点击第二个会退出方法栈

最后当你关闭通过调试打开的浏览器窗口时，vscode里的调试也就结束了。

总结

这样比console方便多了吧，点一下就知道这行程序的前后所有变量的状态以及接下来的走动

也许这些东西很简单很基础，但是也总有人不会的，那就存在分享的意义