Techniques

Noah Isaacson edited this page Oct 11, 2013 · 9 revisions

Breadcrumbs

When printf-debugging objects from a function we often run the function repeatedly and each time look at a different aspect of the object.


// first run...
function foo(xulElement) {
    // ...
    alert('local name: ' + xulElement.localName);
    // ...
}

// uhm! the alert only shows us 'local name: ' and nothing after it,
// meaning that xulElement.localName is undefined.  what is
// xulElement, then?

// second run...
function foo(xulElement) {
    // ...
    alert('xul element: ' + xulElement);
    // ...
}

This quickly gets time-consuming if running foo() again requires a restart and lots of setup. Instead, do:


function foo(xulElement) {
    // ...
    top.el = xulElement;
    // ...
}

Then from MozRepl prompt:


repl> repl.print(top.el.localName);

repl> // previous command shows nothing, meaning localName is undefined
repl> top.el
"btnSave"

Ooops! Looks like someone passed an id instead of an element.

Scope sneaking

[TODO]

Surfacing

[TODO]

Auto-re-entering

When the browser reloads the page, the repl will return to its creation context since the page it’s working on disappears. If you want it to automatically re-enter the page, you can redefine the home function:

repl.home = function() { return this.enter(this._creationContext.content); }

Loading webpages

When loading webpages, the repl can return before the page finishes loading. You can use the document.readyState javascript command to ensure the page has finished loading and rendering before performing other actions such as extracting the html source code
readyState


repl> content.location.href = 'https://maps.google.com' repl> repl.enter(content) repl> document.readyState "loading" repl> document.readyState # wait a little while then call document.readyState again "loading" repl> document.readyState # wait a little while then call document.readyState again "interactive" repl> document.readyState # wait a little while then call document.readyState again "complete" repl> document.querySelector('html').outerHTML # now fetch the html of the rendered page "<html><head>...truncated here</head></html>" repl> window.$('html').html() # since we called repl.enter(content) above, global objects defined in the webpage are available inside the repl repl> $('html').html() # window prefix is not needed repl> console.log('this came from the repl') # log to the browsers console. Open up the develop tools first and go to the console tab to this output