本文摘自PHP中文网,作者藏色散人,侵删。
在react代码中打断点的方法:首先打开chrome浏览器中的扩展程序;然后依次点击“扩展程序->打开Chrome网上应用店”;接着搜索react developer tools并安装;最后在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网上应用店】
3)、搜索react developer tools,选择安装、添加至Chrome 即可。
相关阅读 >>
更多相关阅读请进入《React》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者