html页面打断点单词,怎么在react代码中打断点?

怎么在react代码中打断点?下面本篇文章给大家介绍一下在react代码中打断点调试。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

ea63d345f2ad8326fc8bc02ebba13949.png

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

40dc12bc48341886858caf34a8a4d548.png

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

80b66358847234b9a0c291ccdd27dfb8.png

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

5a5c57f132a76d7df4d3de8f8580d2a2.png

5、使用

db8fc2827ef788a1ab88d4603ee9509c.png

2、在react代码中打断点

aa5b68b6d808964dbe93ff5c97eec262.png

30a4179af4bc3571cfdfab4e8829b905.png

2b14044defaa8e71bdb6642e9ce1b58c.png

2364829cbc494678280b60698c508d1f.png

5d6a17f877c11b4c0bb469900891bee2.png

96024e00e9e4bee49f4adbe50f908ef2.png

(2) F8继续调试;

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

(4) F10 进入下一行;

f10是执行下一行js代码

f11是进入当前行方法

f8是让代码继续运行

更多web开发相关知识,请查阅 HTML中文网 !!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值