Chrome中React应用无响应问题求助

我之前开发React项目时也碰到过几乎一模一样的情况，给你分享几个实用的排查步骤，一步步来应该能定位问题：

• 先排除浏览器层面的问题

  • 试试用Chrome无痕模式打开应用，无痕模式会禁用所有扩展（除了你手动允许的），如果页面恢复正常，那大概率是某个Chrome扩展和你的应用冲突了，你可以逐个启用扩展排查哪个出问题；
  • 换个浏览器（比如Firefox、Edge）测试，如果其他浏览器能正常运行，那基本可以确定是Chrome本身的配置或扩展问题，建议清理Chrome缓存（Ctrl+Shift+Del）后再试。

• 检查应用本身的错误与异常

  • 打开Chrome DevTools（F12）切换到Console标签，看看有没有红底的报错信息——无限渲染循环是页面无响应最常见的原因，比如useEffect没加正确的依赖数组、在组件渲染函数里直接修改状态、或者自定义Hook里的逻辑导致反复更新；
  • 查看Network标签，有没有请求长时间处于pending状态（比如接口超时没处理），这种情况也会卡住页面交互。

• 清理应用缓存与依赖

  • 执行yarn cache clean清理yarn的缓存，然后删除node_modules文件夹重新安装依赖：

    rm -rf node_modules
    yarn install
    

  • 有时候依赖包损坏或者缓存的旧代码会导致奇怪的运行异常，这一步能解决不少疑难杂症。

• 排查React DevTools的兼容问题

  • 虽然你已经开启了权限，但可以试试先禁用React DevTools扩展，重启浏览器后再打开应用，如果页面恢复正常，那就是DevTools版本和你的React版本不兼容，建议更新DevTools到最新版，或者回退到兼容的版本；
  • 也可以尝试在DevTools的设置里关闭一些功能（比如“Highlight Updates”），某些实时高亮功能在复杂组件场景下可能导致性能问题。

• 回溯代码变更

  • 回忆一下重启前你做的布局修改，比如新增了组件、调整了状态逻辑或者修改了CSS样式？可以把最近的代码逐段注释掉，然后重启应用测试，定位到具体是哪段代码导致的页面无响应——尤其是新增的useEffect、递归逻辑或者大量DOM渲染的代码。

• 其他小技巧

  • 试试换端口启动应用：yarn start --port 3001，有时候默认端口3000被其他程序占用，可能会导致应用启动异常；
  • 关闭Chrome的硬件加速：在Chrome设置里搜索“硬件加速”，关闭后重启浏览器，部分显卡驱动兼容问题会导致页面卡死。

内容的提问来源于stack exchange，提问作者Yeti