文章 专题 AI工具 学习 下载 问答 源码 最近更新
PHP
会员中心 讲师中心 微信公众号
首页 > web前端 > js教程 > 正文

怎么在react代码中打断点

藏色散人
发布： 2021-01-18 09:47:54
原创
6237人浏览过
在react代码中打断点的方法：首先打开chrome浏览器中的扩展程序；然后依次点击“扩展程序->打开Chrome网上应用店”；接着搜索react developer tools并安装；最后在react代码中打断点即可。

怎么在react代码中打断点

本文操作环境：windows7系统、Dell G3电脑、react17.0.1&&chrome87.0。

推荐：《react视频教程》

1、安装React Developer Tools调试工具

首先在Chrome中安装React Developer Tools调试工具

React Developer Tools 是一款由 facebook 开发的有用的 Chrome浏览器扩展。使用 React Developer Tools 进行调试时，可以查看应用程序的 React 组件分层结构，而不是更加神秘的浏览器 DOM 表示。

注意：该插件只对 ReactJS 开发有效。如果是 React Native 的话则无法使用这个插件调试。

1）、点击chrome浏览器右上角三个点-更多工具->扩展程序（或者在浏览器里面直接输入chrome://extensions/也可以进入到扩展程序里面）

2）、点击左上角【扩展程序】-【打开Chrome网上应用店】

97016248ee0c3fbc20c6971792531f2.png

3）、搜索react developer tools，选择安装、添加至Chrome 即可。

55dc92ba323d2f984391bf40e939e5a.png

4、安装完毕后打开扩展程序管理页面。将 React Developer Tools 的“允许访问文件网址”勾选。

5f952514f60620ff9e38b9da84ae2e5.png

5、使用

f6e9ee3ed3e927d8c3880d452d73031.png

2、在react代码中打断点

0ba25227ee0c3c41c86b8afcaa6d945.png

4020d306612df98fb3f0616f5504b4b.png

(2) F8继续调试；

(3) F11进入Javascript中的函数体调试；

(4) F10 进入下一行；

f10是执行下一行js代码

f11是进入当前行方法

f8是让代码继续运行

以上就是怎么在react代码中打断点的详细内容，更多请关注php中文网其它相关文章！

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。

