8

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.

Vern Jensen
  • 3,449
  • 6
  • 42
  • 59
  • Great answers, thank you all. Also: I filed a Qt bug report, and it was closed as not being applicable. The solution, as others have pointed out, is to either use an old version of Chromium, or build one of Qt's demo browsers, and use that for debugging. (i.e. make sure the browser being used to remotely debug is the same version as the one being debugged.) – Vern Jensen Mar 06 '20 at 19:16

2 Answers2

13

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

akashrajkn
  • 2,295
  • 2
  • 21
  • 47
bai
  • 366
  • 2
  • 9
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 (
Sergey Bargamon
  • 132
  • 1
  • 4