在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网上应用店】

在react代码中打断点的方法

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

在react代码中打断点的方法

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

在react代码中打断点的方法

5、使用

在react代码中打断点的方法

2、在react代码中打断点

在react代码中打断点的方法

在react代码中打断点的方法

(2) F8继续调试;

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

(4) F10 进入下一行;

f10是执行下一行js代码

f11是进入当前行方法

f8是让代码继续运行

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


文章题目:在react代码中打断点的方法
当前路径:http://ybzwz.com/article/gsepgs.html