html调试面板,怎样调试react

怎样调试react所需工具：chrome浏览器、React Developer Tools 插件

1、安装React Developer Tools 插件

下载插件，在chrome里进行安装即可。React Developer Tools是一款由facebook开发的有用的Chrome 浏览器扩展，可以通过 Chrome Web存储获取。使用 Chrome Devtools 进行调试时，可以查看应用程序的 React 组件分层结构，而不是更加神秘的浏览器 DOM 表示。添加react developer tools到chrome，是对chrome开发工具的React调试工具。React的开发工具是开源Chrome DevTools延伸反应的JavaScript库。它允许你检查React在Chrome开发者工具组件的层次结构(原名WebKit Web Inspector)。你会得到新的标签要求在你的Chrome DevTools反应。这表明你的根反应组件在页面渲染，以及他们最终渲染组件。

2、运行react项目，在浏览器打开。

(1) 按下f12打开调试面板-选择react-进入组件

(2) F8继续调试；

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

(4) F10 进入下一行；

f10是执行下一行js代码

f11是进入当前行方法

f8是让代码继续运行

更多React相关技术文章，请访问React答疑栏目进行学习！