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

Question

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

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

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

认为我可以通过解决所有“警告”来轻松解决此问题，但并没有解决问题。

我找不到原因。

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

请帮忙。

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

Update2：删除"natural" package 解决了问题。

Answer 1

更新：

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

似乎是某些 JavaScript 只能在 Safari 上有条件地执行？错误是：“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 mobile 连接到 PC/MAC 网络检查器：

• With a Mac
• With a PC (Paid method; free trial)
• With a PC (Free method)

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

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

“组件”选项卡向您显示了之前的根 React 组件 呈现在页面上，以及它们最终的子组件 渲染。

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

Answer 2

Safari 抛出此错误

SyntaxError: Invalid regular expression: invalid group specifier name(anonymous function) @ 0.chunk.js:100751

这将我们引向这行代码。

  let tokens = text.match(/(?<=\s+|^)["'‘“'"[({⟨]?(.*?[.?!])(\s[.?!])*["'’”'"\])}⟩]?(?=\s+|$)|(?<=\s+|^)\S(.*?[.?!])(\s[.?!])*(?=\s+|$)/g);

这里的问题是该表达式的开头。这些字符(?<=ABC) 被称为正视背后，在 safari、移动或桌面上不支持。

我也在 Safari 技术预览版中进行了测试，但它在那里也不起作用。

Answer 3

您可以使用以下方式在您的系统上调试 android/ios。您将能够在移动设备网站的桌面浏览器中看到开发者控制台。有关详细信息，请访问以下网站进行设备调试。

https://developer.chrome.com/docs/devtools/remote-debugging/ https://www.browserstack.com/guide/safari-remote-debugging