Bug 17229 – Inspector should show properties of all JS objects in Console

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

[Adam Roben (:aroben)]

The Inspector should show properties of all JS objects in the Console, and give you a way to inspect those properties.

[Adam Roben (:aroben)]

<rdar://problem/5732829>

[Adam Roben (:aroben)]

Perhaps we could add a panel/tab similar to Visual Studio's QuickWatch window that lets you dig down into the properties of one object.

[Konstantin Käfer]

Created attachment 26296 [details]
allows inspection of objects by just printing them to the console

[Konstantin Käfer]

Created attachment 26297 [details]
shows some example inspected objects

[Konstantin Käfer]

Created attachment 26301 [details]
changelog patch

[Konstantin Käfer]

Created attachment 26302 [details]
updated patch which includes the changelog

[Konstantin Käfer]

Created attachment 26303 [details]
patch with more information in changelog

[Konstantin Käfer]

Created attachment 26305 [details]
do not print expandable objects in array literals

[Oliver Hunt]

I like the look of the output of this, but i'm not sufficiently familiar with inspector to have any idea as to whether the code is the best it could be.  Carrying the inline parameter around seems inelegant to me.

I was going to CC tim and adam, but they should already be getting mail -- can one of you guys look at this?

[Konstantin Käfer]

Created attachment 26310 [details]
better patch which doesn't include the bogus select field

[Timothy Hatcher]

Comment on attachment 26310 [details]
better patch which doesn't include the bogus select field

Patch looks great! Some minor comments. r- for ow for some clean up.

> -                formattedResult.appendChild(formatForConsole(parameters[i]));
> +                formattedResult.appendChild(WebInspector.console._format(parameters[i]));

Why this change? The formatForConsole function just calls WebInspector.console._format.

> +        if (x instanceof Node) {
> +            while (this.titleElement.firstChild) {
> +                this.titleElement.removeChild(this.titleElement.firstChild);
> +            }

You should use this.titleElement.removeChildren() instead of the while loop (a prototype extension we have in utilities.js.)

> +        }
> +        else {

The "else {" should be on the previous line, so it is "} else {".

> +.console-formatted-object .section, .console-formatted-node .section {
> +  position: static;
> +}
> +

There should be 4 spaces here for the indent, not 2.

[Konstantin Käfer]

Created attachment 26335 [details]
updated patch with code style fixes

> > -                formattedResult.appendChild(formatForConsole(parameters[i]));
> > +                formattedResult.appendChild(WebInspector.console._format(parameters[i]));
> 
> Why this change? The formatForConsole function just calls
> WebInspector.console._format.

formatForConsole() passes the parameter true for inline, but that is not what we want in all cases. The attached patch fixes that and does treat "console.log(window, document)" as inline again (thus they won't be expnadable). Doing a "console.log(document)" (i.e. with only one element) will now trigger the expandable mode.

[Timothy Hatcher]

Comment on attachment 26335 [details]
updated patch with code style fixes

Nice work! Thanks for the patch!

[Oliver Hunt]

Committing to http://svn.webkit.org/repository/webkit/trunk ...
	M	WebCore/ChangeLog
	M	WebCore/inspector/front-end/Console.js
	M	WebCore/inspector/front-end/PropertiesSection.js
	M	WebCore/inspector/front-end/inspector.css
Committed r39537