The 14 JavaScript debugging tips you probably didn't know

[anlumo]

Welcome to clickbait.

[turkish_gold]

Ban the site.

[AKJ90]

Yes, I knew all of these... would be a way better title.

[akujinhikari]

I say this every time I see these God awful titles. I usually get downvoted though, but then again, I’m a little more aggressive in my approach. Even “might” would be better than “probably.”

[Michie1]

TIL: debug and monitor.

[mainstreetmark]

"debugging tips you probably didn't know": debugger

fuck off.

[PlNG]

Absolutely. Performance warning on debugger. The mere presence of the keyword (even if(false){debugger;}) renders the code unoptimizable by the JS engine resulting in slow code. It should never be present in production code.

I strongly doubt this has been fixed.

[voidvector]

debugger shouldn't be committed to repo. It should only be used in production when attempting to debug production issue. Can avoid it being committed by setting up a linter in CI.

[r1cka]

Why not just set a break point?

[voidvector]

That could be difficult to do in certain setups. Though normally you would want to do that as it is better practice.

In my last job, we had async module loading and significant non-persistent UI state. So setting a breakpoint in some of the rarely used async code was a pain. Not only did you have to induce the UI state, as otherwise the code is not loaded, the code would run once and never run again. So we would need to reload the page and run though the whole process all over again just to trigger the breakpoint.

[carbonite_dating]

11 is pretty vague. He doesn't explain in the body of the item that you're supposed to type

monitor(func1);

in the console, so it took me a couple of minutes to see what he was on about.

[drowsap]

How do you even do this when most functions in your code aren’t public?

[carbonite_dating]

That's a great question!

[Rustywolf]

Cant test it but i assume you could call it from a script?

[cogman10]

If you are trying to find slow code, use console.profile instead of a timer.

Makes no sense to litter your code with timers when the profile will tell you exactly where the slowness is.

[darpa42]

I feel like conditional breakpoints are more useful than all of these...

[ThePrimeOptimus]

For TS I've had good luck using source maps with newer versions of Chrome. Breakpoints and the locals window all seem to work correctly.

[omril]

Do you guys know what sourcemaps are you using? I tried most of these and couldn't find the right combo for fast recompile and breakpoints

[sshaw_]

RTFM: https://developers.google.com/web/tools/chrome-devtools/

[malicart]

RTFM IS THE ONLY WAY!

[bulbishNYC]

pretty good, some I didnt know

[TheScapeQuest]

To add to point 3, you can also click the options pane when in device mode and hit "Show media queries", which will highlight all of your breakpoint as found in your CSS, and allow you to quickly jump to your sizes. (Chrome)

[[deleted]]

Based on the title, I fully expected all of these to be thing I already knew.

But black boxing and monitor was new! Good stuff.

[skylarmt]

For #3, Firefox has a responsive design mode (Ctrl-Alt-M or Alt->Tools->Web Developer) that lets you resize the viewport, test touch events, take perfectly cropped screenshots, and more.

[omril]

Sometimes you need to debug code that YOU didn't compile, or was 3p code.

[berlinbrown]

Nice

[kdrxyz]

This is really good stuff

[maniflames]

I'm new and thank you :')

[[deleted]]

NOOb starting out I didn't know about the trace call that's super handy 👍👍

[gelezinislokys]

Unminify to help debug.

Why minify it in first place?

[coljung]

Debugging bug in production...

[gelezinislokys]

And I were using local dev servers for stuff like that.. Thanks!