44766 2010-08-27 08:17:14 -0700 Web Inspector: color-code property values in object notation. 2011-01-26 08:12:19 -0800 1 1 1 Unclassified WebKit Web Inspector (Deprecated) 528+ (Nightly build) All All RESOLVED FIXED P2 Normal --- 1 pfeldman pfeldman abarth bweinstein cowboy eric gianni joepeck keishi loislo mathias paulirish pfeldman pmuellr rik timothy webkit.review.bot yurys oldest_to_newest 270503 0 pfeldman 2010-08-27 08:17:14 -0700 See screenshot at http://code.google.com/p/chromium/issues/detail?id=52905. We don't color-code property values in object trees. 270506 1 65716 pfeldman 2010-08-27 08:24:27 -0700 Created attachment 65716 [PATCH] Proposed change. 270516 2 cowboy 2010-08-27 08:47:41 -0700 It's not just color-coding properties in object notation, but ensuring that values are displayed consistently (colors, surrounding quotes, etc) when either returned or logged (on their own, as an array member or object property). 270528 3 cowboy 2010-08-27 09:06:04 -0700 (btw thanks for addressing this so quickly) 270529 4 65716 pfeldman 2010-08-27 09:06:54 -0700 Comment on attachment 65716 [PATCH] Proposed change. Clearing flags on attachment: 65716 Committed r66225: <http://trac.webkit.org/changeset/66225> 270530 5 pfeldman 2010-08-27 09:07:05 -0700 All reviewed patches have been landed. Closing bug. 270531 6 pfeldman 2010-08-27 09:07:26 -0700 Here is what we do: - We color-code as follows: number: rgb(28, 0, 207); string, regex: rgb(196, 26, 22); null, undefined: rgb(128, 128, 128); - We quote strings and, surround regexes with // - I think we dump them consistently (individually, as array members and now with this change as properties) What exactly do you think is missing? (I don't think we should color-code functions and booleans). 270541 7 cowboy 2010-08-27 09:30:35 -0700 (In reply to comment #6) Pavel, in the console.log( "true", true ), the string logged is black and unquoted, making it indistinguishable from the boolean value. Can the string value be colored and quoted there as well? Also, have you considered a color like green for boolean values? Not that this is in any way critical, but a very quick visual distinction, like numbers, strings, undefined and null already have, could be very helpful for the most commonly logged types (which I'd imagine are string, number, boolean, undefined and null). 270545 8 pfeldman 2010-08-27 09:39:08 -0700 (In reply to comment #7) > (In reply to comment #6) > > Pavel, in the console.log( "true", true ), the string logged is black and unquoted, making it indistinguishable from the boolean value. Can the string value be colored and quoted there as well? > This is intentional (there is a special piece of code that handles it). The rationale is that console.log outputs messages for user, not a string values. In 99% of cases these are just service messages, no need to quote them - it clutters ui. As a result, console.log("Something went wrong") and evaluating something with "Something went wrong" string result renders differently. > Also, have you considered a color like green for boolean values? Not that this is in any way critical, but a very quick visual distinction, like numbers, strings, undefined and null already have, could be very helpful for the most commonly logged types (which I'd imagine are string, number, boolean, undefined and null). I don't have a strong opinion on this. I think color-coding null, undefined and quoting are critical. Rest is more of FireBug consistency. Too many colors clutter ui too... 270546 9 webkit.review.bot 2010-08-27 09:39:59 -0700 http://trac.webkit.org/changeset/66225 might have broken Qt Linux Release 270563 10 joepeck 2010-08-27 09:57:52 -0700 > > Pavel, in the console.log( "true", true ), the string logged is black and unquoted, > > making it indistinguishable from the boolean value. Can the string value be colored > > and quoted there as well? > > > > This is intentional [...] Pavel is correct. console.log() is logging a string to the console. It uses printf() style format, and for all extra arguments it conveniently prints them out as objects in the console. For example note the difference between: js> console.log("logging some objects %s %s", {a:1,b:2}, [1]) logging some objects Object Array js> console.log("logging some objects", {a:1,b:2}, [1]) logging some objects (triangle) Object [1] The first argument, when it is a string, is treated as a "printf" string allowing formatting for numbers, objects, etc. As Pavel mentions the typical use case is to just log some text. In those cases we would not want to print out the log messages formatted as a string. However, if the user has not provided a string as the first argument, it would not be very useful to convert that to a string and use it as a printf formatting string, so we just log the object nicely. If you want different logs you could do console.info(), console.error(), console.warn(). If you want to view the formatted version of a string you could use %o. js> console.log("Hello %o!", "World") Hello "World"! 65716 2010-08-27 08:24:27 -0700 2010-08-27 09:06:54 -0700 [PATCH] Proposed change. color_code text/plain 1286 pfeldman ZGlmZiAtLWdpdCBhL1dlYkNvcmUvQ2hhbmdlTG9nIGIvV2ViQ29yZS9DaGFuZ2VMb2cKaW5kZXgg NTAyMWRmMS4uOTczNzYwYyAxMDA2NDQKLS0tIGEvV2ViQ29yZS9DaGFuZ2VMb2cKKysrIGIvV2Vi Q29yZS9DaGFuZ2VMb2cKQEAgLTEsMyArMSwxMyBAQAorMjAxMC0wOC0yNyAgUGF2ZWwgRmVsZG1h biAgPHBmZWxkbWFuQGNocm9taXVtLm9yZz4KKworICAgICAgICBSZXZpZXdlZCBieSBOT0JPRFkg KE9PUFMhKS4KKworICAgICAgICBXZWIgSW5zcGVjdG9yOiBjb2xvci1jb2RlIHByb3BlcnR5IHZh bHVlcyBpbiBvYmplY3Qgbm90YXRpb24uCisgICAgICAgIGh0dHBzOi8vYnVncy53ZWJraXQub3Jn L3Nob3dfYnVnLmNnaT9pZD00NDc2NgorCisgICAgICAgICogaW5zcGVjdG9yL2Zyb250LWVuZC9P YmplY3RQcm9wZXJ0aWVzU2VjdGlvbi5qczoKKyAgICAgICAgKFdlYkluc3BlY3Rvci5PYmplY3RQ cm9wZXJ0eVRyZWVFbGVtZW50LnByb3RvdHlwZS51cGRhdGUpOgorCiAyMDEwLTA4LTI3ICBTaGVy aWZmIEJvdCAgPHdlYmtpdC5yZXZpZXcuYm90QGdtYWlsLmNvbT4KIAogICAgICAgICBVbnJldmll d2VkLCByb2xsaW5nIG91dCByNjYxODguCmRpZmYgLS1naXQgYS9XZWJDb3JlL2luc3BlY3Rvci9m cm9udC1lbmQvT2JqZWN0UHJvcGVydGllc1NlY3Rpb24uanMgYi9XZWJDb3JlL2luc3BlY3Rvci9m cm9udC1lbmQvT2JqZWN0UHJvcGVydGllc1NlY3Rpb24uanMKaW5kZXggYWFiOTU0Ni4uMDE1MDM5 YyAxMDA2NDQKLS0tIGEvV2ViQ29yZS9pbnNwZWN0b3IvZnJvbnQtZW5kL09iamVjdFByb3BlcnRp ZXNTZWN0aW9uLmpzCisrKyBiL1dlYkNvcmUvaW5zcGVjdG9yL2Zyb250LWVuZC9PYmplY3RQcm9w ZXJ0aWVzU2VjdGlvbi5qcwpAQCAtMTg0LDYgKzE4NCw4IEBAIFdlYkluc3BlY3Rvci5PYmplY3RQ cm9wZXJ0eVRyZWVFbGVtZW50LnByb3RvdHlwZSA9IHsKICAgICAgICAgICAgIHRoaXMudmFsdWVF bGVtZW50LmFkZFN0eWxlQ2xhc3MoImRpbW1lZCIpOwogICAgICAgICBpZiAodGhpcy5wcm9wZXJ0 eS52YWx1ZS5pc0Vycm9yKCkpCiAgICAgICAgICAgICB0aGlzLnZhbHVlRWxlbWVudC5hZGRTdHls ZUNsYXNzKCJlcnJvciIpOworICAgICAgICBpZiAodGhpcy5wcm9wZXJ0eS52YWx1ZS50eXBlKQor ICAgICAgICAgICAgdGhpcy52YWx1ZUVsZW1lbnQuYWRkU3R5bGVDbGFzcygiY29uc29sZS1mb3Jt YXR0ZWQtIiArIHRoaXMucHJvcGVydHkudmFsdWUudHlwZSk7CiAKICAgICAgICAgdGhpcy5saXN0 SXRlbUVsZW1lbnQucmVtb3ZlQ2hpbGRyZW4oKTsKIAo=