下载
来源：php中文网
收藏 点赞
上一篇：jquery查找元素是否存在 下一篇：jquery如何设置元素不可见
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
js如何获取设备像素比 检测屏幕DPI的3种方法解析！ 设备像素比（DPR）是物理像素与逻辑像素的比率，可通过window.devicePixelRatio获取；检测屏幕DPI则需间接方法。1.使用window.devicePixelRatio可直接获取设备像素比，如constdpr=window.devicePixelRatio||1;2.通过CSS媒体查询估算DPI，如根据分辨率匹配不同规则；3.创建临时div元素设置为1英寸并读取其像素大小来估算DPI；4.利用Canvas绘制像素并根据颜色值判断DPI，但准确性受限。
2025-06-26 16:21:02
740
如何用JavaScript删除元素？ JavaScript删除元素主要有两种方法：1.removeChild()需要先获取父节点再调用方法删除子节点；2.remove()则更简洁直接在目标元素上调用remove()。使用时需注意：必须先判断元素是否存在以避免报错，可通过if条件判断或try...catch捕获错误；删除元素前应移除其绑定的事件监听器及闭包引用以防止内存泄漏；为确保安全删除可封装函数进行存在性验证和异常处理。
2025-06-26 16:20:03
169
js如何解析EPUB电子书 前端EPUB电子书阅读器实现 前端实现EPUB阅读器的核心在于解析EPUB结构并渲染内容，1.EPUB本质是zip压缩包，包含HTML、CSS、图片及元数据文件如content.opf和toc.ncx；2.解压需用jszip等库处理浏览器端文件限制；3.解析OPF获取书籍标题、作者、封面及章节路径；4.解析NCX生成目录树结构；5.根据spine顺序加载并渲染章节内容；6.需修正资源路径以适配前端展示。开源项目如epub.js适合定制化，Readium.js遵循标准，FolioReaderKit轻量易用。翻页可通过滚动监听或
2025-06-26 16:06:02
603
js中如何用状态机替代条件判断 状态机通过定义状态和转换规则解决JavaScript中复杂的条件判断问题。1.它能有效减少条件嵌套，使代码更清晰、易维护；2.统一处理不同条件组合导致的逻辑重复；3.明确状态变化路径，便于追踪调试。实现上，可通过对象保存当前状态并定义转换方法，例如灯的状态机包含off、on和blinking三个状态，并根据事件执行对应动作。选择库时，XState适合复杂逻辑，js-state-machine适合简单场景，Robot侧重类型安全。状态机区别于FSA在于其更注重实际应用与复杂逻辑管理。应用场景包括U
2025-06-26 15:36:02
127
js如何截取字符串前几位 字符串截取的3种常用方法分享 在JavaScript中截取字符串前几位的方法主要有substring()、slice()和substr()。1.substring(startIndex,endIndex)方法从startIndex（包含）到endIndex（不包含）截取字符，若startIndex大于endIndex会自动交换，负数参数视为0；2.slice(startIndex,endIndex)与substring类似，但支持负数索引表示从末尾计数，若startIndex大于endIndex则返回空字符串；3.subst
2025-06-26 15:17:01
174
React中怎么传递props？ 在React中传递props有四种主要方式。1.直接传递：通过在JSX中设置属性将数据传给子组件；2.传递函数：父组件通过props向子组件传递可调用的函数，实现通信；3.使用展开运算符：将多个props封装在对象中并通过...一次性传递；4.通过Context传递：创建全局数据提供给组件树中的任何组件，适用于跨层级共享数据。此外，props是只读的，子组件不可直接修改，只能通过调用父组件传递的函数来间接更新。定义props类型时，可以使用TypeScript或PropTypes提高代码健壮性。
2025-06-26 15:07:01
365
js如何生成甘特图 动态甘特图生成与更新技巧 在JS中生成甘特图推荐使用D3.js、Chart.js、FrappeGantt和BryntumGantt等库，动态甘特图需结合数据驱动与高效更新策略。1.D3.js是灵活性高但上手难的底层库，适合高度定制；2.Chart.js简单易用但需扩展支持甘特图；3.FrappeGantt专为甘特图设计，配置简单适合快速搭建；4.BryntumGantt功能强大但需付费。动态更新需依赖事件监听并优化性能，如采用Diff算法、WebWorker、虚拟DOM、节流防抖等策略。选择库时应考虑项目复杂度、预算及学
2025-06-26 14:58:02
457
js如何解析PDF文件 前端PDF解析与渲染技术解析 前端解析和渲染PDF文件主要依赖JavaScript库。常用的库包括：1.PDF.js，由Mozilla维护，功能强大，支持复杂PDF格式，安全性高；2.pdfmake，适合生成简单PDF或在React项目中使用；3.react-pdf，基于React封装，便于集成。使用PDF.js时需引入库文件，通过canvas元素加载并渲染PDF内容。需要注意的问题包括：性能消耗、安全风险、浏览器兼容性、字体显示及跨域请求等。合理选择库并优化处理可确保良好展示效果。
2025-06-26 14:53:01
837
js如何实现跨标签页通信 页面间通信的4种实现方案！ 跨标签页通信可通过BroadcastChannelAPI、SharedWorker、LocalStorage等方式实现。其一，BroadcastChannelAPI兼容现代浏览器，使用postMessage方法发送消息，适用于同源页面间简单通信；其二，SharedWorker可处理复杂逻辑，通过独立线程维护共享状态，适合共享WebSocket或执行耗时任务，但无法直接访问DOM且需注意内存管理；其三，LocalStorage利用storage事件实现通信，兼容性好但仅适合传递少量数据，建议通过防
2025-06-26 14:17:01
422
Vue.js中怎么使用v-model绑定表单？ v-model是Vue.js中用于实现表单元素与数据属性双向绑定的指令。其核心作用是同步表单输入与Vue实例的数据，支持多种输入类型如文本框、复选框、单选按钮和选择框，并提供.lazy、.number和.trim等修饰符以增强控制能力。1.对于文本输入，直接使用v-model绑定字符串；2.复选框可绑定布尔值或数组；3.单选按钮绑定字符串；4.选择框绑定选中项的value值。在自定义组件中使用v-model需要接收valueprop并触发input事件，也可通过model选项自定义prop和ev
2025-06-26 13:54:02
172
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
app下载
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部