1244024 - Visualize error position

Status: NEW

(DevTools :: Console, enhancement, P5)

Description

[Sebastian Zartner [:sebo]]

Attachment: Error visualization in Error Console

The old Error Console (still available when setting devtools.errorconsole.enabled to true) shows a code sample and a little arrow indicating the character position where the error happened. (see attached screenshot)

This feature should be added to the Browser and Web Console, too, as it allows to see the error location at a glimpse.

The Bugzilla page serves as test case for CSS, as it has many unknown properties. Bug 120680 has a test case for JavaScript[1] (though with incorrectly indicated column numbers).

Sebastian

[1] https://bug120680.bmoattachments.org/attachment.cgi?id=65518

Comment 1

[Brian Grinstead [:bgrins]]

I'd like some UX ideas on how to show this without taking up too much space / making the output look cluttered.  Right now we should at be showing the column number in the stack link on the right (which isn't visual but should at least help track down the problem).  Did you have any ideas?  Printing it directly below the message could potentially double the size of each message.

Comment 2

[Sebastian Zartner [:sebo]]

I could imagine showing it besides the error message or within an infotip if an extra line for it is already taking too much space.
I may come up with mockups on this if you want me to create some.

Sebastian