30974 2009-10-31 06:18:09 -0700 Web Inspector: Pretty print array-like objects 2010-08-12 16:08:21 -0700 1 1 1 Unclassified WebKit Web Inspector (Deprecated) 528+ (Nightly build) All All RESOLVED FIXED P2 Normal --- 0 keishi webkit-unassigned abarth bweinstein joepeck john.david.dalton kangax keishi oliver pfeldman pmuellr rik timothy oldest_to_newest 159554 0 keishi 2009-10-31 06:18:09 -0700 I think jQuery users would like to have things like jQuery(document) logged as an array. I don't want to treat jQuery special so why not log all objects with "length" property as an array. 159555 1 42255 keishi 2009-10-31 06:20:12 -0700 Created attachment 42255 proposed patch 159562 2 timothy 2009-10-31 08:25:58 -0700 This seems fine to me. What does everyone else think? Joe? 159567 3 pmuellr 2009-10-31 10:06:34 -0700 I guess the question is, what kind of output do you get if you print an object which happens to have a length property but is not actually an array? Won't it skip over all keys that aren't in the range 0..length? Which is probably all the keys? Here's an example session, which shows the (potential) problem: > x = [1,2,3] [1, 2, 3] > x.a = 4 4 > x [1, 2, 3] woops, where's x.a printed??? Personally, it seems like it'd be more consistent to alway print arrays and objects the same way; both are indexed collections, but one has a constrained set of index values. Maybe instead we need to have different ways to print different representations - different functions, or a "mode" switch, or something. But I don't have much skin in the game here - I rarely print array-like things in the console. Objects, all the time, but for some reason, almost never arrays. 159570 4 joepeck 2009-10-31 10:16:25 -0700 (In reply to comment #2) > This seems fine to me. What does everyone else think? Joe? This seems like a good, future-proof way to handle things. > Personally, it seems like it'd be more consistent to alway print arrays and > objects the same way; both are indexed collections, but one has a constrained > set of index values. I believe that is what "console.dir" is for (poorly named from the Firebug API): > var x = [1,2,3]; > x.a = 4; > console.dir(x) Array 0: 1 1: 2 2: 3 a: 4 > But I don't have much skin in the game here - I rarely print array-like things > in the console. Objects, all the time, but for some reason, almost never > arrays. Sometimes printing objects requires a lot of scrolling for property/values pairs that are really short (multiple could fit on a line). I like the compactness of the Array printing. 159571 5 timothy 2009-10-31 10:22:20 -0700 To force object output for DOM nodes, arrays and anything else, use the dir() function. A poorly named API that matches Firebug. So this will do what you want: > dir(x) Array 0: 1 1: 2 2: 3 a: 4 But I tend to agree, we should only do array formatting when we are positive about it. Maybe we should look for any non-numeric enumerable properties. If there are any, we just use object formatting. (This might be too slow for large arrays though…) 159578 6 pfeldman 2009-10-31 14:18:35 -0700 I would not be doing it actually. Even now, dumping document.body.childNodes on a large page might lead to unpleasant overhead. console.dir is what users do and the heavy result is predictable there. Btw, I experience difficulties parsing document.body.childNodes output. Show we print cell-per-row with array index instead? 159608 7 keishi 2009-10-31 19:15:04 -0700 (In reply to comment #6) > I would not be doing it actually. Even now, dumping document.body.childNodes on > a large page might lead to unpleasant overhead. console.dir is what users do > and the heavy result is predictable there. > > Btw, I experience difficulties parsing document.body.childNodes output. Show we > print cell-per-row with array index instead? I think both are valid concerns but should be a separate bug. The problem this addresses is when using jQuery, like 90% of the objects you deal with is this Array-like object. Having to click to check what's inside every time will big stress to the user. My worry is that the isArrayLike Object() logic too forgiving. This patch uses typeof o.length === "number" but I think there is a good chance that the user will have an object like this. var video = {title:"foo", length: 20, url: "http://foo/ba.mp4"} 164588 8 pfeldman 2009-11-18 09:08:41 -0800 What do we do to this one? Do we have an agreement here? (Are you expecting feedback?) 164607 9 timothy 2009-11-18 09:48:19 -0800 I still think we should try this: > Maybe we should look for any non-numeric enumerable properties. If there are > any, we just use object formatting. (This might be too slow for large arrays > though…) If there are tons of properties, just use the object display? 165204 10 oliver 2009-11-19 22:01:43 -0800 Just for reference ES5 defines (and we support) Array.isArray(obj) which returns true for real arrays. 167327 11 abarth 2009-11-30 12:22:10 -0800 Attachment 42255 passed the style-queue 176295 12 42255 abarth 2010-01-01 17:57:52 -0800 Comment on attachment 42255 proposed patch This patch has been sitting around for a long time and is clearly wrong as explained in Comment #7. 254515 13 pmuellr 2010-07-21 14:12:42 -0700 This feature has been addressed for jQuery via Bug 42758. Here's another thought. Have library implementors tell us when they create objects which should be displayed in the debugger as arrays. For instance, such objects could have a property like __debugDisplayAsArray. In the jQuery case, this could just be added to the jQuery prototype. Or it could be a property of the constructor function, in which case you could test with obj.constructor.__whatever ... 264026 14 joepeck 2010-08-12 15:21:26 -0700 (In reply to comment #20) > A more robust (though certainly not foolproof) check might be `(obj.length === > obj.length >>> 0) && "0" in obj`, or even iterating over the object's properties > until a numeric one is encountered. I think this check is pretty sufficient. > I also like kangax's proposal for a separate representation for array-like > objects, maybe something akin to `<List: [...]>`. I would, however, also like > to propose using that representation for NodeLists and HTMLCollections as well, > reserving `[...]` for arrays only. I also like this idea. Currently we treat NodeLists and Collections as arrays, and I think they deserve some differentiation. http://trac.webkit.org/browser/trunk/WebCore/inspector/front-end/InjectedScript.js > if (obj instanceof inspectedWindow.Array) > return "array"; > if (obj instanceof inspectedWindow.NodeList) > return "array"; > if (obj instanceof inspectedWindow.HTMLCollection) > return "array"; ------ It seems the major issue is: JavaScript libraries have "array like" collections which would be useful to display like arrays in the console! But, sometimes this could go wrong, or sometimes this could hide information. For those "sometimes" cases, like was mentioned above, I think it would be good enough to indicate that this is in fact not an array, but an "array like" object. As a user, if I saw this indicator it be helpful, and I might want to display this as an object instead. So, if that indicator was clickable, and could toggle between the array-like quick view and the complete object view that sounds best to me. Does that sound good? Is there a use case I'm missing? 264034 15 joepeck 2010-08-12 15:34:45 -0700 (In reply to comment #25) > You just made "window" render as [undefined] in the console :P Yah, I guess more have a "length" than I thought. Functions do too, but they have good instanceof and typeof semantics. > But since webkit already sets arguments's [[Class]] to "Arguments", the other > — more complex — versions could probably be avoided. "Arguments" is one of my major use-cases. I would like to see that arraylike. And you're right, this can be special cased differently. 264035 16 john.david.dalton 2010-08-12 15:35:21 -0700 For reference this is how Firebug detects array-like: http://code.google.com/p/fbug/source/browse/branches/firebug1.6/content/firebug/reps.js#560 This allows jQuery results, MooTools 1.3 results and anything with a length property and splice method to be displayed as an array. It covers the arguments object too. 264052 17 64278 pfeldman 2010-08-12 15:53:22 -0700 Created attachment 64278 [PATCH] Change suggested by John-David Dalton. 264059 18 64278 joepeck 2010-08-12 15:59:26 -0700 Comment on attachment 64278 [PATCH] Change suggested by John-David Dalton. > +++ b/WebCore/inspector/front-end/InjectedScript.js > + if (isFinite(obj.length) && typeof obj.callee === "function") // arguments. One space before the comment. ;) r=me 264064 19 pfeldman 2010-08-12 16:08:21 -0700 Fix suggested in Comment #16 is landed. Committing to http://svn.webkit.org/repository/webkit/trunk ... M WebCore/ChangeLog M WebCore/inspector/front-end/InjectedScript.js Committed r65278 42255 2009-10-31 06:20:12 -0700 2010-08-12 15:53:22 -0700 proposed patch arraylike.diff text/plain 1564 keishi SW5kZXg6IFdlYkNvcmUvQ2hhbmdlTG9nCj09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09 PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT0KLS0tIFdlYkNvcmUvQ2hhbmdlTG9n CShyZXZpc2lvbiA1MDM4MCkKKysrIFdlYkNvcmUvQ2hhbmdlTG9nCSh3b3JraW5nIGNvcHkpCkBA IC0xLDMgKzEsMTMgQEAKKzIwMDktMTAtMzEgIEtlaXNoaSBIYXR0b3JpICA8Y2FzZXkuaGF0dG9y aUBnbWFpbC5jb20+CisKKyAgICAgICAgUmV2aWV3ZWQgYnkgTk9CT0RZIChPT1BTISkuCisKKyAg ICAgICAgV2ViIEluc3BlY3RvcjogUHJldHR5IHByaW50IGFycmF5LWxpa2Ugb2JqZWN0cworICAg ICAgICBodHRwczovL2J1Z3Mud2Via2l0Lm9yZy9zaG93X2J1Zy5jZ2k/aWQ9MzA5NzQKKworICAg ICAgICAqIGluc3BlY3Rvci9mcm9udC1lbmQvSW5qZWN0ZWRTY3JpcHQuanM6CisgICAgICAgIChP YmplY3QudHlwZSk6CisKIDIwMDktMTAtMzAgIFpvbHRhbiBIb3J2YXRoICA8em9sdGFuQHdlYmtp dC5vcmc+CiAKICAgICAgICAgUmV2aWV3ZWQgYnkgRGFyaW4gQWRsZXIuCkluZGV4OiBXZWJDb3Jl L2luc3BlY3Rvci9mcm9udC1lbmQvSW5qZWN0ZWRTY3JpcHQuanMKPT09PT09PT09PT09PT09PT09 PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PQotLS0gV2Vi Q29yZS9pbnNwZWN0b3IvZnJvbnQtZW5kL0luamVjdGVkU2NyaXB0LmpzCShyZXZpc2lvbiA1MDMy MSkKKysrIFdlYkNvcmUvaW5zcGVjdG9yL2Zyb250LWVuZC9JbmplY3RlZFNjcmlwdC5qcwkod29y a2luZyBjb3B5KQpAQCAtMTE0Niw3ICsxMTQ2LDcgQEAgT2JqZWN0LnR5cGUgPSBmdW5jdGlvbihv YmopCiAgICAgICAgIHJldHVybiAob2JqLm5vZGVUeXBlID09PSB1bmRlZmluZWQgPyB0eXBlIDog Im5vZGUiKTsKICAgICBpZiAob2JqIGluc3RhbmNlb2Ygd2luLlN0cmluZykKICAgICAgICAgcmV0 dXJuICJzdHJpbmciOwotICAgIGlmIChvYmogaW5zdGFuY2VvZiB3aW4uQXJyYXkpCisgICAgaWYg KHR5cGVvZiBvYmoubGVuZ3RoID09PSAibnVtYmVyIikgLy8gQXJyYXkgJiBBcnJheS1saWtlIG9i amVjdAogICAgICAgICByZXR1cm4gImFycmF5IjsKICAgICBpZiAob2JqIGluc3RhbmNlb2Ygd2lu LkJvb2xlYW4pCiAgICAgICAgIHJldHVybiAiYm9vbGVhbiI7CkBAIC0xMTU2LDEwICsxMTU2LDYg QEAgT2JqZWN0LnR5cGUgPSBmdW5jdGlvbihvYmopCiAgICAgICAgIHJldHVybiAiZGF0ZSI7CiAg ICAgaWYgKG9iaiBpbnN0YW5jZW9mIHdpbi5SZWdFeHApCiAgICAgICAgIHJldHVybiAicmVnZXhw IjsKLSAgICBpZiAob2JqIGluc3RhbmNlb2Ygd2luLk5vZGVMaXN0KQotICAgICAgICByZXR1cm4g ImFycmF5IjsKLSAgICBpZiAob2JqIGluc3RhbmNlb2Ygd2luLkhUTUxDb2xsZWN0aW9uIHx8IG9i aiBpbnN0YW5jZW9mIHdpbi5IVE1MQWxsQ29sbGVjdGlvbikKLSAgICAgICAgcmV0dXJuICJhcnJh eSI7CiAgICAgaWYgKG9iaiBpbnN0YW5jZW9mIHdpbi5FcnJvcikKICAgICAgICAgcmV0dXJuICJl cnJvciI7CiAgICAgcmV0dXJuIHR5cGU7Cg== 64278 2010-08-12 15:53:22 -0700 2010-08-12 15:59:25 -0700 [PATCH] Change suggested by John-David Dalton. array_detection text/plain 1537 pfeldman ZGlmZiAtLWdpdCBhL1dlYkNvcmUvQ2hhbmdlTG9nIGIvV2ViQ29yZS9DaGFuZ2VMb2cKaW5kZXgg MDczYThlZS4uNzdkMDM3YSAxMDA2NDQKLS0tIGEvV2ViQ29yZS9DaGFuZ2VMb2cKKysrIGIvV2Vi Q29yZS9DaGFuZ2VMb2cKQEAgLTEsMyArMSwxMyBAQAorMjAxMC0wOC0xMiAgUGF2ZWwgRmVsZG1h biAgPHBmZWxkbWFuQGNocm9taXVtLm9yZz4KKworICAgICAgICBSZXZpZXdlZCBieSBOT0JPRFkg KE9PUFMhKS4KKworICAgICAgICBXZWIgSW5zcGVjdG9yOiBtaW1pYyBGaXJlQnVnJ3MgYXJyYXkg ZGV0ZWN0aW9uLgorICAgICAgICBodHRwczovL2J1Z3Mud2Via2l0Lm9yZy9zaG93X2J1Zy5jZ2k/ aWQ9MzA5NzQKKworICAgICAgICAqIGluc3BlY3Rvci9mcm9udC1lbmQvSW5qZWN0ZWRTY3JpcHQu anM6CisgICAgICAgIChpbmplY3RlZFNjcmlwdENvbnN0cnVjdG9yKToKKwogMjAxMC0wOC0xMiAg RGlyayBTY2h1bHplICA8a3JpdEB3ZWJraXQub3JnPgogCiAgICAgICAgIFVucmV2aWV3ZWQgc29y dCBvZiBYQ29kZSBwcm9qZWN0IGZpbGUuCmRpZmYgLS1naXQgYS9XZWJDb3JlL2luc3BlY3Rvci9m cm9udC1lbmQvSW5qZWN0ZWRTY3JpcHQuanMgYi9XZWJDb3JlL2luc3BlY3Rvci9mcm9udC1lbmQv SW5qZWN0ZWRTY3JpcHQuanMKaW5kZXggZjNlM2FlOS4uZTA4OTE5YSAxMDA2NDQKLS0tIGEvV2Vi Q29yZS9pbnNwZWN0b3IvZnJvbnQtZW5kL0luamVjdGVkU2NyaXB0LmpzCisrKyBiL1dlYkNvcmUv aW5zcGVjdG9yL2Zyb250LWVuZC9JbmplY3RlZFNjcmlwdC5qcwpAQCAtNTE5LDEyICs1MTksMTUg QEAgSW5qZWN0ZWRTY3JpcHQuX3R5cGUgPSBmdW5jdGlvbihvYmopCiAgICAgICAgIHJldHVybiAi ZGF0ZSI7CiAgICAgaWYgKG9iaiBpbnN0YW5jZW9mIGluc3BlY3RlZFdpbmRvdy5SZWdFeHApCiAg ICAgICAgIHJldHVybiAicmVnZXhwIjsKKyAgICAvLyBGaXJlQnVnJ3MgYXJyYXkgZGV0ZWN0aW9u LgorICAgIGlmIChpc0Zpbml0ZShvYmoubGVuZ3RoKSAmJiB0eXBlb2Ygb2JqLnNwbGljZSA9PT0g ImZ1bmN0aW9uIikKKyAgICAgICAgcmV0dXJuICJhcnJheSI7CisgICAgaWYgKGlzRmluaXRlKG9i ai5sZW5ndGgpICYmIHR5cGVvZiBvYmouY2FsbGVlID09PSAiZnVuY3Rpb24iKSAgLy8gYXJndW1l bnRzLgorICAgICAgICByZXR1cm4gImFycmF5IjsKICAgICBpZiAob2JqIGluc3RhbmNlb2YgaW5z cGVjdGVkV2luZG93Lk5vZGVMaXN0KQogICAgICAgICByZXR1cm4gImFycmF5IjsKICAgICBpZiAo b2JqIGluc3RhbmNlb2YgaW5zcGVjdGVkV2luZG93LkhUTUxDb2xsZWN0aW9uKQogICAgICAgICBy ZXR1cm4gImFycmF5IjsKLSAgICBpZiAodHlwZW9mIGluc3BlY3RlZFdpbmRvdy5qUXVlcnkgPT09 ICJmdW5jdGlvbiIgJiYgb2JqIGluc3RhbmNlb2YgaW5zcGVjdGVkV2luZG93LmpRdWVyeSkKLSAg ICAgICAgcmV0dXJuICJhcnJheSI7CiAgICAgaWYgKG9iaiBpbnN0YW5jZW9mIGluc3BlY3RlZFdp bmRvdy5FcnJvcikKICAgICAgICAgcmV0dXJuICJlcnJvciI7CiAgICAgcmV0dXJuIHR5cGU7Cg==