Travel Through Time to Debug JavaScript

Science fiction? Mark Erikson is here to show us how time travel is not only possible thanks to Replay, but hugely helpful in debugging apps.

Upcoming episodes:

Links & Resources:

This episode was sponsored by:

Chapters:

00:00:00 - Welcome
00:00:32 - Who is Mark Erikson?
00:03:07 - What does time travel mean when debugging JavaScript?
00:08:04 - What’s your view on debugging?
00:13:37 - What is your mental model around debugging?
00:23:19 - Can a developer see someone else’s replay to debug their system?
00:26:12 - Browser tools for debugging
00:54:15 - Do you ever get annoyed at how good something is?
00:58:14 - What else can we do to debug?
01:02:56 - Using the step backwards button
01:06:06 - Fancy new features Mark helped build
01:12:56 - Do you need the replay browser to use the recordings?
01:17:51 - Is this for any app debugging?
01:26:23 - Where people can find out more

[saysthetedd]

Mark used to help me on the Cesium forums when I had trouble getting it to work with React. This was 2016 or so, a while before any of the solutions that exist today were on the scene. His blog was THE reason I was able to get Cesium working with webpack and React. Back then resources were scarce. Anyways, Mark was super helpful and I always remember that. Thanks Mark!

[AtRiskMedia]

LOVE this! Thanks so much, Jason. This is immensely helpful. Especially the framing of _how to_ debug.

[piyushaggarwal]

My code breaks when the black cat passes in front of the user's monitor and of course the full moon night is a given.

[andreiKspb]

Jason thank you for your job. Love you.

[piyushaggarwal]

I recently found out that CRA exposes all of your code, as it is, in the production build. I found that in the Sources tab.

[piyushaggarwal]

I do F12 to go to the inspect and popping it out is the right way

[deathone]

31:19 love when I click on a line I want to debug and it goes 20 lines below to the end of the current function for some odd reason. No I want to debug at the line I clicked.

For Replay
-Love the time stamps, that would have saved me multiple hours of my life
-Also have changed node_modules before, so like the second part
-Something I would love to see what files got called & in what order, there are some things I have been doing recently I can not debug
--I can prove it goes through some files thru it doing some code that is unique
---Reason for this I need to know what happened before we can debug.

PS: Wish there were better build error logs. Not like I know what blah, blah, blah is in some random package. Sometimes it is trying to say there needs to be another package, different version or something else entirely.

[shishirarora]

Great tool, however I can see privacy issues with all the pii data

[willkuerlich]

I travelled back in debug time to be first :D

[piyushaggarwal]

Hey Jason, a person watching on 16" laptop will not be able to a lot of the things because there is just too much stuff on the screen. Just my opinion.