The browser console window lets you try out web scripts even if you’re not connected to the internet.
Here is how to open the console on four of the most commonly used browsers.
[!Note] Each browser will label and color code the elements and errors differently. So it is a good idea to familiarize yourself with your preferred browser’s console window.
Chrome
There are two shortcuts to open the Chrome console:
- F12
- Ctrl-Shift-J (Windows) Cmd-Option-J (Macintosh)
If those don’t work you can open the console via the more tools menu:
- Go to the action button in the top right
- Select “More tools”
- Then select “Developer tools”
Edge
Edge also uses the F12 shortcut to open the console.
Or you can open it via the more tools menu:
- Go to the action button in the top left corner
- Select “More tools”
- Then select “Developer tools”
Firefox
Firefox uses the same shortcut as Chrome.
- Ctrl-Shift-J (Windows) Cmd-Option-J (Macintosh)
Or you can open it from the action menu (hamburger icon on the right of the tab bar):
- Go to the action button in the far right
- Select “More tools”
- Then select “Browser console”
Safari
Safari is a bit more challenging as you have to enable the console first.
- Open Safari settings (in Safari menu)
- Click on the Advanced tab (one or two gears)
- Click on the “Show features for web developers”
This will add a “develop” menu in the menu bar. Which will enable the shortcut:
- Command-Option-C
To open the console window.
You can also open the “develop” menu and choose “Show JavaScript Console”.