Qt QWebEngine Remote Debugging: Chrome developer tools no longer work

Question

Recently after some software updates (automated Windows 10 update, and possibly a Chrome auto-update) the developer tools for remote debugging from Qt's QWebEngine stopped working. The JavaScript console shows this:

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

The code in question (from shell.js) is this:

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

What is shell.js and where does it come from? What could be the cause of this problem?

The web page is actually being run in a Qt 5.12.3 web browser, but I'm using Chrome (remotely) for the Developer Tools.

I also upgraded Angular 7.x to Angular 8 at the same time, but no longer believe this is related.

My Chrome is currently version 80.0.3987.116 (Official Build) (64-bit).

UPDATE I just tried downloading an older release of Chromium. (I tried Version 77.0.3823.0 since this dates back to mid-2019.) And debugging there WORKS.

Answer 1

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

Chrome 80 has deprecated WebComponents v0 which is used by these devtools.

Solution is to launch Chrome with extra parameters re-enabling the feature (while it's still in the engine):

--enable-blink-features=ShadowDOMV0,CustomElementsV0

Or to use a Chromium build corresponding to Chrome 79.x, e.g.

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/

See: Chrome devtools inspector showing blank white screen while debugging with Samsung TV Tizen Web application

Answer 2

Google removed WebComponents V0 from Chrome, but GUI for remote debug uses them. So when you try to launch remote debug on device with old Chrome on board - debugger crashes with

Uncaught TypeError: document.registerElement is not a function

I found two way to fight this

1. Downgrade Chrome and there is no easy way to do it (if you use mac here link for you https://commondatastorage.googleapis.com/chromium-browser-snapshots/index.html?prefix=Mac/668249/)
2. Upgrade chrome on target device and in most cases it is impossible (