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 的调试要麻烦一些，要做一次路径映射。

有兴趣的可以走一波。

欢迎关注

vue 代码调试神器相关推荐

python 如何边改代码边调试_Python 代码调试神器：PySnooper
给大家推荐本我自己写的电子书<PyCharm中文指南>,把各种 PyCharm 的高效的使用技巧用GIF动态图的形式展示出来.有兴趣的可以看它的在线文档: http://pycharm.i ...
JS And Vue代码调试——IDEA+JS+vue-devtools-dev+JetBrains IDE Support（Chrome插件）
JS代码调试--IDEA+JavaScript Debug+JetBrains IDE Support(Chrome插件) 问题描述解决方案解决步骤问题描述调试JavaScript代码,前端框 ...
PHP代码调试神器Whoops
1.传统的PHP代码调试全靠页面抛出的堆栈信息找出错误位置,效率低而且不直观但是自从安装了Whoops这个组件一切都变得很简单 2.首先确保自己的机器已经安装compose 3.然后在项目的根目录下 ...
【进阶篇】Vue Devtools——vue开发调试神器
工欲善其事,必先利其器,vue2.0进阶系列的知识更接近我们的实际开发所需,在开发过程中,有个好的调试工具是事半功倍的,Vue Devtools就是我们选择的调试工具,它是一款chrome浏览器的插件 ...
Vue调试神器vue-devtools - 插件下载安装
文章目录 Google如何安装调试Vue的神器`vue-devtools` ? 安装介绍: demo实例 - 演示代码: 相关文章链接: 1. https://github.com/vuejs/vue ...
多功能mac代码编辑神器coderunner 4 比Xcode都强大
coderunner 4是Mac平台上的一款轻量级多功能代码编辑神器.本站第一时间为大家带来 coderunner 全新升级版 coderunner 4,支持 23 种语言和.txt 文档制作,比Xc ...
Vue 项目调试总结
文章目录 1. 代码中写debugger 2. Vue.js devtools 3. VScode + Chrome 1. 代码中写debugger 如果是简单的代码调试,想看到的值很少,就直接使用原 ...
json.tojsonstring 导致cpu飙高_阿里调试神器立功了!进程导致Kubernetes节点CPU飙高的排查与解决...
来源:https://www.cnblogs.com/maxzhang1985/p/12673160.html 一.发现问题在一次系统上线后,我们发现某几个节点在长时间运行后会出现CPU持续飙升的问 ...
web移动端调试神器Eruda
在Web开发过程中,对html页面进行开发和调试的时候都会用到浏览器提供的调试工具,小编我最常用的就是Chrome浏览器自带的开发者工具了,可以很方便的对JS代码进行断点调试,log也很方便.但是在移 ...

vue 代码调试神器

vue 代码调试神器相关推荐

最新文章

热门文章