1. 首先,下载react-developer-tools开发调试工具插件。
因为谷歌插件下载需要FQ,这里提供一个本地资源:https://www.crx4chrome.com/crx/3068/
谷歌下载.crx后缀的文件,火狐下载.xpi后缀的文件。
2. 插件安装(以谷歌为例)
打开谷歌浏览器,在路劲栏输入:chrome://extensions/
将下载的插件拖入谷歌浏览器,然后选中允许访问文件网址。
点击详细信息
React Developer Tools会自动检测React组件,不过在webpack-dev-server模式下,webpack会自动将React组件放入到iframe下,导致React组件检测失败,变通方法是webpack-dev-server配置在--inline模式下即可。
3. 在chrome浏览器,会出现React,右侧props--组件属性,state--组件状态。