React除錯工具:react-devtools
阿新 • • 發佈:2019-01-25
<!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>
再次執行react-devtools,開啟index01.html,