otsukare Thoughts after a day of work

Formatted console.log lines. Stacktraces export wish.

Lun 27 juillet 2020
by Karl Dubost
(Working at Mozilla since 2013)

Firefox Devtools console.log lines

When we select the console.log lines in Firefox devtools, and cut and paste in an editor, there are newline characters added to the output.

For example it looks like this:

pointerdown { target: svg.flickity-button-icon
, buttons: 1, clientX: 363, clientY: 450, layerX: 5, layerY: 15 }
flickity2.js:1:5293
pointerup { target: svg.flickity-button-icon
, buttons: 0, clientX: 363, clientY: 450, layerX: 5, layerY: 15 }
flickity2.js:1:5293
mousedown { target: svg.flickity-button-icon
, buttons: 0, clientX: 363, clientY: 450, layerX: 5, layerY: 15 }
xgemius.js:1030:60
click { target: svg.flickity-button-icon
, buttons: 0, clientX: 363, clientY: 450, layerX: 5, layerY: 15 }
flickity2.js:1:5293

What I often do is that I put them in vscode where I search

(.*)\n^(.*)\n(.*\d{1,})$

and replace in regex mode with:

* `$1 $2 $3`

to get this, ready to be copied in a comment in github.

* `pointerdown { target: svg.flickity-button-icon , buttons: 1, clientX: 363, clientY: 450, layerX: 5, layerY: 15 } flickity2.js:1:5293`
* `pointerup { target: svg.flickity-button-icon , buttons: 0, clientX: 363, clientY: 450, layerX: 5, layerY: 15 } flickity2.js:1:5293`
* `mousedown { target: svg.flickity-button-icon , buttons: 0, clientX: 363, clientY: 450, layerX: 5, layerY: 15 } xgemius.js:1030:60`
* `click { target: svg.flickity-button-icon , buttons: 0, clientX: 363, clientY: 450, layerX: 5, layerY: 15 } flickity2.js:1:5293`

Compare exported stack traces

Silly idea of the day. This is not available right now in devtools, but I wish it was.

  1. Put two breakpoints in devtools.
  2. Run the code as record stacktrace in between these two targets
  3. export the stack trace as a json in a standard format in between these two breakpoints (do the same thing in another browser)
  4. Have a diff tool giving the possibility to explore the differences in between the two stack traces.

Otsukare!