- 所在位置：
- 首页 >
- 编程技术 >
- JavaScript >
- 用VSCode调试代码的操作是什么
用VSCode调试代码的操作是什么
Admin 2022-08-06 群英技术资讯 540 次浏览
这篇文章主要讲解了“用VSCode调试代码的操作是什么”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“用VSCode调试代码的操作是什么”吧！作为前端开发，基本每天都要调试 Vue/React 代码，不知道大家都是怎么调试的，但我猜大概有这么几种：
- 不调试，直接看代码找问题
- console.log 打印日志
- 用 Chrome Devtools 的 debugger 来调试
- 用 VSCode 的 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 代码，不管是调试业务代码，还是想看会源码都是很方便的。大家不妨试一下，会让调试这件事情变得很愉悦的。
到此这篇关于“用VSCode调试代码的操作是什么”的文章就介绍到这了,更多相关内容请搜索群英网络以前的文章或继续浏览下面的相关文章，希望大家以后多多支持群英网络！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。
猜你喜欢
-
前端状态管理的Redux怎么理解，状态管理的目的是什么
这篇文章主要介绍了前端的状态管理，续上篇文章内容，今天将从 Redux 入手逐渐拓展,需要的小伙伴可以参考一下哟
-
lastindexof()的主要用途是什么，用法是怎样
在javascript中，lastindexof()用于在数组中查找元素，可返回指定元素值在数组中最后出现的位置（下标值），语法“array.lastIndexOf(item,start)”；如果返回值为“-1”，则指定元素不存在数组中。
-
用react-native怎么制作滑动删除的操作
这篇文章主要介绍了react-native 实现购物车滑动删除效果的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
-
React用tsx怎么写一个生成验证码的功能
最近开发React 使用tsx编写，没有找到什么好的随机生成验证码的插件，自己就手撸了一个，废话不多话，直接上代码。
-
如何用jQuery实现鼠标经过隐藏与显示的动画
如何用jQuery实现鼠标经过隐藏与显示的动画？有不少朋友对此感兴趣，下面小编给大家整理和分享了相关知识和资料，易于大家学习和理解，有需要的朋友可以借鉴参考，下面我们一起来了解一下吧。
推荐内容
成为群英会员,开启智能安全云计算之旅
立即注册
Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008
