检查移动应用程序时Chrome devtools空白页

Question

我正在开发移动应用程序（在 Ionic4 中），但我无法在 chrome devtools 中对其进行检查和调试。当我转到 Chrome/inspect 时，列表中出现了正在运行的应用程序的设备，但是当我点击检查时，只打开空白页面，它看起来像这样：

device page blank inspect page

当我点击 Ctrl+Shift+I 空白页重新打开，我可以查看控制台时，出现一些错误：

Uncaught TypeError: Cannot read property 'appendChild' of null
at installExtraStyleRules (devtools_compatibility.js:1484)
at installBackwardsCompatibility (devtools_compatibility.js:1457)
at devtools_compatibility.js:1504
at devtools_compatibility.js:1506

Uncaught TypeError: Cannot redefine property: keyIdentifier
    at Function.defineProperty (<anonymous>)
    at installBackwardsCompatibility (devtools_compatibility.js:1381)
    at devtools_compatibility.js:1504
    at devtools_compatibility.js:1506

[Deprecation] Application Cache was previously restricted to secure origins only from M70 on but now secure origin use is deprecated and will be removed in M82.  Please shift your use case over to Service Workers.

Uncaught TypeError: Object.observe is not a function
at WebInspector.Main._createSettings (inspector.js:10380)
at WebInspector.Main._gotPreferences (inspector.js:10372)
at DevToolsAPIImpl.embedderMessageAck (devtools_compatibility.js:43)
at <anonymous>:1:13

任何想法问题出在哪里？它只发生在这种类型的设备上，在其他设备上，效果很好。

Answer 1

我对 Ionic 有一点经验。不是一个大粉丝，因为这是你将面临的错误的开始。你必须是专业的 Javascript 程序员才能理解 Ionic 用于编译（调试和发现问题）的每一段代码。即便如此，我也很难找到一些错误。

我的建议是使用 Typescript 模板切换到 React Native。由于 Typescript 为您提供了最好的 linting、错误和编译帮助。我使用 Ionic 构建了多个应用程序，所有应用程序都远不如我的 React Native 工作那么先进和美观。以及其他程序员要了解您的代码，最好将 Typescript 与泛型、接口、类等一起使用...如果您有任何其他问题，请在下面发布，我会编辑这篇文章。