Chrome浏览器下ReactDevTools的安装和使用

 时间:2024-10-15 18:07:36

1、我们从网络上下载这两个插件的rar包,然后解压到当前文件夹,如下图所示:

Chrome浏览器下ReactDevTools的安装和使用

2、打开Chrome浏览器,点击右上角的更多图标,然后依次选择“更多工具”->“扩展程序”,如下图所示:

Chrome浏览器下ReactDevTools的安装和使用

3、浏览器打开Chrome://extensions,点击“加载已解压的扩展程序”,如下图所示:

Chrome浏览器下ReactDevTools的安装和使用

4、浏览选择我们先前解压的ReactDevTools文件夹,如下图所示:

Chrome浏览器下ReactDevTools的安装和使用

5、提示扩展程序已加载,界面中显示React Developer Tools 3.6.0版本,如下图所示:

Chrome浏览器下ReactDevTools的安装和使用

6、再次浏览选择我们先前解压的ReduxDevTools文件夹,如下图所示:

Chrome浏览器下ReactDevTools的安装和使用

7、此时Redux DevTools 2.15.2插件也已经加载,如下图所示:

Chrome浏览器下ReactDevTools的安装和使用

8、运行我们的React程序,然后点击右上角的更多图标,然后依次选择“更多工具”->“开发者工具”,如下图所示:

Chrome浏览器下ReactDevTools的安装和使用

9、此时控制台提示js脚本错误,但是在我们安装插件前程序运行正常,如下图所示:

Chrome浏览器下ReactDevTools的安装和使用

10、我们劐聂赞陶根据上面的js脚本错误提示,在程序中找到/node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshengry.js,并定位到第8行代码,我们将该行代码注释掉,如下图所示:

Chrome浏览器下ReactDevTools的安装和使用

11、然后我们重新通过npm start运行React程序,刷新浏览器查看结果,同时龅歧仲半打开开发者工具,可以看到多出了Redux和React两个标签,我们点击React可以查看当前运行页面的React元素信息,如下图所示:

Chrome浏览器下ReactDevTools的安装和使用
  • 三星S7/edge怎么预约购买
  • 微信在三星note2等大屏手机或平板使用大字体
  • 剑三21个结局攻略
  • 贵金属平台有哪些?如何选择?
  • 班级信息管理应注意的事项有什么呢?
  • 热门搜索
    三爱三节手抄报内容 我的成长足迹手抄报 手抄报排版设计 放飞心灵手抄报 文明安全行手抄报 中秋节手抄报资料 关于体育精神的手抄报 四年级上册手抄报 高中手抄报 二年级绿色环保手抄报