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.
- Put two breakpoints in devtools.
- Run the code as record stacktrace in between these two targets
- export the stack trace as a json in a standard format in between these two breakpoints (do the same thing in another browser)
- Have a diff tool giving the possibility to explore the differences in between the two stack traces.
Otsukare!