Every developer writes bugs. What makes you valuable on a team is finding and fixing them without needing someone to hold your hand. Adverts ask for debugging and DevTools skills, and skills frameworks list troubleshooting websites as essential. Browser DevTools are your main instrument.
Open DevTools
In Chrome or Firefox on a laptop, press F12, or right click any element and choose Inspect. The panels you will use most:
- Elements: see the HTML and the CSS applied to any element. You can edit styles live to test a fix before changing your file.
- Console: shows errors and anything you
console.log. You can also type JavaScript here to test ideas. - Network: lists every request with its status code, size and time. Here you can throttle the connection to a slow preset or go offline.
- Sources: lets you pause code with breakpoints and step through it line by line.
A method for any bug
- Reproduce it. Find the exact steps that cause the problem.