Do you want to get a cloud cert?
Want free certification prep?

Get #CloudHappy with FREE course prep from Pluralsight.
Click here to start!


Debugging web applications can be tricky. Accessing your browser’s developer console is the easiest way to “pop the hood” and see what’s going on with your application. It’s like a secret backdoor that isn’t very secret.

Google Chrome

Google’s browser is one of the most popular out there, and it’s easy to access the developer console:

In the upper right hand corner of the browser, click the 3 dots:

How to find browser developer console

Then select More Tools -> then Developer Tools

How to find browser developer console

You will now see the console (and all the errors my site produces when I run it locally)

How to find browser developer console

Shortcuts:

MacOS: Option + ⌘ + J Windows / Linux: Shift + CTRL + J

Safari

In Safari you’ll need to enable Developer mode. Go to the

Select Safari Menu > Preferences and make sure “Show Develop menu in menu bar” is checked:

How to find browser developer console

Now you’ll see a developer option on the Safari menu bar:

How to find browser developer console

Select “Show JavaScript Console

How to find browser developer console

And now you’ll see a web console in Safari:

How to find browser developer console

Shortcuts:

Option + ⌘ + C

Microsoft Edge

In Edge, again click the three dots in the upper right hand corner:

How to find browser developer console

Select More Tools -> Developer Tools

How to find browser developer console

And you’ll see a lovely console which hopefully doesn’t look like Bing’s:

How to find browser developer console

Shortcuts:

Windows: F12

Internet Explorer

In Internet Explorer click on the gear icon at the upper right hand corner of the browser:

How to find browser developer console

Select “F12 Developer Tools” (or, ya know, press F12)

How to find browser developer console

And your console appears:

How to find browser developer console

Shortcuts:

Windows: F12

Firefox

In Firefox you’ll have a sandwich menu in the top right hand corner:

How to find browser developer console

Clic that and select Web Developer -> Web Console How to find browser developer console

And your console appears! How to find browser developer console

Shortcuts:

MacOS: Shift + ⌘ + J Windows / Linux: Shift + CTRL + J

Summary

This is a list of ways to get into the developer console for popular browsers, and it’s a great way to debug your JavaScript applications. I can’t stress it enough to new developers: use your console that’s why it’s there. It will save you heaps of time and effort.

Questions, comments? Let me know!

Get notified when new JavaScript tutorials are posted!


Do you want to get a cloud cert?
Want free certification prep?

Get #CloudHappy with FREE course prep from Pluralsight.
Click here to start!


Published: Mar 22, 2020 by Jeremy Morgan. Contact me before republishing this content.