HTML Remote Debugging: document.registerElement

Hello everyone.

I am having trouble with the HTML remote debugging. I setup the config like so

<html>
        <enable-gpu>false</enable-gpu>
        <remote-debugging-port>8081</remote-debugging-port>
</html>

And when loading http://localhost:8081 I see all the templates as expected but, when selecting a template, no console shows up. There is an error in the console for the page (If I open it manually) that says

Uncaught TypeError: document.registerElement is not a function
    at Object.UI.registerCustomElement (inspector.js:2978)

Any ideas on how to resolve the issue? Thank you in advance!

Not sure about that but I’d recommend:

  1. Go to chrome://inspect/#devices
  2. Check Discover network targets
  3. Click Configure and add 127.0.0.1:8081

In a few seconds you should get the running templates listed on the page.

Then you can use the latest Chrome DevTools instead of the one in Chromium.

Update: document.registerElement was part of web components v0 and deprecated (so it’s used in the old Devtools in Chromium but no longer supported in Chrome). You could use an older version of Chrome if you want but the method above is far superior.

Works like a charm, thank you!

Glad you have a solution. What version of casparcg is this with?

I am using 2.2.0 Stable Release. After a few days, I found that this method can be a bit slow but, if you don’t have an older version of chrome to use, it works fine!