vue代码大全（vue 代码调试神器）

一  
  
  
  
  
  
  
  
  
 、序

工欲善其事                  ，必先利其器  
  
  
  
  
  
  
  
  
 。作为一名资深程序员 
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  ，相信必有一款调试神器相伴左右

















，帮助你快速发现问题
  
  
  
  
  
  
  
  
  
，解决问题 
  
  
  
  
  
  
  
  
 。作为前端开发 
  
  
  
  
  
  
  
  
 ，我还很年轻 


 


 


 


 


 


 


 


 


 ，也喜欢去捣鼓一些东西
 
 
 
 
 
 
 
 
 
，借着文章的标题  
   
   
   
   
   
   
   
   
 ，先提一个问题：大家目前是怎么调试前端？哈哈 

 

 

 

 

 

 

 

 

 ，我也大胆的猜测下

 

 

 

 

 

 

 

 

 
，可能有这么几种：

不调试                  ，直接看代码找问题

console.log 打印日志

用 Chrome Devtools 的 debugger 来调试

用 VSCode 的 debugger 来调试

以上方式我相信大家基本都用过 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 ，不同的调试方式效率和体验是不一样的


















，我现在基本都是用 VSCode debugger 来调试                           ，效率又高 
  
  
  
  
  
  
  
  
 、体验又爽


 


 


 


 


 


 


 


 


 
。

今天我就来介绍下怎么用 VSCode调试网页 
 
 
 
 
 
 
 
 
。

二


 


 


 


 


 


 


 


 


 
、实践

还是以之前的小demo来做演示 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 ，首先我们需要在项目根路径下添加一个

.vscode/launch.json

的配置文件



























，其内容如下：

{

"configurations": [

{

"name": "Launch",

"request": "launch",

"type": "pwa-chrome",

"url": "http://localhost:8080",

"webRoot": "${workspaceFolder}",

"sourceMapPathOverrides": {

"villiam://src/": "${workspaceFolder}/src/"

}

}

]

}

创建了一个调试配置                  ，类型是 chrome 
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  ，并指定调试的 url 是开发服务器的地址  
   
   
   
   
   
   
   
   
  。

因为 Vue 我们写的是 SFC（single file component） 格式的文件

















，需要 vue-loader 来把它们分成不同的文件
  
  
  
  
  
  
  
  
  
，所以路径单独映射一下 
  
  
  
  
  
  
  
  
 ，才能对应到源码位置

 

 

 

 

 

 

 

 

 
。

所以调试配置里需要加个

sourceMapPathOverrides：

"sourceMapPathOverrides": {

"villiam://src/": "${workspaceFolder}/src/"

}

那么这里面的值是怎么来的呢？首先workspaceRoot 是 vscode 提供的环境变量 


 


 


 


 


 


 


 


 


 ，就是项目的跟路径
 
 
 
 
 
 
 
 
 
，这样一映射之后  
   
   
   
   
   
   
   
   
 ，地址不就变成本地的文件了么？那么在本地文件中打断点就能生效了
 

 

 

 

 

 

 

 

 
。那左边的key值是怎么来的呢？其实这个路径是可以配置的 

 

 

 

 

 

 

 

 

 ，这其实就是 webpack 生成 sourcemap 的时候的文件路径

 

 

 

 

 

 

 

 

 
，可以通过 output.devtoolModuleFilenameTemplate 来配置：

configureWebpack:{

output:{

devtoolModuleFilenameTemplate:villiam://[resource-path]

}

}

以上其实我们已经把调试的配置全部完成了                  ，接下来我们就一起来见证下奇迹～

启动：

会先打开浏览器：

点击按钮后 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 ，进入断点：

不管你是想调试 Vue 业务代码


















，还是想看 Vue 源码                           ，体验都会很爽的                   。

三 
 
 
 
 
 
 
 
 
、小结

今天给大家分享的是一个调试小技巧 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 ，方便我们查找定位问题用



























，希望在工作中提升你的效率
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
。

其实React 的调试相对简单                  ，只要添加一个 chrome 类型的 dubug 配置就行 
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  ，Vue 的调试要麻烦一些

















，要做一次路径映射

















。

有兴趣的可以走一波                            。

欢迎关注