1375328 - Use single quotes to wrap strings in reps to require less escaping for JSON / HTML strings

Status: RESOLVED FIXED

(DevTools :: Console, enhancement, P3)

Description

[Oriol Brufau [:Oriol]]

Consider this simple code:

   JSON.stringify({a:'"'})

How do various browsers display this?

 - Firefox with old console, Edge, Chrome:
   "{"a":"\""}"
   It's understandable.

 - Firefox with new console before bug 1342526
   {"a":"\""}
   It's great.

 - Firefox with new console after bug 1342526
   "{\"a\":\"\\\"\"}"
   It's completely unintelligible.

Comment 1

[Nicolas Chevobbe [:nchevobbe][PTO - back January 2nd]]

Hi Oriol,

Could you explain why you need to do this ?
I know the output is a bit hard to read, bit it is correct.
If you want something more readable, you can log the object directly.
And if you need to copy it to clipboard, you can use `copy({a:'"'})`.

Anyway, we can maybe wrap strings with backtick quotes (`), instead of double quotes ("), we'd still have to escape any ` character in the string, but I guess it is less common than the double quote.

With you test case, we'd have `{a: '"'}` which is nicer to read. But, this is something new, and I don't know if it could be an issue for users.

Tom, what do you think of this ?

Comment 2

[Oriol Brufau [:Oriol]]

I need to do this because sometimes I want to see my JSON strings, and JSON strings usually contain lots of quotes.

The output is a correct string literal which, when evaluated, produces the given string, yes. But I don't think this is a good way to represent a string.

About using backticks, if you want to display a template literal, you will need to escape these: $\`

You can also stop attempting to show a literal. Similarly, if I enter ({}), the console shows Object {  }, which is not a valid object initializer.

Comment 3

[Tom Tromey :tromey]

(In reply to Nicolas Chevobbe [:nchevobbe] from comment #1)
> Hi Oriol,

> I know the output is a bit hard to read, bit it is correct.
> If you want something more readable, you can log the object directly.

Or use console.log, which doesn't (and shouldn't) do any extra quoting.

> Anyway, we can maybe wrap strings with backtick quotes (`), instead of
> double quotes ("), we'd still have to escape any ` character in the string,
> but I guess it is less common than the double quote.

> Tom, what do you think of this ?

To clarify a bit - my view is that the console is a REPL for javascript and that it should:

1 Display the results unambiguously - previously there were problems where one could confuse
  strings for other literals;
2 Not drop important information - previously in some scenarios reps would drop a \n;
3 Emit syntactically valid literals, so a result can be cut and pasted, and because doing
  it this way means that the quoting rules are both unambiguous and well-known

This bug is asking either for #1 or #3 to be changed.  Obviously I'd rather not do this,
but especially not #1, which seems like it would lead to confusing results.  Here one could
use console.log, or simply not call JSON.stringify.

While I like #3 as a principle, it seems on shakier ground, because we already truncate strings
(and object) with ellipses, and as Oriol points out, we print that prefix.
So perhaps undoing some of the quoting would be ok (I mean, not to
me, see above, but YMMV); provided that #2 isn't violated in the process.

Using backquotes would be fine by me, but I also worry whether it's too unusual.

Comment 4

[Brian Grinstead [:bgrins]]

Another option is to do what node does and wrap it in single quotes:

> JSON.stringify({a:'"'})
'{"a":"\\""}'

Comment 5

[Oriol Brufau [:Oriol]]

(In reply to Tom Tromey :tromey from comment #3)
> previously there were problems where one could confuse strings for other literals;

If you want to distinguish strings from other things, what about inserting quotes with unselectable ::before and ::after pseudo-elements and with e.g. black color, and placing the raw string in between with --string-color color?

(In reply to Brian Grinstead [:bgrins] from comment #4)
> Another option is to do what node does and wrap it in single quotes:

Single quotes would definitely be better for JSON, not sure about other cases. Maybe the console could count how many single and double quotes are in the string, and use the less frequent one for the literal?

Or add some pref so that users can decide how to display strings.

Comment 6

[Brian Grinstead [:bgrins]]

(In reply to Oriol [:Oriol] from comment #5)
> (In reply to Brian Grinstead [:bgrins] from comment #4)
> > Another option is to do what node does and wrap it in single quotes:
> 
> Single quotes would definitely be better for JSON, not sure about other
> cases. Maybe the console could count how many single and double quotes are
> in the string, and use the less frequent one for the literal?

I thought about this too, but was hoping to keep it simpler.  And since JSON.stringify uses double quotes (as does innerHTML) I would be OK with just switching.

> Or add some pref so that users can decide how to display strings.

I'd prefer to not do that

Comment 7

[Nino Filiu]

Hello!

Any news on this issue? I asked about it on Stack Overflow but it brought me back here ^^

It really looks like simply replacing the double quotes by single quotes would make logged JSON and HTML strings more readable while still fulfilling @tromey's three technical requirements. After all, Node is already doing that.

Correct me if I am wrong but I think there's only a few lines two tweak here to make it work.

Anybody working on it? I'd be happy to do it myself although I'll have to learn how to contribute to the Mozilla code base :)

Comment 8

[Oriol Brufau [:Oriol]]

It's reassuring to know that I'm not the only one annoyed by the current behavior :)
Nobody was working on it, so I'm assigning it to you.
You can read https://firefox-source-docs.mozilla.org/setup/index.html to know how to build and contribute to Firefox.

Comment 9

[Nino Filiu]

Ok perfect! I'll do that before next year (lol)

Comment 10

[Nino Filiu]

Attachment: Bug 1375328 - Use single quotes to wrap strings in reps r=oriol

Comment 11

[BugBot [:suhaib / :marco/ :calixte]]

The bug assignee didn't login in Bugzilla in the last 7 months.
:nchevobbe, could you have a look please?
For more information, please visit auto_nag documentation.

Comment 12

[Oriol Brufau [:Oriol]]

It's worth noting that Chromium does this now:

• If the string doesn't contain ', uses ' as the delimiter.
• Else, if the string doesn't contain ", uses " as the delimiter.
• Else, if the string doesn't contain ` nor ${, uses ` as the delimiter.
• Else, uses ' as the delimiter, escaping ' characters.

Logic in https://source.chromium.org/chromium/chromium/src/+/main:third_party/devtools-frontend/src/front_end/core/platform/string-utilities.ts;drc=22a372d445c3f8cff00c2cfe48cb7373165bcd9d;l=71-85

That's better than Firefox.

Also see https://bugs.chromium.org/p/chromium/issues/detail?id=1208389

We had previously changed the display of strings in the DevTools Console to properly escape special characters in a way that the displayed string is always a valid JavaScript (and JSON) string and can be copied verbatim into source code. That approach uses JSON.stringify() to accomplish this. However for the human eye that can be difficult to consume, and we should try to be a bit smarter about the concrete way in which we display strings (using ", ', or ` as appropriate to minimize the escaping like the Node.js REPL does).

Comment 14

[Oriol Brufau [:Oriol]]

Attachment: Bug 1375328 - Allow single quotes and backticks to quote strings in reps. r?nchevobbe

This will benefit strings coming from outerHTML or JSON.stringify(), which tend
to contain lots of double quotes that had to be escaped.

That's the same approach as Chromium, except that it prioritizes double quotes
over single ones to reduce the change.

Comment 15

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/643aff3be3dc
Allow single quotes and backticks to quote strings in reps. r=nchevobbe

Comment 16

[Iulian Moraru]

https://hg.mozilla.org/mozilla-central/rev/643aff3be3dc