Bug 142322 – Web Inspector: Better Console Previews for Arrays / Small Objects

• Status: RESOLVED
• Resolution: FIXED
• Component: Web Inspector

[Joseph Pecoraro]

* SUMMARY
Better Console Previews for Arrays / Small Objects.

Currently:

  js> [[1], ["2"], [3]]
  <-  ▶︎ [Array, Array, Array] (3)

  js> [[[[1]]]]
  <-  ▶︎ [Array] (1)

  js> [{a:1}]
  <-  ▶︎ [Object] (1)

We should come up with a better strategy for Array Previews.

[Radar WebKit Bug Importer]

<rdar://problem/20050336>

[Joseph Pecoraro]

The way this worked before, is if an array was printed to the console it would auto-fetch one level deep and print that as an object. Currently, we drop the second level fetch and just go with the Preview, which for non-object data gets us less information.

Things we may want to try:

  - do a second level fetch for Arrays like we used to
    -> handles most of the cases above and is pretty straightforward

  - do a "n-deep" level fetch for Arrays/Objects that are simple
    - simple defined as: (arrays of length < 2, objects with less then 2 properties, non-cyclical)
    -> handles all cases above, but is more complex

  - proactively send out better previews for Arrays based on either of the above strategies
    - more complete snapshots instead of second level fetch where the objects could change
    - won't work with legacy backends since this would require InjectedScript changes

[Joseph Pecoraro]

Other examples and their Current behavior:

  js> ({a:[1]}) // and what if the inner array had 10 Objects
  <-  ▶︎ {a: Array}

  js> ({a:{b:1}}) // and what if the inner object had 10 properties
  <-  ▶︎ {a: Object}

[Timothy Hatcher]

I like this and is what I really wanted to see. If the object graph is simple enough, show everything. Basically JSON previews. Once it is "complex" stop. You outline the right approaches. Some n-level n-length sounds right.

[Timothy Hatcher]

This also makes me wonder if we should make the InjectedScript source be somthing the front end sends to the back end to inject. That way we can update it on older devices (once that support ships on those devices). I guess the InjectedScriptHost still would be a bottleneck…

[Joseph Pecoraro]

Created attachment 248712 [details]
[PATCH] Proposed Fix

[Joseph Pecoraro]

This handles small Arrays / Objects to a depth of 3. It seems okay in practice. There is probably still room for improvement, but for the tests mentioned in this bug it worked well. Of course there is no legacy support for older iOSs.

[Timothy Hatcher]

Comment on attachment 248712 [details]
[PATCH] Proposed Fix

View in context: https://bugs.webkit.org/attachment.cgi?id=248712&action=review

> Source/JavaScriptCore/inspector/InjectedScriptSource.js:1172
> +        if (seen.has(object))

seen might be better called knownObjects.

[Joseph Pecoraro]

<http://trac.webkit.org/changeset/181612>