Problem with inserting data to app's own container

[BryanB]

As an aside, I have had some problems debugging with the SAFE Browser. Someone else posted about that, too:

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 was…

Here’s a snippet of code I have been using to debug within the browser:

// Status element for logging.
var status_el = null;

function set_logger(element_id) {
  status_el = document.getElementById(element_id);
  return status_el;
}

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

  if ((status_el.tagName === 'UL') || (status_el.tagName === 'OL')) {
    // Log using LIs if the element is a list.
    var item = document.createElement('LI');
    item.textContent = text;
    status_el.appendChild(item);
  } else {
    // Replace the element's textContent otherwise.
    status_el.textContent = text;
  }
  return status_el;
}

So I call set_logger(some_id); in my page JS and have some element with id="some_id". If it is a UL or OL, LIs will be appended to the DOM for each message, giving you a history. If the element is anything else, it’s textContent is overwritten.