Tutorial: use browser DevTools to find bugs

Developer tools (DevTools) are your best friend when something isn't working. No more "I don't know why it's broken": now you'll know exactly where to look.

Step 1: open them

Press F12 or right-click the page → "Inspect". A panel will open with several tabs: Elements, Console, Network, among others.

Step 2: the Elements tab

Here you see the page's real HTML (including changes made by JavaScript). Click any element on the page and it'll get highlighted here automatically. You can edit HTML and CSS right there to experiment, no fear needed: reloading the page puts everything back to normal.

Step 3: the Console tab

This is where your console.log() calls show up, and more importantly, JavaScript errors in red. An error message almost always tells you the exact file and line where something went wrong. Read it, don't fear it: most of the time it literally tells you what to do.

console.log('Variable value:', myVariable);
console.error('Something went wrong here');
console.table([{ name: 'Ana' }, { name: 'Luis' }]);

console.table() displays arrays of objects as a tidy table, much easier to read than a wall of plain text.

Step 4: the Network tab

Here you see every request your page makes (images, CSS files, fetch calls). If a request shows up in red or says "failed", that's the first place to look when your fetch "isn't working".

Step 5: set a breakpoint

In the "Sources" tab, click the line number in your code to pause execution right there. You can inspect every variable's value at that exact moment, like pausing a movie to check a single frame.

What did you just learn?

• How to open DevTools and what each main tab is for.
• How to read a console error instead of fearing it.
• How to use a breakpoint to pause your code and examine it step by step.