在react代码中打断点的方法

这篇文章主要介绍了在react代码中打断点的方法，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

成都创新互联公司专注为客户提供全方位的互联网综合服务，包含不限于成都做网站、成都网站制作、成都外贸网站建设、津南网络推广、小程序设计、津南网络营销、津南企业策划、津南品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等，从售前售中售后，我们都将竭诚为您服务，您的肯定，是我们最大的嘉奖；成都创新互联公司为所有大学生创业者提供津南建站搭建服务，24小时服务热线：028-86922220，官方网址：www.cdcxhl.com

在react代码中打断点的方法：首先打开chrome浏览器中的扩展程序；然后依次点击“扩展程序->打开Chrome网上应用店”；接着搜索react developer tools并安装；最后在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网上应用店】

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

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

5、使用

2、在react代码中打断点

(2) F8继续调试；

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

(4) F10 进入下一行；

f10是执行下一行js代码

f11是进入当前行方法

f8是让代码继续运行

感谢你能够认真阅读完这篇文章，希望小编分享的“在react代码中打断点的方法”这篇文章对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联行业资讯频道，更多相关知识等着你来学习!