React调试工具：react-devtools

- 日理万妓 2022-05-26 01:08 246阅读 0赞

<!DOCTYPE html> <html> <head <script src="../build/react.js"></script> <script src="../build/react-dom.js"></script> <script src="../build/browser.min.js"></script> </head> <body> <div id="root"> </div> <script type="text/babel">//使用JSX ReactDOM.render( <h1>Hello World</h1>, document.getElementById("root") ) </script> </body> </html>

打开index01.html,打开控制台：  
![这里写图片描述][70]

怎么解决？  
(1)安装`react-devtools`：

npm install -g react-devtools

(2)运行 `react-devtools`：

react-devtools

出现：  
![这里写图片描述][70 1]

根据提示进行相应操作。

React DOM情况下：把`<script src="http://localhost:8097"></script>` 添加到引入React DOM之前：  
即：

<!DOCTYPE html> <html> <head <script src="http://localhost:8097"></script> <script src="../build/react.js"></script> <script src="../build/react-dom.js"></script> <script src="../build/browser.min.js"></script> </head> <body> //... </body> </html>

再次运行react-devtools，打开index01.html，  
![这里写图片描述][70 2]

npm 安装react-devtools，参考链接：[npm react-devtools][]  
当然也有直接安装浏览器插件的方法，参考链接：[facebook/react-devtools][facebook_react-devtools]

[70]: /images/20220526/d0e3a9e6c7fe4a26b2627ad3192bdd8c.png
[70 1]: /images/20220526/c2d19691869b428e9e5a113cb228f482.png
[70 2]: /images/20220526/91d4e596de5144019d714350eef110e7.png
[npm react-devtools]: https://www.npmjs.com/package/react-devtools
[facebook_react-devtools]: https://github.com/facebook/react-devtools/blob/master/README.md#the-react-tab-doesnt-show-up

发表评论取消回复

表情：

评论列表（有 0 条评论，246人围观）

还没有评论，来说两句吧...

相关阅读

相关安装ReactDevtools调试工具

我在安装ReactDevtools的时候，在网上找到的方法都是千篇一律的从github上clone项目，一顿操作猛如虎，然后中间各种问题… 其实Chrome安装扩展程序的步

川长思鸟来/ 2023年03月13日 06:44/ 0 赞/ 196 阅读

相关 Firebug调试工具

![这里写图片描述][20160619215915651] FireBug窗口功能：控制台：JavaScript命令行操作、显示JS错误信息、提示信息、日志信息，右侧可

╰+哭是因爲堅強的太久メ/ 2022年09月21日 13:00/ 0 赞/ 160 阅读

相关 gdb调试工具

前言使用C编程, 虽然大部分问题采用简单粗暴的`printf`方式都能得到解决, 但是也有一些问题不好定位, 例如程序崩溃, 导致出错点附近的打印都会消失, 而且因为是

Myth丶恋晨/ 2022年09月04日 09:49/ 0 赞/ 223 阅读

相关 ADB调试工具

adb 是用来管理模拟器和真机的通用调试工具，该工具功能强大，直接打开cmd即可使用adb 命令，adb 的全称为Android Debug Bridge，是起到调试桥的作用，

秒速五厘米/ 2022年07月14日 03:20/ 0 赞/ 378 阅读

相关 python调试工具

PyCharm Community Edition 2016.2.3 Build \PC-162.1967.10, built on September 7, 2016

- 日理万妓/ 2022年07月11日 05:00/ 0 赞/ 277 阅读

相关调试工具：OzCode

官网：http://www.oz-code.com/ 视频：https://channel9.msdn.com/Shows/Visual-Studio-Toolbox/Oz

冷不防/ 2022年06月03日 06:15/ 0 赞/ 205 阅读

相关 npm 安装React Devtools调试工具

前言这里主要写给和我一样摸索的新手，之前相信大家也看到了网上的一些安装方法，有的给你个git上的下载链接，然后就没有然后了(好像官方也没给个具体操作)；有的让你去goo

比眉伴天荒/ 2022年06月02日 08:25/ 0 赞/ 230 阅读

相关 React调试工具：react-devtools

<!DOCTYPE html> <html> <head <script src="../build/react.js"></script><!--react核心库--

- 日理万妓/ 2022年05月26日 01:08/ 0 赞/ 247 阅读

相关调试工具资源

[解决SecureCRT 中文乱码][SecureCRT] [SecureCRT]: https://blog.csdn.net/zheng2900616/articl

悠悠/ 2022年05月25日 07:24/ 0 赞/ 184 阅读

相关 react调试工具与调试方法

react开发的调试方式 1. 借助以下插件进行调试。 Redux DevTools React Developer Tools

本是古典何须时尚/ 2021年09月02日 06:28/ 0 赞/ 764 阅读