Bug 25724 - Incorrect collection output for Javascript console evaluation
Summary: Incorrect collection output for Javascript console evaluation
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Web Inspector (Deprecated) (show other bugs)
Version: 528+ (Nightly build)
Hardware: All All
: P2 Enhancement
Assignee: Nobody
URL: http://www.jquery.com
Keywords:
Depends on:
Blocks:
 
Reported: 2009-05-12 04:02 PDT by Conrad Taylor
Modified: 2010-09-07 08:56 PDT (History)
5 users (show)

See Also:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description Conrad Taylor 2009-05-12 04:02:10 PDT
Incorrect output when evaluating Javascript expressions that return collection.  For example, opening the Web Inspector on http://www.jquery.com:

WebKit:  

input:  $('a')

output:  > Object   (Note:  > represents a tree expander)

Firefox 3.0.10:

input:  $('a')

output:

[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.
Comment 1 Patrick Mueller 2009-05-19 17:56:18 PDT
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.
Comment 2 Conrad Taylor 2009-05-20 02:34:22 PDT
The jQuery documentation specifies the following:

$('a') returns an Array<Element(s)>

The documentation can be found here:

http://docs.jquery.com/Selectors

BTW, there are additional functions that can be applied to the result-set.  However, it would be nice to have functionality in a Javascript console that is consistent with the result-set expected from the method that's being
invoked.  Next, this isn't specific to a particular Javascript library but it has to do with the support of collections as result-set.  Finally, I would like to see Javascript console support of collections similar to that of non-collections.
Comment 3 Patrick Mueller 2009-05-20 07:52:08 PDT
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 user-land JavaScript, whether an object is an array or not.

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.
Comment 4 Timothy Hatcher 2009-05-20 08:17:08 PDT
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.
Comment 5 Conrad Taylor 2009-05-20 09:29:37 PDT
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' )
=> undefined

> links
=> [object NodeList]

> links.length
=> 30

> links[0]
=> <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:

ATTRIBUTE_NODE: 2
CDATA_SECTION_NODE: 4
COMMENT_NODE: 8
DOCUMENT_FRAGMENT_NODE: 11
DOCUMENT_NODE: 9
DOCUMENT_POSITION_CONTAINED_BY: 16
DOCUMENT_POSITION_CONTAINS: 8
DOCUMENT_POSITION_DISCONNECTED: 1
DOCUMENT_POSITION_FOLLOWING: 4
DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC: 32
DOCUMENT_POSITION_PRECEDING: 2
DOCUMENT_TYPE_NODE: 10
ELEMENT_NODE: 1
ENTITY_NODE: 6
ENTITY_REFERENCE_NODE: 5
NOTATION_NODE: 12
PROCESSING_INSTRUCTION_NODE: 7
TEXT_NODE: 3

and so on

I'm not sure if the level of detail is really needed but I do agree with some type of message send on the returned object  is an excellent idea for writing the object to the output stream.  I guess what you're saying would be similar to Ruby's Object#to_s.  In any case, I found some interesting Javascript that can add a FireBug console into Webkit here:

http://getfirebug.com/lite/Safari.html

This is nice but something native within WebKit would be nicer.
Comment 6 johnjbarton 2009-05-20 16:02:56 PDT
(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
> user-land JavaScript, whether an object is an array or not.
> 
(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:
http://code.google.com/p/fbug/source/browse/branches/firebug1.4/content/firebug/reps.js#448

(The YUI license bit should be removed, the code has long since diverged from them and it was only one function at the time).

HTH, 
jjb
Comment 7 Alexander Pavlov (apavlov) 2010-09-07 08:56:19 PDT
This seems to have been fixed a while ago, presumably by pfeldman. On ToT (r66878), for
$('a')
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>​, 
...
]