React调试工具：react-devtools

最新推荐文章于 2024-08-13 08:38:19 发布

swpu_lwf

最新推荐文章于 2024-08-13 08:38:19 发布

阅读量5.1k

点赞数 1

分类专栏：框架文章标签： react 调试工具 react-devtools 浏览器插件

本文链接：https://blog.csdn.net/liwenfei123/article/details/80037800

版权

框架专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
    <head
        <script src="../build/react.js"></script><!--react核心库-->
        <script src="../build/react-dom.js"></script><!--提供与DOM相关的功能-->
        <script src="../build/browser.min.js"></script><!--将JSX语法转化为JavaScript的语法-->
    </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,打开控制台：
这里写图片描述

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

npm install -g react-devtools

(2)运行 react-devtools：

react-devtools

出现：
这里写图片描述

根据提示进行相应操作。

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><!--react核心库-->
        <script src="../build/react-dom.js"></script><!--提供与DOM相关的功能-->
        <script src="../build/browser.min.js"></script><!--将JSX语法转化为JavaScript的语法-->
    </head>
    <body>
       //...
    </body>
</html>