PSA on SAFE Beaker Browser Developer Tools

I have been driving myself absolutely insane by using Window -> Developer Tools in Beaker Browser. This is the set of dev tools for beaker itself! This is COMPELETELY NOT HELPFUL for developing SAFE apps using the DOM API.

I am not sure how else to get the actual page dev tools but I know at least one way. I am using right click anywhere on your app page and select inspect element. This brings up the actually relevant dev tools.

I hope the docs/guides will be updated to reflect this note. I wasted a bunch of time because of this.

2 Likes

Ctrl-Alt-I is what you need :wink:

Interesting, for me that was exactly the window that didn’t work. By didn’t work I mean it was the console for the Beaker electron app not MY app and didn’t contain any console.log output or variables. Only by going through the inspect element window was I able to see my js shell.

1 Like

Well that’s odd. :thinking:

Aha, Yeh we can make this clearer for sure, and update the docs :+1:

Thanks for pointing it out, @waynenilsen!

I’ve setup a task to track this.

2 Likes

Samesies!

My approach has been to open the page in Firefox and Chromium to debug as much as possible (non-SAFE related debugging, of course). I don’t know why I debug with both. Habit from web dev I guess.

EDIT: With the SAFE Browser, instead of console.log(), I use the following code:

// Status element for logging.
var status_el = document.getElementById('log_status');

// Log text to status element.
// Returns the status element.
function log_status(text) {
  if ((status_el === undefined) || (status_el === null)) {
    return;
  }

  status_el.textContent = text;
  return status_el;
}

Somewhere in my HTML is <P id="log_status"></P>. Then I can do log_status('debug goes here: ' + obj.param). You could probably even override console.log = log_status, but I wouldn’t.

1 Like