1.音序器要想做好，工欲善其事必先利其器。作为一名资深程序员，相信一定有一款调试神器陪伴在你身边，帮助你快速发现问题，解决问题。作为一名前端开发者，我还很年轻，也喜欢鼓捣一些东西。带着文章的标题想问一个问题：你现在前端是怎么调试的？哈哈，我也大胆猜测一下，可能有以下几种：不调试，直接看代码发现问题console.log打印日志使用ChromeDevtools的调试器调试使用VSCode的调试器调试上面方法相信大家都用过，不同的调试方法效率和体验是不一样的。我现在基本都是用VSCode调试器来调试，效率很高，体验很好。今天给大家介绍一下如何使用VSCode调试网页。2.实践还是基于之前的小demo。首先，我们需要在项目根路径下添加一个.vscode/launch.json配置文件。内容如下：{"configurations":[{"name":"Launch","request":"launch","type":"pwa-chrome","url":"http://localhost:8080","webRoot":"${workspaceFolder}","sourceMapPathOverrides":{"villiam://src/*":"${workspaceFolder}/src/*"}}]}创建调试配置，类型为chrome，指定debugurl为开发服务器地址。因为vue我们写的文件是SFC（单文件组件）格式的，所以需要vue-loader将它们分到不同的文件中，所以路径必须单独映射到对应源码位置。所以需要在调试配置中添加一个sourceMapPathOverrides："sourceMapPathOverrides":{"villiam://src/*":"${workspaceFolder}/src/*"}那么这里的值是怎么来的呢？首先，workspaceRoot是vscode提供的环境变量，是项目的根路径。这样映射之后地址不就变成本地文件了吗？然后本地文件中的断点就会生效。左边的键值是怎么来的？事实上，这个路径是可以配置的。这其实就是webpack生成sourcemap时的文件路径。可以通过output.devtoolModuleFilenameTemplate进行配置：上面的configureWebpack:{output:{devtoolModuleFilenameTemplate:'villiam://[resource-path]'}}其实我们已经完成了所有的调试配置。接下来，让我们一起见证奇迹。开始：先打开浏览器：点击按钮后，进入断点：无论你是想调试Vue业务代码，还是想看Vue源码，体验都会很爽。3.总结今天给大家分享的是一个调试小技巧，方便我们发现问题，定位问题。我希望能提高你的工作效率。其实React的调试比较简单，加个chrome类型的debugg配置就行了，而Vue的调试比较麻烦，需要路径映射。有兴趣的可以去浪一波。欢迎关注
