VSCode使React Vue代码调试变得更爽

目录
  • 引言
  • 用 VSCode 调试 React 代码
  • 用 VSCode 调试 Vue 代码
  • 总结

引言

作为前端开发，基本每天都要调试 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使React Vue代码调试变得更爽的详细内容，更多关于VSCode调试React Vue的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • VSCode Vue开发推荐插件和VSCode快捷键(小结)

    首先这几个是VSCode推荐Vue开发必备的插件 Vetur -- 语法高亮.智能感知.Emmet等 包含格式化功能, Alt+Shift+F (格式化全文),Ctrl+K Ctrl+F(格式化选中代码,两个Ctrl需要同时按着) EsLint -- 语法纠错 Debugger for Chrome -- 映射vscode上的断点到chrome上,方便调试(配置有点麻烦,其实我没用这个) Auto Close Tag -- 自动闭合HTML/XML标签 Auto Rename Tag -- 自动

  • 教你使用vscode 搭建react-native开发环境

    教你使用vscode 搭建react-native开发环境

    问题 代码没有提示: 许多刚接触RN开发的非前端同学,都会问"哪个编辑器有智能提示?"...而对于前端同学来说,现在的日子已经好很多了,要什么自行车. 低级代码错误: 这里的错误是指类似拼写错误,符号错误等.写完代码,跑起来各种报错,有时候费死劲的找,最后发现是个中文的分号问题. 解决办法 可选的方案大概有: 使用typescript: 直接使用有静态类型支持的js版本,but要再学习一套语法,而且我的代码都是ts写的,但很多好的公共库不是啊. 使用flow: 由于网络的原因,这个环境

  • React-vscode使用jsx语法的问题及解决方法

    React-vscode使用jsx语法的问题及解决方法

    问题描述 安装了插件ES7 React/Redux/GraphQL/React-Native snippets还是不能完全支持 所以我参考了博客,得出了我的解法 解决方法 打开设置 搜索includeLanguages 搜索的结果如下(这个wxml是我之前设置的微信wxml作为html支持emmet语法) 点击添加项javascript:javascriptreact 填写这个项,就可以了,你会发现 他在上面写出来了"javascript":"javascriptreact&

  • Vue环境搭建+VSCode+Win10的详细教程

    一.安装Node.js(js的运行环境) 1.在Node.js官网https://nodejs.org/en/download/ 下载安装包. 2.下载后进行安装. 3.打开命令行,输入node -v可以查看到版本号.输入npm –v可看到npm版本号. 新版的Node.js已自带npm(类似.net中的nuget包管理器),安装Node.js时会一起安装.(将来要更新npm可用这个命令npm intall npm@latest -g) 4.在我的win10系统中可以看到环境变量也已经自动配置好

  • 使用VScode 插件debugger for chrome 调试react源码的方法

    代码调试,是我们前端日常工作中不可或缺的能力了吧! 在面向dom开发的时代,我们开发时直接在chrome里打断点是很方便的. 但是,当我们面向组件开发时(react),浏览器拿到的是我们编译过后的代码,还想在浏览器里打断点几乎是不可能的了. 场景 那怎么办,方法总是比困难多!愚蠢的我想到了console/debugger!!一直在使用,虽然很不方便(打印太多实在太乱!上线还要配置删除掉),但是我竟然使用了很久(这真是一个糟糕的编码习惯吧).直到今天,我想研究一下react源码,需要断点的地方有很

  • 搭建vscode+vue环境的详细教程

    一.安装vue.js 1.简介 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合.另一方面,Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用. Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. Vue.js是一个MVVM模式的框架,如果读者有angul

  • VSCode使React Vue代码调试变得更爽

    VSCode使React Vue代码调试变得更爽

    目录 引言 用 VSCode 调试 React 代码 用 VSCode 调试 Vue 代码 总结 引言 作为前端开发,基本每天都要调试 Vue/React 代码,不知道大家都是怎么调试的,但我猜大概有这么几种: 不调试,直接看代码找问题 console.log 打印日志 用 Chrome Devtools 的 debugger 来调试 用 VSCode 的 debugger 来调试 不同的调试方式效率和体验是不一样的,我现在基本都是用 VSCode debugger 来调试,效率又高.体验又爽.

  • vscode下的vue文件格式化问题

    我相信基本上每一个在vscode上面码Vue代码的都会下载Vetur插件用来格式化等操作,今天Vetur更新了 0.14.2 版本,最近在使用的时候,感觉格式化总是出问题,去Vetur上面看了下,发现Vetur的配置做了下面的改动,看到几个社区都没有人说明,我就先说下,默认的格式化配置是: { "vetur.format.defaultFormatter.html": "prettyhtml", "vetur.format.defaultFormatter

  • 详解vscode中vue代码颜色插件

    vue提示插件[Vscode] 编者寄语:vscode的确是前端开发中很好的工具,安装颜色插件,从视觉上是美的享受.曾经的我遇到了vscode代码全是灰色,黑色的困惑,后来整理找到方法,整理这篇,以下高亮插件,建议大家都安装了. 在VSCode Marketplace 搜素Vue 出现关于语法高亮的插件有 vue,vue-beautify,vue-color,VueHelper,vertur等等.比较了下载数量可以了解到,vetur 是目前比较好的语法高亮插件,我们来安装一下吧. vscode提

  • vscode入门教程之页面启动与代码调试

    初次使用vscode时各种不适应,所有需要用到的功能貌似都需要单独安装插件才能用.这让很多初次使用vscode的朋友有点无所适从. 下面本人就带各位朋友学习下如何使用vscode来进行最基本的工作--页面启动与代码调试 一.安装vscode(已经安装的朋友忽略,直接进行第二步) 官网下载地址:https://code.visualstudio.com/docs/?dv=win 稍等几秒钟,会自动弹出下载框 二.安装中文插件 vscode默认是英文菜单,想以中文形式来显示的朋友可以搜索插件[Chi

  • CodeMirror实现代码对比功能(插件react vue)

    CodeMirror实现代码对比功能(插件react vue)

    目录 1.第一步:下载插件 2.vue代码如下: 3.react hooks代码如下: 4.一点心得 要实现一个需求:一个代码编辑器,用户上次写的代码和现在的代码要区分出不同.网上找了几个案例,拿过去一用差点气吐血,报错像雪花一样,浪费时间! 本文中的代码,一键粘贴拿来即用,代码就是我在写这篇文章时写的demo,绝无报错. 1.第一步:下载插件 vue或者react都需要这一步且同样的下载方式. npm install diff-match-patch save npm install code

  • 如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)

    1.导语 首先来简单介绍一下webpack:现代 JavaScript 应用程序的 静态模块打包工具 .当 webpack 处理应用程序时,它会在内部构建一个会映射项目所需的每个模块 的依赖图(dependency graph),并生成一个或多个 bundle .webpack4.0出现之后,我们可以不用再引入一个配置文件来打包项目,并且它仍然有着很高的可配置性,可以很好满足我们的需求. 在开始正文之前,首先先来看看我们要实现的成果: 支持ES6+JQuery+Less/Scss的单页/多页脚手

  • Vue程序调试的方法

    1.写本文的背景 因为程序的调试非常重要,程序猿可以利用好的调试方法去查找定位自己的问题所在之处.从而,达到纠正自己程序错误的地方,健壮自己的程序,让问题变得越来越少,程序变得越来越健康.故作此文,而且日后会将实用的调试程序方法不断进行迭代更新. 2.调试与测试 调式与测试实际有异曲同工之妙,只不过对象不同.测试面向的是产品级,系统级:而调试往往是程序里的某一部分,某个方法,某个属性或者对象.最终效果也很类似,好的测试人员,测试方案可以将产品系统的问题解决在摇篮中:好的调试方法也会让你对程序的运

  • Vscode Remote Development远程开发调试的实现思路

    简介 对我而言 直接修改.调试服务器代码,当然可以安装插件,包括代码补全等等,和使用本地vscode一样的体验. 直接编辑.修改服务器的文件,使用 code filename.即可 配置 服务端安装ssh-server 一般都自带了.建议 使用ssh localhost命令,生成下.ssh目录. 方便配置密钥登陆,替代繁琐的密码登陆. 客户端 安装插件,Remote Development. 安装插件,Remote SSH 配置 一定要修改默认的配置文件.我的是:D:\zk.ssh\config

  • VSCode搭建React Native环境

    安装 React Native Tools 在插件市场搜索 react 找到 React Native Tools 进行安装: 创建的react-native的工程拖入vscode中 点击F5即可运行react-native 此时可能出现 如下界面,这是因为没有配置运行文件 在debug 页面,点击如下位置,添加configurations 然后点击添加配置,选择debug android 此时点击F5,则可出现如下界面,表示 react-native以运行起来 此时发现断点无法生效,且log的

随机推荐