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

代码调试，是我们前端日常工作中不可或缺的能力了吧！

在面向dom开发的时代，我们开发时直接在chrome里打断点是很方便的。
但是，当我们面向组件开发时(react),浏览器拿到的是我们编译过后的代码，还想在浏览器里打断点几乎是不可能的了。

场景

那怎么办，方法总是比困难多！愚蠢的我想到了console/debugger！！一直在使用，虽然很不方便（打印太多实在太乱！上线还要配置删除掉），但是我竟然使用了很久（这真是一个糟糕的编码习惯吧）。直到今天，我想研究一下react源码，需要断点的地方有很多，不可能在手动console/debugger了！！我才想到我为什么不用浏览器debugger？

Debugger for Chrome

因为我使用的编译器是VS code，机智的我终于开窍了！找来了 Debugger for Chrome插件。

但是纯英文的文档不太友好，虽然我英语六级也是搞了很久才弄好，下面就介绍记录一下mac系统下的使用方法吧。完整文档需要可以自己看文档

1、加载插件

2、配置插件

点击小虫子；选择chrome；

然后点击小轮子，打开launch.json文件如下：

{
 // 使用 IntelliSense 了解相关属性。
 // 悬停以查看现有属性的描述。
 // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
 "version": "0.2.0",
 "configurations": [

  {
   "type": "chrome",
   "request": "launch", //launch / attach 两种方式；这里使用launch
   "name": "Launch Chrome against localhost",//开心的设置个名字
   "url": "http://localhost:9000",//项目地址
   "webRoot": "${workspaceFolder}/react-demo/"
   //这一块设置时要注意！webRoot指定网络服务器根目录的工作区绝对路径。
   ${workspaceFolder}应该时表示编辑器里的根目录，我的项目是react-demo，
   所以选择webRoot修改如上，具体路径还跟webpack配置的资源根目录也有关系

  }
  //还有很多可以配置的属性，可以通过上面文档查看
 ]
}

3、开始调试

点击小按钮，就开始调试模式了；像下面就能在我们的源代码打断点；

开始调试后，多出来一个小窗，可以控制断点走向，以及结束暂停、调试。下方会显示断点列表。

同时，会为我们打开我们配置的url页面；

还可以看到调用堆栈，和打印台，可以说十分方便

