Accessing Developer Tools
When you use a modern web browser, you have access to a great toolset. This toolset allows you to inspect the pages you see. You can even have a little fun and temporarily update a current webpage to have your name on it if you know what to look for.
Each browser today comes with a set of Developer Tools. It's a good idea to know where to find them and to get used to using them.
What can I do with Developer Tools?
Each browser's Developer Tools is a little different. Google Chrome has a robust debugger for your JavaScript and a great way to inspect your HTML and CSS elements.
Within each set of tools, you will also find a console window. While you're starting out, this is an
invaluable place to help you practice small things and test some of your code.
The console window
If you're on a computer right now, press the F12 key and open up the tools. It should default to the console tab, but if not, just click on it. In there you probably just see an arrow > and a cursor, waiting for input. Go ahead and type this in then hit Enter.
alert("Hello!");
You should get a popup. And guess what? You've just written some code! Oh and don't worry about the line that says undefined. It just means the alert function didn't send back any values.
While you're in there, type in some math problems, like 285.22 + 694.3 and hit Enter.
How do I access my browser's Developer Tools?
Each company put these tools in a slightly different place, but several of them can be accessed by pressing the F12 key on your keyboard.
Otherwise, look for the keyword Tools or a symbol like ☰ on the top row of your
browser window. In there, there's usually a setting for the tools directly, or by hovering over a "more tools" menu.
Keyboard shortcuts to developer tools
Most browsers have a keyboard shortcut for accessing Developer Tools. If F12 doesn't work, these should.
| Browser | Shortcut to Developer Tools |
| Google Chrome | Ctrl+Shift+J |
| Mozilla Firefox | Ctrl+Shift+K |
| Microsoft Edge | Ctrl+Shift+I |
| Opera | Ctrl+Shift+I |
| Apple Safari | Option+Cmd+J |