怎么在react代码中打断点?

怎么在react代码中打断点?下面本篇文章给大家介绍一下在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网上应用店】

1.png

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

2.jpg

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

3.jpg

5、使用

4.jpg

2、在react代码中打断点

1.png

2.png

3.png

4.png

5.png

6.png

(2) F8继续调试;

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

(4) F10 进入下一行;

f10是执行下一行js代码

f11是进入当前行方法

f8是让代码继续运行

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

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

赞(0) 打赏
未经允许不得转载:html中文网首页 » React 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