Watch a Video or read something because it really is an invaluable tool. But here’s a crash course:
Debuggers, or IDEs, let you step through your code in slo-mo so you can see what is happening.
Set a breakpoint - Click to the left of a line of code so a red dot appears. Run your program, and the IDE will execute to that line, then pause.
Look at variables’ values - While the execution is paused you can hover over variables before that line to see their value.
Step through the code - See what happens next in slo-mo.
Use “Step Into” to enter into a function and see what that code does.
Use “Step Over” to not go into a function and continue in the current spot after the function has done its business.
Use “Step Out” to exit a function and pick up the execution after it has run. Use this when you’re in too deep and the code stops making sense.
See whats in the heap - The heap will list all the functions that you’re currently inside of. You can jump to any of those points by clicking them.
Set a watch - Keep a variable in the watch so you can see what its value is at all times.
Set a condition on the breakpoint - If the breakpoint is inside a big loop, you can right-click on the red dot to create a conditional breakpoint, so you write something like x===3 and it will only pause when x is 3.
There are many other things an IDE can do to help you, so def look into it more if you want to save yourself a lot of insanity. But this is a good starting point.
If you’re developing for the web use F12 to open web tools, and when an error happens, click the file/line number to see that point in the Sources tab, and you can debug there.
Ten years into casual programming and I still don’t know how to use a debugger.
It’s easy, you just step, step, step, step in, or wait, over, or, oops.
Watch a Video or read something because it really is an invaluable tool. But here’s a crash course:
Debuggers, or IDEs, let you step through your code in slo-mo so you can see what is happening.
There are many other things an IDE can do to help you, so def look into it more if you want to save yourself a lot of insanity. But this is a good starting point.
If you’re developing for the web use F12 to open web tools, and when an error happens, click the file/line number to see that point in the Sources tab, and you can debug there.
Thank you for writing this out
That sounds really cool
I believe in a conspiracy theory that nobody uses debuggers.
I use them daily. It makes it so much easier to work with an existing code base
console.log
counts as “a debugger”, right?