Bug 159511 – Web Inspector, regression: JS/JSON pretty-printing sporadically broken in STP8

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

[Xavier Morel]

[In Safari 9.1.1 on El Capitan]
* Open web inspector
* Switch to network tab
* Navigate to google.com
* Type some stuff to trigger FAYT
* Select "search" network resource
* Click on "Pretty print" button

Expected: the resource result gets pretty-printed, the "Pretty print" button gets highlighted (blue font)
Result: expectations fulfilled

[Repeat same steps in STP8]

Expected: same as above
Result: the resource does not get pretty-printed, the "Pretty print" button remains inactive

[Radar WebKit Bug Importer]

<rdar://problem/27218435>

[Joseph Pecoraro]

The "application/json" content looks like:

    {"e":"...","c":-1,...}/*""*/

Pretty Printing fails because:
• It is an invalid JavaScript program. (Esprima Parse error)
• JSON.parse fails. (The comment at the end makes it invalid)

I suppose instead of JSON.parse we could try '(' + str + ')' and chopping off some pieces. That is rather unfortunate.

[Joseph Pecoraro]

Created attachment 283043 [details]
[PATCH] Proposed Fix

[Joseph Pecoraro]

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

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

> LayoutTests/inspector/formatting/formatting-json-expected.txt:51
> +PASS: Should not be able to not be evaluated to an object.

Typo =(

[Joseph Pecoraro]

Created attachment 283044 [details]
[PATCH] Proposed Fix

[WebKit Commit Bot]

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

Clearing flags on attachment: 283044

Committed r202933: <http://trac.webkit.org/changeset/202933>

[WebKit Commit Bot]

All reviewed patches have been landed.  Closing bug.

[Alexey Proskuryakov]

> • It is an invalid JavaScript program. (Esprima Parse error)
> • JSON.parse fails. (The comment at the end makes it invalid)

If this is neither valid JS not valid JSON, isn't misleading to pretty print it?

[Timothy Hatcher]

(In reply to comment #8)
> > • It is an invalid JavaScript program. (Esprima Parse error)
> > • JSON.parse fails. (The comment at the end makes it invalid)
> 
> If this is neither valid JS not valid JSON, isn't misleading to pretty print
> it?

It is not directly valid JS, but sites often take it and add parens to make it valid. That is what Joe did here.

[Joseph Pecoraro]

(In reply to comment #9)
> (In reply to comment #8)
> > > • It is an invalid JavaScript program. (Esprima Parse error)
> > > • JSON.parse fails. (The comment at the end makes it invalid)
> > 
> > If this is neither valid JS not valid JSON, isn't misleading to pretty print
> > it?
> 
> It is not directly valid JS, but sites often take it and add parens to make
> it valid. That is what Joe did here.

Correct.

It is not a valid JavaScript program, but it is a valid JavaScript object.

For example:

    "{a:1, b:2}"

Is not a valid JavaScript program:

    >>> {a:1, b:2}
    Unexpected token ':'. Parse error.:1

But it is a valid JavaScript object:

    >>> o = {a:1, b:2}
    [object Object]

A common practice among web pages is to wrap the input in parenthesis and eval it, or use it in a function call:

    var json; /* load "{a:1, b:2}" from network */


    var object = eval( '(' + json + ')' );

   
    


Which would produce the expected object:

    >>> o = eval('(' + "{a:1, b:2}" + ')')
    [object Object]

Because

[Joseph Pecoraro]

Finishing the comment:

---

A common practice among web pages is to wrap the input in parenthesis and eval it, or use it in a function call:

    var json; /* load "{a:1, b:2}" from network */

    // Eval with parenthesis to produce an object:
    var object = eval( '(' + json + ')' );

    // Eval with a function call providing the parens:
    eval( 'parseResponse(' + json + ')' );

Which would produce the expected object:

    >>> o = eval('(' + "{a:1, b:2}" + ')')
    [object Object]

This was a common practice before JSON.parse, and may still be in use to some degree.

In the case on google.com the content can not be JSON.parse'd directly, so I assume some approach like this, or knowing to strip off some characters, must be at play.

[Joseph Pecoraro]

I should also point out that object properties need to be double quoted in JSON, so the example given before would not satisfy JSON.parse:

    >>> JSON.parse("{a:1, b:2}")
    Exception: SyntaxError: JSON Parse error: Expected '}'