Debugging is a skill, not a talent.
Direct answer
To debug JavaScript, read the error message, check the line number, use console.log to inspect values and use your browser's DevTools to set breakpoints and step through code. Change one thing at a time and re-run.
A simple process
- Reproduce the bug reliably.
- Read the error in the console.
- Find the line.
- Log values around the problem.
- Form a guess and test it.
- Fix and re-run.
Tools
console.log("value:", value);
console.table(items);
console.error("problem");
debugger; // pauses when DevTools is open
In DevTools, open Sources, click a line number to add a breakpoint and use the step buttons.
Common errors
| Error | Meaning |
|---|---|
ReferenceError | variable not defined |
TypeError | wrong kind of value, such as calling undefined |
SyntaxError | code not valid |
Where Teyro fits
Teyro's JavaScript for Beginners course turns this into short lessons you can play in a few minutes a day. It has 50 lessons, and you can start free.
The bottom line
Slow down, make one change at a time and let the tools show you what is happening.
