Bug 101504 – Web Inspector: make command line API available within snippets.

• Status: RESOLVED
• Resolution: INVALID
• Component: Web Inspector (Deprecated)

[Pavel Feldman]

Feedback from the user: as a side question/request, can we get Snippets execute under console's context? I mean access to great stuff like copy(), $0, $1, $_ inside snippet code? I think that would be very useful, currently I end up copy-pasting some of my saved snippets into the console instead of just pressing the play button...

[Dmitry Pashkevich]

Basically I want to be able to save all the cool stuff I can do in console as snippets for further reuse. Obviously the use cases aren't limited to mere logging but also injecting more advanced pieces of code of debugging an application.

Here are some of them off the top of my head:

* Extract some data from a webpage (current page or fetched via XHR) and output it to console, or better copy() it directly to clipboard
* Write some quick validation code and output assertions to console, or maybe copy() directly to clipboard
* Perform common tasks specific to js frameworks (see below)
* Quickly perform some tasks on html elements by selecting them on the Elements panel and executing a snippet (see below)

More concrete examples of snippets I use quite often:

// Monitor events on current element
monitorEvents($0);

// Append an empty div to current element
$0.appendChild(document.createElement('div'))

// "Duplicate down" current element
(function() {

    function dupeDown(el) {
        var c = el.cloneNode(true),
            next = el.nextSibling;

        c.id && c.removeAttribute('id');

        el.parentNode.insertBefore(c, next);    // same as appendChild if next is null
    }

    dupeDown($0);
})();

Some more snippets specific to ExtJS framework:

// Get component over selected DOM node
Ext.getCmp($0.id);

// Capture all component events by selected DOM node in Inspector
Ext.util.Observable.capture(Ext.getCmp($0.id), function(evname) {console.log(evname, arguments);})


Ideally I would love if I could tie some of the snippets directly to context menu in Elements panel (or I should just create a browser extension) but Snippets seem like great generic tool for quick hacking.

[Dmitry Pashkevich]

By the way, selecting all text in a snippet and clicking "Evaluate in Console" from the context menu (as suggested by Pavel Feldman) doesn't work as expected: the code still doesn't have access to CommandLine API functions like copy().