1375752 - Visualize console.log empty string output

Status: VERIFIED FIXED

(DevTools :: Console, defect, P3)

Description

[shimscharf]

User Agent: Mozilla/5.0 (Windows NT 10.0; WOW64; rv:54.0) Gecko/20100101 Firefox/54.0
Build ID: 20170608105825

Steps to reproduce:

- open developer tools
- go to console
- type:

console.log("")


Actual results:

output:
blank line


Expected results:

""

output should be empty string within double quotations marks.
This would be consistent with output from console.log {a:""}

Comment 1

[shimscharf]

This could be a huge problem if the following occurs with debugging:

console.log("", true)

Actual output:
true

Expected output:
"", true

Comment 2

[Nicolas Chevobbe [:nchevobbe]]

Thanks for reporting shimscharf.
It's true that this is a bit confusing.
I think the idea to omit the quotes in the logged messages was to make them easier to read (`console.log("Hello", "world")` would be not that nice output as `"Hello" "world"`).
We might want to show those quotes when we have an empty string, since it would help the user to see if there's an issue with a variable for example.

The expected output would then be `"" true` (we don't insert comma between logged arguments).

What do you think of this Brian ? Is there something I miss ?

Comment 3

[shimscharf]

Hi,

Yes, that is correct, it should only apply to empty strings to display "" in red to match console string output.

Same as it does in console.log ({a:""}), and console.log([""])

The commas used to be there in old versions of Firebug -> sorry, just a habit of mine over the years.

Cheers,
Simon

Comment 4

[Nicolas Chevobbe [:nchevobbe]]

The work is likely to happen in the Reps repository on Github : https://github.com/devtools-html/devtools-core/issues/490

Comment 5

[Brian Grinstead [:bgrins]]

(In reply to Nicolas Chevobbe [:nchevobbe] from comment #2)
> Thanks for reporting shimscharf.
> It's true that this is a bit confusing.
> I think the idea to omit the quotes in the logged messages was to make them
> easier to read (`console.log("Hello", "world")` would be not that nice
> output as `"Hello" "world"`).
> We might want to show those quotes when we have an empty string, since it
> would help the user to see if there's an issue with a variable for example.
> 
> The expected output would then be `"" true` (we don't insert comma between
> logged arguments).
> 
> What do you think of this Brian ? Is there something I miss ?

We've discussed this further in https://github.com/devtools-html/devtools-core/issues/490 and https://github.com/devtools-html/devtools-core/pull/491#issuecomment-314853337

Comment 6

[Brian Grinstead [:bgrins]]

(In reply to shimscharf from comment #1)
> This could be a huge problem if the following occurs with debugging:
> 
> console.log("", true)
> 
> Actual output:
> true
> 
> Expected output:
> "", true

In this case we should at least follow the Node / Chrome convention and render:

 true

instead of:

true

It's subtle, but there is an implied space between log arguments which is something we are missing.

Comment 7

[Nicolas Chevobbe [:nchevobbe]]

It just occurred to me this morning that in the case we don't show quotes, we could render something like <empty string> to make it clear.
So here devtools/client/debugger/packages/devtools-reps/src/reps/string.js#77-83 , we could have something like:

if (!useQuotes && text == "") {
  return span({
    className: "empty-string-rep"
  }, "<empty string>")
} 

we could then style the empty-string-rep class with the comment color so it's a bit dimmed.

Comment 8

[Nicolas Chevobbe [:nchevobbe]]

Attachment: Bug 1375752 - Render empty strings as <empty string> in console. r=yzen.

This only affects console api calls where one of the
argument is an empty string. Since we don't quote
string arguments for those, it was difficult to spot
an empty string there.
Jest test are added, as well as a mochitest for the
console to make sure that we don't have unwanted
side effects (for evaluation results, object with
empty string properties, ...)

Comment 9

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/dadafea55f5d
Render empty strings as <empty string> in console. r=yzen.

Comment 10

[Daniel Varga [:dvarga]]

https://hg.mozilla.org/mozilla-central/rev/dadafea55f5d

Comment 11

[Peter Magyari (Desktop QA)]

Verified fixed on Windows 10, Mac 10.15 and Ubuntu 18.04 using Firefox 72.0a1 (20191128214853)

Comment 12

[prostyler]

What if I don;t want to see "<empty string>" in console, just a blank row? An option to set what is display for "" would be nice.

Comment 13

[prostyler]

(In reply to prostyler from comment #12)

What if I don't want to see "<empty string>" in console, just a blank row? An option to set what is display for "" would be nice.

Comment 14

[Nicolas Chevobbe [:nchevobbe]]

(In reply to prostyler from comment #12)

What if I don;t want to see "<empty string>" in console, just a blank row? An option to set what is display for "" would be nice.

You can achieve this by logging a space char (console.log(" ")) or a new line (console.log("\n")).

Comment 15

[prostyler]

Option for firefox, to display console.log('') | console.log(' ') | console.log('\n') as user want to, would be best. I simply cannot change the code that WAS displayed properly in firefox (also chrome/chromium and all browsers that use this engine).