OK到这里我们的react调试配置已经可以使用了，不用在手动写debug了！可以开始愉快的搬砖了

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • VSCode配置react开发环境的步骤

    vscode 默认配置对于 react 的 JSX 语法不友好,体现在使用自动格式化或者粘贴后默认缩进错误,尽管可以通过改变 language mode 缓解错误,但更改 language mode 后的格式化依然不够理想. 通过搭配使用 ESLint和 Prettier插件可以实现在 vscode 中完美支持 JSX 语法. 编辑器安装插件 在 vscode 中需要安装下面插件: ESLint Prettier 项目中的配置 配置ESLint 基础配置 项目中安装 babel-eslint ,

  • VSCode 配置React Native开发环境的方法

    VSCode 配置React Native开发环境的方法

    本文介绍了VSCode 配置React Native开发环境的方法,分享给大家,具体如下: 1.安装VSCode 2.安装插件 按F1 并输入 ext install 并回车, 或者使用 输入react-native安装React Native Tools 假定你已经在设备上安装了react native, 如果没有安装,请使用npm install -g react-native-cli安装 或者按照官方文档操作 新建一个RN工程 并使用VSCode打开 安装完成后 按F1可以看到命令里多了很

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

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

  • React 源码调试方式

    React 源码调试方式

    目录 正文 断点调试 搜索定位 Chrome Devtools 调试 sourcemap npm 下载react包 插件注释 调试 React 最初源码 关联 react 源码项目 总结 正文 什么?调试 React 源码还有优雅和不优雅之分? 别着急,我们先来听个故事: 东东是一名前端工程师,主要用 React 技术栈,用了多年之后想深入一下,所以最近开始看 React 源码. 断点调试 他把 react 和 react-dom 包下载了下来,在项目里引入,开发服务跑起来后,打开 Chrome

  • vscode调试gstreamer源码的详细流程

    目录 1. 安装vscode插件 2. 配置文件修改 2.1 自定义c_cpp_properties.json 2.2 自定义tasks.json文件 2.3 Debug 3. Makefile环境下 4. Python调试 5. 调试gstreamer源码 下载gstreamer源码 编译源码 修改Makefile 输入断点 总结 1. 安装vscode插件 C/C++ C/C++ Extension 2. 配置文件修改 vscode中每个项目都有一套配置文件集合,位于.vscode目录下,其

  • react源码层探究setState作用

    react源码层探究setState作用

    目录 前言 为什么setState看起来是异步的 从first paint开始 触发组件更新 更新渲染fiber tree 写在最后 前言 在深究 React 的 setState 原理的时候,我们先要考虑一个问题:setState 是异步的吗? 首先以 class component 为例,请看下述代码(demo-0) class App extends React.Component { state = { count: 0 } handleCountClick = () => { this

  • react源码合成事件深入解析

    目录 引言 导火线 事件委托 合成事件特点 React 事件系统 事件注册 enqueuePutListener() listenTo() trapCapturedEvent 与 trapBubbledEvent 事件存储 事件分发 事件执行 构造合成事件 批处理 引言 温馨提示: 下边是对React合成事件的源码阅读,全文有点长,但是!如果你真的想知道这不为人知的背后内幕,那一定要耐心看下去! 最近在做一个功能,然后不小心踩到了 React 合成事件 的坑,好奇心的驱使,去看了 React 官

  • 解决调试JDK源码时,不能查看变量的值问题

    前几天本来想以debug模式看一下JDK的源码,进入调试模式时才发现,根本看不到方法里面变量值的情况.为什么呢?JDK现在的版本中,编译过后,去除了里面的调试信息.解决办法是,编译那些类,使其带有调试信息,使用命令:javac -g 查看了一些相关资料,现将解决方法放到下面 1.在d:\的根目录下创建jdk7_src和jdk_debug目录. 2.在JDK_HOME目录下找到src.zip文件,并把它里面的文件解压到jdk7_src目录下,然后在解压后的目录中删除除了java.javax.org

  • 详细聊聊React源码中的位运算技巧

    目录 前言 几个常用位运算 按位与(&) 按位或(|) 按位非(-) 标记状态 优先级计算 总结 前言 这两年有不少朋友和我吐槽React源码,比如: 调度器为什么用小顶堆这种数据结构,直接用数组不行? 源码里各种单向链表.环状链表,直接用数组不行? 源码里各种位运算,有必要么? 作为业务依赖的框架,为了提升一点点运行时性能,React从不吝惜将源码写的很复杂. 在涉及状态.标记位.优先级操作的地方大量使用了位运算. 本文会讲解其中比较有代表性的部分.学到之后,当遇到类似场景时露一手,你就是业务

  • react 源码中位运算符的使用详解

    位运算符基本使用 按位与(&):a & b对于每一个比特位,两个操作数都为 1 时, 结果为 1, 否则为 0 按位或(|):a | b对于每一个比特位,两个操作数都为 0 时, 结果为 0, 否则为 1 按位异或(^):a ^ b对于每一个比特位,两个操作数相同时, 结果为 1, 否则为 0 按位非(~):~ a反转操作数的比特位, 即 0 变成 1, 1 变成 0 0000 0000 0000 0000 0000 0000 0000 0011 -> 3 1111 1111 111

  • react源码层深入刨析babel解析jsx实现

    react源码层深入刨析babel解析jsx实现

    目录 jsx v16.x及以前版本 v17及之后版本 ReactElement React.createElement ReactElement React.Component 总结 经过多年的发展,React已经更新了大版本16.17.18,本系列主要讲的是 version:17.0.2,在讲这个版本之前,我们先看一看在babel的编译下,每个大版本之下会有什么样的变化. jsx <div className='box'> <h1 className='title' style={{'

  • react源码层分析协调与调度

    react源码层分析协调与调度

    目录 requestEventTime requestUpdateLane findUpdateLane lanePriority LanePriority createUpdate enqueueUpdate 总结 协调与调度 reconciler流程 同步任务类型执行机制 异步任务类型执行机制 shouldYield performUnitOfWork beginWork completeUnitOfWork scheduler流程 performWorkUntilDeadline 总结 r

随机推荐