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.
Yes, but only because it gives you a link to where that was run. Click the link to the right with filename:lineNumber, and it will open the sources tab to that line. Set a breakpoint and rerun to pause there, then step through the code’s execution.
Of course, if you’re using minified or processed code, this will be more difficult, in that case figure out how to do it in VS Code.
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.logcounts as “a debugger”, right?Yes, but only because it gives you a link to where that was run. Click the link to the right with filename:lineNumber, and it will open the sources tab to that line. Set a breakpoint and rerun to pause there, then step through the code’s execution.
Of course, if you’re using minified or processed code, this will be more difficult, in that case figure out how to do it in VS Code.