Qt QWebEngine 远程调试：Chrome 开发者工具不再起作用答案

【问题标题】：Qt QWebEngine Remote Debugging: Chrome developer tools no longer workQt QWebEngine 远程调试：Chrome 开发者工具不再起作用
【发布时间】：2020-06-03 03:17:56
【问题描述】：

最近在一些软件更新（自动 Windows 10 更新，可能还有 Chrome 自动更新）之后，用于从 Qt 的 QWebEngine 进行远程调试的开发人员工具停止工作。 JavaScript 控制台显示：

Uncaught TypeError: document.registerElement is not a function
    at Object.UI.registerCustomElement (shell.js:formatted:18064)
    at shell.js:formatted:18178
    at shell.js:formatted:18266
devtools_app.js:formatted:2606 Uncaught ReferenceError: SDK is not defined
    at devtools_app.js:formatted:2606

有问题的代码（来自 shell.js）是这样的：

UI.registerCustomElement = function(localName, typeExtension, prototype) {
    return document.registerElement(typeExtension, {
        prototype: Object.create(prototype),
        extends: localName
    });
}

什么是 shell.js，它来自哪里？这个问题的原因可能是什么？

该网页实际上是在 Qt 5.12.3 网络浏览器中运行的，但我将 Chrome（远程）用于开发工具。

我也同时将 Angular 7.x 升级到了 Angular 8，但不再相信这是相关的。

我的 Chrome 当前版本为 80.0.3987.116（官方版本）（64 位）。

更新我刚刚尝试下载旧版本的 Chromium。（我尝试了版本 77.0.3823.0，因为这可以追溯到 2019 年年中。）在那里调试工作正常。

【问题讨论】：

很好的答案，谢谢大家。另外：我提交了 Qt 错误报告，但由于不适用而被关闭。正如其他人指出的那样，解决方案是使用旧版本的 Chromium，或者构建 Qt 的演示浏览器之一，并将其用于调试。（即确保用于远程调试的浏览器与被调试的浏览器版本相同。）

标签： angular qt qtwebengine

【解决方案1】：

https://developer.tizen.org/forums/web-application-development/tizen-studio-debug-tizen-web-application-blank-page-chrome-80

Chrome 80 已弃用这些开发工具使用的 WebComponents v0。

解决方案是使用额外参数启动 Chrome 以重新启用该功能（当它仍在引擎中时）：

--enable-blink-features=ShadowDOMV0,CustomElementsV0

或者使用对应于 Chrome 79.x 的 Chromium 构建，例如

Windows: https://commondatastorage.googleapis.com/chromium-browser-snapshots/index.html?prefix=Win_x64/706915/
Mac: https://commondatastorage.googleapis.com/chromium-browser-snapshots/index.html?prefix=Mac/706915/
Linux: https://commondatastorage.googleapis.com/chromium-browser-snapshots/index.html?prefix=Linux_x64/706915/

见：Chrome devtools inspector showing blank white screen while debugging with Samsung TV Tizen Web application

【讨论】：

【解决方案2】：

Google 从 Chrome 中删除了 WebComponents V0，但用于远程调试的 GUI 使用了它们。因此，当您尝试在装有旧 Chrome 的设备上启动远程调试时 - 调试器会崩溃

Uncaught TypeError: document.registerElement is not a function

我找到了两种方法来解决这个问题

降级 Chrome 并没有简单的方法（如果您使用 mac，请点击此处链接 https://commondatastorage.googleapis.com/chromium-browser-snapshots/index.html?prefix=Mac/668249/）
在目标设备上升级 chrome，在大多数情况下是不可能的 (

【讨论】：