13
Formatted console.log lines. Stacktraces export wish.
source link: https://www.otsukare.info/2020/07/27/devtools
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
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!
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK