构建后如何诊断移动设备上的 React 白屏？
How Does One Diagnose A React White Screen On Mobile After Build?
注意：这不是 React Native 问题。它指的是 ReactJS（用于制作前端网站的常规 React）。
另外，我要公开的目标网站是www.superstoreglobal.com
我 运行 在 ReactJS 站点上构建。该网站在桌面上显示得非常好，但在移动设备上却出现空白屏幕。
以为我可以通过解决所有“警告”轻松解决这个问题，但这并没有解决问题。
我找不到原因。
当手机 safari/chrome 上没有 F12/developer 工具时，如何诊断此类问题？
请帮忙。
更新 1：browserstack 解决方案未在控制台中显示任何错误。
更新 2：删除 "natural" package 解决了问题。
您可以使用以下方式在您的系统上调试 android/ios。您将能够在移动设备网站的桌面浏览器中看到开发人员控制台。有关详细信息，请访问以下网站进行设备调试。
https://developer.chrome.com/docs/devtools/remote-debugging/
https://www.browserstack.com/guide/safari-remote-debugging
更新：
我能够在连接到 Web 检查器时重现白屏错误。正如我所怀疑的那样，它只发生在 (iPhone iOS) Safari:
好像是一些JavaScript在Safari上只有条件执行？错误是：“SyntaxError：无效的正则表达式：无效的组说明符名称。”
幸运的是，JS 文件没有被缩小，所以可以检查有问题的 JS：
但是，这个正则表达式似乎有效并且可以在（PC 桌面）中使用Chrome:
所以也许正则表达式使用了 Safari 上不可用的 JS 正则表达式功能？ Safari 的 JS 引擎往往相对过时。无论如何，由于这个 JS 错误，React 从不渲染任何组件并且 HTML/body 高度为 0.
我能够使用免费和付费方法将 iOS Safari 连接到 PC 来检查这个黑屏错误，如下所述。
下一步我将尝试删除 natural 包并确认这确实是网站无法在 iOS Safari 上运行的原因。
也许 www.superstoreglobal.com 使用 HTML/CSS 不受 iOS Safari 支持：
- iPhone 上的空白屏幕。
- 在 Android 移动设备上呈现良好。
- 在 PC 桌面上呈现良好 Chrome。
- 没有 Mac 来测试...
当我尝试在 iPhone 上重新加载并连接到我的 PC 上的开发工具时，URL 由于错误 504 网关超时而停止在所有平台上工作。所以我无法进一步检查和调查...
如何将 iOS Safari 移动版连接到 PC/MAC 网络检查器：
此外：React Developer Tools 是一个浏览器扩展，提供额外的特定于 React 的调试信息：
You will get two new tabs in your Chrome DevTools: "⚛️ Components" and
"⚛️ Profiler".
The Components tab shows you the root React components that were
rendered on the page, as well as the subcomponents that they ended up
rendering.
By selecting one of the components in the tree, you can inspect and
edit its current props and state in the panel on the right. In the
breadcrumbs you can inspect the selected component, the component that
created it, the component that created that one, and so on.
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 Technology preview 中进行了测试，但它在那里也不起作用。
注意：这不是 React Native 问题。它指的是 ReactJS（用于制作前端网站的常规 React）。
另外，我要公开的目标网站是www.superstoreglobal.com
我 运行 在 ReactJS 站点上构建。该网站在桌面上显示得非常好，但在移动设备上却出现空白屏幕。
以为我可以通过解决所有“警告”轻松解决这个问题，但这并没有解决问题。
我找不到原因。
当手机 safari/chrome 上没有 F12/developer 工具时，如何诊断此类问题？
请帮忙。
更新 1：browserstack 解决方案未在控制台中显示任何错误。
更新 2：删除 "natural" package 解决了问题。
您可以使用以下方式在您的系统上调试 android/ios。您将能够在移动设备网站的桌面浏览器中看到开发人员控制台。有关详细信息，请访问以下网站进行设备调试。
https://developer.chrome.com/docs/devtools/remote-debugging/ https://www.browserstack.com/guide/safari-remote-debugging
更新：
我能够在连接到 Web 检查器时重现白屏错误。正如我所怀疑的那样，它只发生在 (iPhone iOS) Safari:
好像是一些JavaScript在Safari上只有条件执行？错误是：“SyntaxError：无效的正则表达式：无效的组说明符名称。”
幸运的是，JS 文件没有被缩小，所以可以检查有问题的 JS：
但是，这个正则表达式似乎有效并且可以在（PC 桌面）中使用Chrome:
所以也许正则表达式使用了 Safari 上不可用的 JS 正则表达式功能？ Safari 的 JS 引擎往往相对过时。无论如何，由于这个 JS 错误，React 从不渲染任何组件并且 HTML/body 高度为 0.
我能够使用免费和付费方法将 iOS Safari 连接到 PC 来检查这个黑屏错误，如下所述。
下一步我将尝试删除 natural 包并确认这确实是网站无法在 iOS Safari 上运行的原因。
也许 www.superstoreglobal.com 使用 HTML/CSS 不受 iOS Safari 支持：
- iPhone 上的空白屏幕。
- 在 Android 移动设备上呈现良好。
- 在 PC 桌面上呈现良好 Chrome。
- 没有 Mac 来测试...
当我尝试在 iPhone 上重新加载并连接到我的 PC 上的开发工具时，URL 由于错误 504 网关超时而停止在所有平台上工作。所以我无法进一步检查和调查...
如何将 iOS Safari 移动版连接到 PC/MAC 网络检查器：
此外：React Developer Tools 是一个浏览器扩展，提供额外的特定于 React 的调试信息：
You will get two new tabs in your Chrome DevTools: "⚛️ Components" and "⚛️ Profiler".
The Components tab shows you the root React components that were rendered on the page, as well as the subcomponents that they ended up rendering.
By selecting one of the components in the tree, you can inspect and edit its current props and state in the panel on the right. In the breadcrumbs you can inspect the selected component, the component that created it, the component that created that one, and so on.
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 Technology preview 中进行了测试，但它在那里也不起作用。