New issue
Advanced search Search tips

Issue 678585 link

Starred by 2 users

Issue metadata

Status: Fixed
Owner:
Closed: Feb 2017
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Windows
Pri: 2
Type: Bug



Sign in to add a comment

Developer console: Logging statement timestamps are wrapping incorrectly.

Reported by michiel1...@gmail.com, Jan 5 2017

Issue description

UserAgent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.87 Safari/537.36

Steps to reproduce the problem:
1. Open Chrome's developer console
2. run: `console.table([{ a: 1 }]);`
3. Observe the output

What is the expected behavior?
The dev console renders a table containing a single row.
The complete message isn't (much) higher than the content requires.

The timestamp should require more width if the output isn't very long.

What went wrong?
The timestamp in front of the message gets broken up into single characters, stretching the output message vertically to require 23 lines of height, for an output that's about 5 lines high.

Did this work before? N/A 

Chrome version: 55.0.2883.87  Channel: stable
OS Version: 10.0
Flash Version: Shockwave Flash 24.0 r0

This isn't specific to `console.table`.

Large strings result in the same issue, if:

- They're long enough to push the timestamp to break at single characters.
- They're short enough so that, when it wraps, it fills fewer than 23 lines.

When the dev console is 1000px wide, `console.log(new Array(1500).join('#'));` is a good example.
 
Capture.PNG
30.2 KB View Download
Here's an example of console.log producing a similarly broken output.
Capture.PNG
37.7 KB View Download

Comment 2 by ajha@chromium.org, Jan 6 2017

Labels: Needs-Triage-M55

Comment 3 by alph@chromium.org, Jan 10 2017

Owner: l...@chromium.org
Status: Assigned (was: Unconfirmed)

Comment 4 by l...@chromium.org, Jan 10 2017

Thanks for the report, screenshots are helpful.  We could apply a simple min-width: 80px to the timestamps.
timestampMinWidth80.png
62.8 KB View Download

Comment 5 by l...@chromium.org, Jan 10 2017

Labels: -Needs-Triage-M55
You're very welcome.

That looks much better already! I just noticed the odd wrapping on the first logging statement in your screenshot: Shouldn't the `<script` start next to the timestamp, instead of under it?

Comment 7 by l...@chromium.org, Jan 24 2017

Yes, there shouldn't be a newline there.  I'm adding a screenshot that shows a possible option to change the format, None, Short, and Full.
timestampFormats.png
77.0 KB View Download
That's perfect! Any idea if this is going to make it into 56?
Project Member

Comment 9 by bugdroid1@chromium.org, Jan 30 2017

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/d674aa2e6ff1a72c7a427ef033cc75e48cc61876

commit d674aa2e6ff1a72c7a427ef033cc75e48cc61876
Author: luoe <luoe@chromium.org>
Date: Mon Jan 30 21:17:11 2017

DevTools: update console timestamp style

A few bugs with console timestamps are addressed:
- All messages get timestamps; previously, commands/evaluations did not.
- Timestamps should not wrap
- Turning on timestamps should remove the repeated-message class
- New setting to choose [none, full timestamp, short timestamp (no yy:mm:dd)]

With the addition of a new setting, users who previously had timestamps enabled
will be migrated to the short format by default.

BUG= 651927 ,  678585 ,  682049 

Review-Url: https://codereview.chromium.org/2651843003
Cr-Commit-Position: refs/heads/master@{#447065}

[modify] https://crrev.com/d674aa2e6ff1a72c7a427ef033cc75e48cc61876/third_party/WebKit/LayoutTests/inspector/console/console-timestamp-expected.txt
[modify] https://crrev.com/d674aa2e6ff1a72c7a427ef033cc75e48cc61876/third_party/WebKit/LayoutTests/inspector/console/console-timestamp.html
[modify] https://crrev.com/d674aa2e6ff1a72c7a427ef033cc75e48cc61876/third_party/WebKit/Source/devtools/front_end/common/Settings.js
[modify] https://crrev.com/d674aa2e6ff1a72c7a427ef033cc75e48cc61876/third_party/WebKit/Source/devtools/front_end/console/ConsoleView.js
[modify] https://crrev.com/d674aa2e6ff1a72c7a427ef033cc75e48cc61876/third_party/WebKit/Source/devtools/front_end/console/ConsoleViewMessage.js
[modify] https://crrev.com/d674aa2e6ff1a72c7a427ef033cc75e48cc61876/third_party/WebKit/Source/devtools/front_end/console/consoleView.css
[modify] https://crrev.com/d674aa2e6ff1a72c7a427ef033cc75e48cc61876/third_party/WebKit/Source/devtools/front_end/console/module.json
[modify] https://crrev.com/d674aa2e6ff1a72c7a427ef033cc75e48cc61876/third_party/WebKit/Source/devtools/front_end/platform/utilities.js

Project Member

Comment 10 by bugdroid1@chromium.org, Jan 30 2017

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/d674aa2e6ff1a72c7a427ef033cc75e48cc61876

commit d674aa2e6ff1a72c7a427ef033cc75e48cc61876
Author: luoe <luoe@chromium.org>
Date: Mon Jan 30 21:17:11 2017

DevTools: update console timestamp style

A few bugs with console timestamps are addressed:
- All messages get timestamps; previously, commands/evaluations did not.
- Timestamps should not wrap
- Turning on timestamps should remove the repeated-message class
- New setting to choose [none, full timestamp, short timestamp (no yy:mm:dd)]

With the addition of a new setting, users who previously had timestamps enabled
will be migrated to the short format by default.

BUG= 651927 ,  678585 ,  682049 

Review-Url: https://codereview.chromium.org/2651843003
Cr-Commit-Position: refs/heads/master@{#447065}

[modify] https://crrev.com/d674aa2e6ff1a72c7a427ef033cc75e48cc61876/third_party/WebKit/LayoutTests/inspector/console/console-timestamp-expected.txt
[modify] https://crrev.com/d674aa2e6ff1a72c7a427ef033cc75e48cc61876/third_party/WebKit/LayoutTests/inspector/console/console-timestamp.html
[modify] https://crrev.com/d674aa2e6ff1a72c7a427ef033cc75e48cc61876/third_party/WebKit/Source/devtools/front_end/common/Settings.js
[modify] https://crrev.com/d674aa2e6ff1a72c7a427ef033cc75e48cc61876/third_party/WebKit/Source/devtools/front_end/console/ConsoleView.js
[modify] https://crrev.com/d674aa2e6ff1a72c7a427ef033cc75e48cc61876/third_party/WebKit/Source/devtools/front_end/console/ConsoleViewMessage.js
[modify] https://crrev.com/d674aa2e6ff1a72c7a427ef033cc75e48cc61876/third_party/WebKit/Source/devtools/front_end/console/consoleView.css
[modify] https://crrev.com/d674aa2e6ff1a72c7a427ef033cc75e48cc61876/third_party/WebKit/Source/devtools/front_end/console/module.json
[modify] https://crrev.com/d674aa2e6ff1a72c7a427ef033cc75e48cc61876/third_party/WebKit/Source/devtools/front_end/platform/utilities.js

Comment 11 by l...@chromium.org, Feb 1 2017

Status: Fixed (was: Assigned)

Comment 12 by l...@chromium.org, Feb 3 2017

Cc: l...@chromium.org
 Issue 687475  has been merged into this issue.

Sign in to add a comment