时间戳

首页 > 解决方案 > 构建后如何在移动设备上诊断 React 白屏？

javascript - 构建后如何在移动设备上诊断 React 白屏？

问题描述

注意：这不是一个 React Native 问题。它指的是 ReactJS（用于制作前端网站的常规 React）。

另外，我要透露的目标网站是www.superstoreglobal.com

我在 ReactJS 网站上运行了一个构建。该网站在桌面上显示得非常好，但在移动设备上我得到一个空白屏幕。

认为我可以通过解决所有“警告”来轻松解决这个问题并没有解决它。

我无法找到原因。

当移动 safari/chrome 上没有 F12/开发人员工具时，如何诊断此类问题？

请帮忙。

更新 1：browserstack 解决方案没有在控制台中显示任何错误。

更新2：删除“自然”包解决了这个问题。

标签： javascriptnode.jsreactjserror-handlingbuild

解决方案

更新：

连接到网络检查器时，我能够重现白屏错误。正如我所怀疑的，它只发生在（iPhone iOS）Safari 上：

在此处输入图像描述

似乎是一些仅在 Safari 上有条件地执行的 JavaScript？错误是：“SyntaxError：无效的正则表达式：无效的组说明符名称。”

幸运的是，JS 文件没有被缩小，因此可以检查有问题的 JS：

在此处输入图像描述

但是，这个正则表达式似乎是有效的并且在（PC 桌面）Chrome 中工作：

在此处输入图像描述

那么也许正则表达式使用了 Safari 上没有的 JS Regex 功能？Safari 的 JS 引擎往往相对过时。无论如何，由于这个 JS 错误，React 从不渲染任何组件，并且 HTML/body 高度为 0。

我能够使用免费和付费方法将 iOS Safari 连接到 PC 来检查这个空白屏幕错误，如下所述。

我将采取的下一步是尝试删除natural软件包并确认这实际上是该网站在 iOS Safari 上无法运行的原因。

也许www.superstoreglobal.com使用了 iOS Safari 不支持的 HTML/CSS：

  • iPhone 上的空白、白色屏幕。
  • 在 Android 移动设备上渲染良好。
  • 在 PC 桌面 Chrome 上呈现良好。
  • 没有Mac可以测试...

当我在连接到 PC 上的开发工具时尝试在 iPhone 上重新加载时，由于错误 504 网关超时，该 URL 停止在所有平台上工作。所以我无法进一步检查和调查......

如何将 iOS Safari 手机连接到 PC/MAC 网络检查器：

另外：React Developer Tools是一个浏览器扩展，它提供了额外的 React 特定的调试信息：

您将在 Chrome DevTools 中获得两个新选项卡：“⚛️ 组件”和“⚛️ Profiler”。

Components 选项卡显示了在页面上呈现的根 React 组件，以及它们最终呈现的子组件。

通过选择树中的一个组件，您可以在右侧面板中检查和编辑其当前的道具和状态。在面包屑中，您可以检查所选组件、创建它的组件、创建该组件的组件等等。

推荐阅读