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.
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/