output: > Object (Note: > represents a tree expander)
[a#jq-siteLogo jquery.com, a jquery.com, a plugins.jquery.com, a ui.jquery.com, a blog.jquery.com, a About, a Donate, a Downloading_jQuery, a docs.jquery.com, a Tutorials, a dev.jquery.com, a Discussion, a.jq-thickbox Tutorials, a.jq-thickbox Tutorials, a.jq-thickbox Tutorials, a.jq-radioToggle detail?nam...3.2.min.js, a.jq-radioToggle detail?nam...y-1.3.2.js, a.jq-google www.google.com, a.jq-dell www.dell.com, a.jq-boa www.bankof...merica.com, a.jq-mlb www.mlb.com, a.jq-digg www.digg.com, a.jq-nbc www.nbc.com, a.jq-cbs www.cbs.com, a.jq-netflix www.netflix.com, a.jq-technorati www.technorati.com, a.jq-mozilla www.mozilla.org, a.jq-wordpress www.wordpress.org, a.jq-drupal www.drupal.org, a.jq-runCode Tutorials, a docs.jquery.com, a How_jQuery_Works, a Tutorials, a Using_jQue..._Libraries, a docs.jquery.com, a Discussion, a Downloading_jQuery, a Authoring, a newticket, a jobs.jsninja.com, a aHR0cDovL2...VyeS5jb20v, a aHR0cDovL2...VyeS5jb20v, a aHR0cDovL2...VyeS5jb20v, a aHR0cDovL2...VyeS5jb20v, a aHR0cDovL2...VyeS5jb20v, a.jq-rss feed, a blog.jquer...uery-vol-5, a jquery-ui-...o-controls, a jquery-132-released, a blog.jquery.com, a feed, a.jq-bookImg 1802090m1d2r, a 1802090m1d2r, a.jq-buyNow 1802090m1d2r, a.jq-bookImg idevaffili...?id=648_93, a idevaffili...?id=648_93, a.jq-buyNow idevaffili...?id=648_93, a ejohn.org, a Contributors, a.jq-mediaTemple mediatemple.net, a Downloading_jQuery, a docs.jquery.com, a Tutorials, a dev.jquery.com, a Discussion]
I feel that Firefox really produces what the developer is expecting to see when evaluating expressions that generate collections.
There should be some quick little function you could apply to $('a') to get what you want, you would think (I'm not a jquery expert).
Personally, I like the output as is, BUT, it might be nice to filter the properties/indices of the expanded objects to not show functions, not show inherited-from-prototype properties.
The jQuery documentation specifies the following:
$('a') returns an Array<Element(s)>
The documentation can be found here:
It's difficult to determine the best thing to actually display, in a general sense. What might be interesting to think of is to allow objects returned from frameworks like jQuery to make a determination of how to display themselves. I really like the structured output in the console that Web Inspector applies, but poking through the jQuery output, it's also clear that it's a bit too busy. What if jQuery objects added something like a "web_inspector_console_display" function which, when invoked, rendered output relevant to the console. Might be a string, and then just printed, or maybe it would a DOM tree which would be rendered inline. You could then imagine that folks using jQuery would then be able to further enhance that functionality in some way through new jQuery APIs.
In terms of trying to make this browser agnostic, perhaps the relevant property would be named "console_display_result".
There's some precedence here from the Smalltalk world; there, some implementations supported specialized output for the debugger via a debugPrintTo:aStream method, implemented on Object, whose implementation was just "self printTo: aStream". Classes could customize what was displayed in debugger single-line views by overriding the method.
I like the way we output daya now, and feel the way Firebug dumps everythign as a large string is not as elegant.
(In reply to comment #3)
> What if jQuery objects added something like a "web_inspector_console_display"
> function which, when invoked, rendered output relevant to the console. Might
> be a string, and then just printed, or maybe it would a DOM tree which would be
> rendered inline. You could then imagine that folks using jQuery would then be
> able to further enhance that functionality in some way through new jQuery APIs.
> In terms of trying to make this browser agnostic, perhaps the relevant property
> would be named "console_display_result".
I can see this being useful. I don't think underscores are a good fit here. Maybe "toConsoleResult" or "toConsoleMessage"? Matching the the "toString" and "toValue" concept.
Objective-C also has this with the "description" method.
It seems that there are a lot of implementation details that are presented when an array of objects is the result-set. For example, using the google.com:
> var links = document.getElementsByTagName( 'a' )
=> [object NodeList]
=> <a href="http://images.google.com/imghp?hl=en&tab=wi" onclick="gbar.qs(this)" class="gb1">Images</a>
Note: The above result-set generates the following:
and so on
This is nice but something native within WebKit would be nicer.
(In reply to comment #3)
> By collections, do you mean arrays. As in arrays vs. objects that aren't
> arrays? It's already a bit difficult to make a determination, at least in
(Patrick asked for my input, I work on Firebug).
This problem is more subtle and complicated than most people realize. Firebug has gone through a number of efforts and our test suite includes array tests for this reason.
Given an object one wants to present it to users in a way that is most useful to them: if they think of its as an array, then it should be presented as an array. Unfortunately for us, the set of types which users think of as arrays is not known to us. Oh and we can't read their minds either ;-).
Firebug uses a combination of type testing and object property analysis:
(The YUI license bit should be removed, the code has long since diverged from them and it was only one function at the time).
This seems to have been fixed a while ago, presumably by pfeldman. On ToT (r66878), for
on jquery.com I get an array:
<a id="jq-siteLogo" href="http://jquery.com" title="jQuery Home">…</a>,
<a href="http://jquery.com/" title="jQuery Home">jQuery</a>,
<a href="http://plugins.jquery.com/" title="jQuery Plugins">Plugins</a>,
<a href="http://jqueryui.com/" title="jQuery UI">UI</a>,
<a href="http://meetups.jquery.com/" title="jQuery Meetups">Meetups</a>,
<a href="http://forum.jquery.com/" title="jQuery Forum">Forum</a>,
<a href="http://blog.jquery.com/" title="jQuery Blog">Blog</a>,