Remote debugger devtools for sailfish-browser

Applications
#1

Hey there,

Did anyone ever figure out how to connect to the sailfish-browser with the Firefox remote debugger tools? I am trying to debug a website that is behaving badly.

I found some options by going to about:config and searching for “devtools”. I turned on devtools.debugger.remote-enabled and turned off devtools.debugger.force-local, but that didn’t seem to have any effect.

I also tried starting the browser from the terminals as sailfish-browser --start-debugger-server, but that just tried to open --start-debugger-server as if it’s a web link.

I found some discussion about this in the old Jolla Together forum, but there wasn’t much there.
https://together.jolla.com/question/74739/how-do-you-set-up-remote-debugging-for-the-browser/

Any ideas?

2 Likes
#2

Well, still haven’t been able to find a way. I tried about:debugging too but that doesn’t seem to exist in the Sailfish Browser.

So, next best thing:

<script>
  const history_length = 10;
  var debugmessages = Array(history_length);
  function debuglog(message) {
    var el = document.getElementById('debugdiv');
    for(var i = history_length - 1; i > 0; i--) {
      debugmessages[i] = debugmessages[i - 1];
    }
    debugmessages[0] = message;
    el.innerHTML = "";
    for(var i = history_length - 1; i >= 0; i--) {
      if(debugmessages[i] !== undefined) {
        el.innerHTML += "<p style=\"margin: 0 0 0 0; padding: 0 0 0 0; line-height: 1;\">" + debugmessages[i] + "</p>";
      }
    }
  }
  function ondebugerror(event) {
    debuglog(event.message);
  }
  window.addEventListener('error', ondebugerror)
</script>

And add this to the body:

<div id="debugdiv" style="z-index: 1; position: absolute; left: 20px; top: 200px;">Debug output</div>

Then you can use debuglog("bla bla") similar to how you would use console.log. It also catches errors and prints those on screen. Not the best, but it did the trick for me.

1 Like