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