Developer console
You are going to write bugs. Everyone does. A typo here, a wrong variable name there, a function called before it exists — mistakes are part of writing code, and no amount of experience makes them stop entirely. What changes with experience is how fast you find them.
That’s the problem in the browser: by default, a visitor sees none of it. When your script throws an error, the page just… does less than you expected. No red banner, no popup, nothing. The error happens silently and the browser moves on. If you can’t see what broke, you can’t fix it.
Browsers solve this with a built-in cockpit called the developer tools. It shows you errors as they happen, lets you inspect the page, and — the part we care about most right now — gives you a live JavaScript prompt where you can type a line and see the result instantly.
Most people who write JavaScript reach for Chrome or Firefox, because their developer tools are the most capable. The other browsers have devtools too — sometimes with features of their own — but they tend to trail Chrome and Firefox. A common working habit is to pick one browser as home base and only switch when a bug turns out to be specific to another browser.
The tools do a lot. We won’t tour all of it here. For now you need three things: how to open the panel, how to read an error, and how to run a command.
Google Chrome
Open the demo page bug.html.
There’s a deliberate error in its JavaScript. A regular visitor would never know — the page just quietly fails. Let’s open the developer tools and watch the browser tell us exactly what went wrong.
Press F12. On a Mac, that key is often claimed by the system, so use Cmd+Opt+J instead — it jumps straight to the Console.
The panel opens on the Console tab.
The exact layout shifts between Chrome versions, so what you see may not match the screenshot pixel for pixel. The pieces below are always there, though.
- A red error message. In this demo it’s complaining about an unknown
lalalacommand — code that tries to use a name that was never defined. - On the right of that message, a clickable link like
bug.html:12. The number is the line where the error struck. Click it and Chrome jumps to that exact line in the source, which is usually the fastest route from “something broke” to “here’s the line that broke it.”
Below the message sits a blue > prompt. That’s the command line: a place to type JavaScript and run it against the current page. Type an expression, press Enter, and the browser evaluates it right there and prints the result.
Being able to see errors is enough to get moving. We’ll return to developer tools and cover proper debugging — pausing code, stepping through it line by line, watching variables change — in the chapter Debugging in the browser.
Firefox, Edge, and the rest
For most other browsers, F12 is the key that opens developer tools.
The look and the wording differ a little from Chrome, but the ideas carry over one-to-one: a console, an errors list, an elements inspector. Learn the moves in one browser — Chrome is a fine starting point — and moving to another is mostly a matter of finding where they put each button.
Safari
Safari (the Mac browser; it isn’t available on Windows or Linux) needs one bit of setup first. Its developer features are hidden behind a menu you have to switch on.
Open Settings, go to the Advanced pane, and tick the checkbox at the bottom:
With that enabled, Cmd+Opt+C toggles the console. You’ll also notice a new Develop menu appear in the top menu bar, packed with commands and options for inspecting pages.
Shortcut cheat sheet
Different browsers, different platforms, slightly different keys. Here’s the quick reference:
| Browser / OS | Shortcut |
|---|---|
| Most browsers (Windows/Linux) | F12 |
| Chrome (Mac) | Cmd + Opt + J |
| Safari (Mac) | Cmd + Opt + C |
Summary
- Developer tools let you see errors, run commands, inspect variables, and much more.
- Open them with F12 on most browsers under Windows. On Mac, Chrome uses Cmd+Opt+J and Safari uses Cmd+Opt+C (after enabling the Develop menu).
- The Console shows error messages with a line number you can click, and gives you a
>prompt for running JavaScript against the current page.
The environment is ready. Next, we start writing actual JavaScript.