VSCode使ReactVue代码调试变得更爽
在前段开发中，大家会遇见调试 Vue/React 代码，现在就给大家总结都有哪几种：
先找代码问题，在console.log 打印日志，用 Chrome Devtools 的 debugger 来调试，用 VSCode 的 debugger 来调试。
看到是不是不同，不仅效率大大提升就连体验也是超级帮的，这种体验让人超级爽到爆炸。
很多人都好奇如何办到的?现在就为大家介绍VSCode 调试网页，下面听我讲述。
以下分别是 React 和 Vue 的：
用 VSCode 调试 React 代码
我用 create-react-app 创建了一个 demo 项目，有这样一个组件：
跑起来开发服务器：
浏览器显示的界面是这样的：
如何用 VSCode 调试它呢?
我们在根目录下添加一个 .vscode/launch.json 的配置文件：
创建了一个调试配置，类型是 chrome，并指定调试的 url 是开发服务器的地址。
在 react 代码里打两个断点：
然后点击运行：
看，XDM，它断住了!调用栈、当前环境的变量等都有。
释放断点，继续往下走。
点击的时候也能拿到对应的事件对象：
怎么样是不是便捷很多。
另外我还有一周是摸鱼看会 react 源码，那直接点击调用栈里的某一帧看就行：
比如渲染的时候会调用 renderWithHooks 方法，里面的 workInProgress 对象就是当前 fiber 节点，它的 memorizedState 属性就是 hooks 存放值的地方：
用 VSCode 来调试 React 代码之后，调试业务代码或者看源码的体验都很爽，有木有。
再来看下 Vue 的：
用 VSCode 调试 Vue 代码
Vue 的调试会相对会麻烦些，需要在上面的基础上额外对路径做一些映射。
因为 React 我们是直接写 jsx、tsx，它和编译之后的 js 文件一一对应，而 Vue 不是，Vue 我们写的是 SFC(single file component) 格式的文件，需要 vue-loader 来把它们分成不同的文件，所以路径多带带映射一下，才能对应到源码位置。
也就是调试配置里多了个 sourceMapPathOverrides：
那怎么映射呢?
可以在源码里随便加个 debugger，在浏览器里看下现在映射的路径是啥：
这里的 webpack://test-vue-debug/src/App.vue?11c4 就是要映射的路径，那映射到哪里呢?
很明显是映射到本地的路径，也就是这样：
workspaceRoot 是 vscode 提供的环境变量，就是项目的跟路径，这样一映射之后，地址不就变成本地的文件了么?那么在本地文件中打断点就能生效了：
看这里的路径，明显映射到项目下的文件了。
但是映射的时候后面还带了个 hash，这个 hash 是会变得，怎么办呢?
这个路径是可以配置的，这其实就是 webpack 生成 sourcemap 的时候的文件路径，可以通过 output.devtoolModuleFilenameTemplate 来配置：
可用的变量大家可以看文档，就不展开了(随便看一下就行)：
比如我把路径配成了这样：
那调试时的文件路径就是这样的：
前缀不用管，就看后面的部分，这不就去掉了 ?hash 了么
然后把它映射到本地文件：
这样就又映射上了，在 vscode 打的断点就生效了：
不管你是想调试 Vue 业务代码，还是想看 Vue 源码，体验都会很爽的。
总结
作为前端工程师，调试 Vue、React 代码是每天都要做的事情，不同的调试方式体验和效率都是不一样的。所以我想把我常用的 VSCode 调试网页的方式介绍给大家。
React 的调试相对简单，只要添加一个 chrome 类型的 dubug 配置就行，Vue 的调试要麻烦一些，要做一次路径映射，如果路径里有 hash，还要改下生成路径的配置，然后再映射(但也只需要配一次)。
用 VSCode 来调试 React/Vue 代码，不管是调试业务代码，还是想看会源码都是很方便的。大家不妨试一下，会让调试这件事情变得很愉悦的。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/127567.html
摘要：本文作者王仕军，商业转载请联系作者获得授权，非商业转载请注明出处。想知道我接下来会写些什么欢迎订阅我的掘金专栏或知乎专栏前端周刊让你在前端领域跟上时代的脚步。 showImg(https://segmentfault.com/img/remote/1460000009407536?w=592&h=314); 共 2127 字，读完需 4 分钟。我本周读到 1 篇比较有趣的文章叫做《Th...
摘要：自从年月份对外公布以来，已经经过了个月的迭代，期间发布了几十个正式版本，但一直没有到，因为我们觉得是个里程碑版本，我们必须做的足够完善才敢称之为。 自从17年11月份对外公布以来，KPC已经经过了8个月的迭代，期间发布了几十个正式版本，但一直没有到1.0，因为我们觉得1.0是个里程碑版本，我们必须做的足够完善才敢称之为1.0。而如今我们有信心对外宣布：KPC 1.0终于来了！ 其实距离...
摘要：个人感悟自己公司也有项目在用，学的难点在于，其他的话上手挺快的，而且是尤大写的，中文文档也很完整，很适合新手。 showImg(https://segmentfault.com/img/remote/1460000012922985?w=1000&h=958); 当红辣子鸡——vue 和去年一样，vue是js项目中点赞数增加最多的，我们可以看下图： showImg(https://se...
摘要：使用高亮类似的扩展更强大的高亮扩展，具有更多功能。为了检查和检查响应，使用了之类的工具。在这里获取这两个扩展自动闭合标记和自动重命名标记。类似的扩展显示提交历史的精美图表等等。 想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你！ Quokka.js Quokka.js 是一个用于 JavaScript 和 TypeScript 的实时运行代码平台。这意味着它会实时运行...
阅读 546·2023-03-27 18:33
阅读 731·2023-03-26 17:27
阅读 629·2023-03-26 17:14
阅读 590·2023-03-17 21:13
阅读 519·2023-03-17 08:28
阅读 1800·2023-02-27 22:32
阅读 1291·2023-02-27 22:27
阅读 2176·2023-01-20 08:28
