5年前端刚会用VsCode Debug Vue项目

最新推荐文章于 2025-06-10 23:00:08 发布

前端瓶子君

最新推荐文章于 2025-06-10 23:00:08 发布

阅读量94

点赞数

文章标签：前端 vscode vue.js ide 编辑器

原文链接：https://mp.weixin.qq.com/s?__biz=MzUzNjk5MTE1OQ==&mid=2247523482&idx=1&sn=7abd21e57817970c3d2ff309d80a61f5&chksm=fbd44b77d6dd734e750f17886320fc74a3119340ee3c317b5a3c3ee1c1939b9ceba420f78923&scene=126&sessionid=0

版权

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

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

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

反正console也能勉强用

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

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

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

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

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

image.png

debug有那么方便吗

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

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

正片开始

灰常简单，3步搞定

1. 开启sourcemap

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

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

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

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

image.png

3.新建debug配置

image.png

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