[Webkit-unassigned] [Bug 61427] Web Inspector: improve output of console.log(object)

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=61427





--- Comment #1 from Pavel Feldman <pfeldman at chromium.org>  2011-05-27 12:41:34 PST ---
(In reply to comment #0)
> Created an attachment (id=94751)
 --> (https://bugs.webkit.org/attachment.cgi?id=94751&action=review) [details]
> console.log(obj) output
> 
> Take a look at attached mockup.
> 
> The problem is console.log and console.dir don't show keys and values of an object until I click on ▶.
> 
> If you like the idea then could you give me some pointers to getting started. Which files should I edit?

The screenshot looks nice, but we need to figure out the way that does not regress performance.

- As if today, we issue single "Runtime.evaluate" request to the backend to get a resulting object handle. We render it as "> Classname" ("> Object" in your case).
- Upon expansion, we send additional request "Runtime.getProperties" that returns properties of the object.

In your case, we would need to send evaluate, and, in case of "object" type result, we should query for its properties immediately. However, this will be slow for "window" object due to large amount of properties.

Object handle that is returned from "Runtime.evaluate" has "description" property among others. This description property is computed in InjectedScriptSource.js (you will also find source code for evalute and getProperties there). One of the solutions would be to pass optional "formatter" script snippet to the "evaluate" and other methods that would calculate object's description. You will then be able to inject a little snippet that traverses 10 first object properties (or similar), formats them as JSON and sends them back. Or we could make this formatter static so that you could assign it once (probably a better solution).

Files you will need to touch are:
- Inspector.json to declare new setFormatterScript message in Runtime domain
- InjectedScriptSource.js - add setFormatter, modify evaluate, getProperties logic to use new formatter
- InjectedScript.h/cpp - API to InjectedScriptSource.js
- Formatter code in ConsoleView.js and ObjectPropertiesSection.js so that they were using "description" as they should.

I am probably forgetting something, but it should give you a clue on the scope.

-- 
Configure bugmail: https://bugs.webkit.org/userprefs.cgi?tab=email
------- You are receiving this mail because: -------
You are the assignee for the bug.