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开发环境

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

  • 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 代码 用 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)

    目录 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的

随机推荐