How do I view the dev console in my browser?

0

Full article

Most users people will never even know their browser hides a great set of tools, mostly used by web developers, but which can be useful for anyone trying to figure out why their browser seems to be trolling them.

Find out why your browser is slow, when a page or addon is throwing errors, what's being sent out without you even knowing, what's being requested without you even knowing... etc, etc, blah blah blah. I had to use them just the other day to figure out why a single post on this blog wasn't displaying the summary on the main page... it was due to my using a character that messed up some JavaScript code that needed to manipulate it.

I won't cover what these tools can do, just how to open them. From there, the sky's the limit. :p


Chrome

Author: Google
Toolset: Chrome DevTools

  • To view elements of the page (DOM/CSS), either right-click and select "Inspect" or press Command+Option+C (Mac) or Control+Shift+C (Windows, Linux, Chrome OS).
  • To view the console (logged messages, run JavaScript), press Command+Option+J (Mac) or Control+Shift+J (Windows, Linux, Chrome OS).

Firefox

Author: Mozilla
Toolset: Web Console

  • Select "Web Console" from the Web Developer submenu in the Firefox menu (or Tools menu if you display the menu bar or are on Mac).
  • Or press Ctrl+Shift+K or Ctrl+Shift+C or Ctrl+Shift+I (Windows).
  • Or press Command+Option+K (Mac).

Opera

Author: Opera Software
Toolset: Developer Tools Console

The shortcuts seem to be the same as Chrome, at least by default.

  • To view elements of the page (DOM/CSS), either right-click and select "Inspect" or press Command+Option+C (Mac) or Control+Shift+C (Windows, Linux, Chrome OS).
  • To view the console (logged messages, run JavaScript), press Command+Option+J (Mac) or Control+Shift+J (Windows, Linux, Chrome OS).

You can also change the shortcuts if you'd like:


Brave

If you're not using Brave yet, do. This is my preferred browser now that they have all of the annoying kinks worked out... it's more secure by default and they have this novel idea for rewarding good content.

Author: Brave Software Inc
Toolset: Developer Tools

The shortcuts seem to be the same as Chrome and Opera.

  • To view elements of the page (DOM/CSS), either right-click and select "Inspect" or press Command+Option+C (Mac) or Control+Shift+C (Windows, Linux, Chrome OS).
  • To view the console (logged messages, run JavaScript), press Command+Option+J (Mac) or Control+Shift+J (Windows, Linux, Chrome OS).

Internet Explorer

Author: Microsoft
Toolset: Developer Tools

  • Press F12.
  • Or right-click and choose "View source" or "Inspect element".

Edge

Author: Microsoft
Toolset: Microsoft Edge DevTools

  • Press F12 or Control+Shift+J or Control+Shift+I.
  • Or right-click and choose "View source" or "Inspect element" (possibly only after opening the DevTools at least once).

Safari

Author: Apple
Toolset: Web Inspector

That link is a pretty basic (nearly useless) overview - there's more detail in the Safari Developer Help docs. I don't have a Mac or Safari, so the best I could do to test this was download Safari 5 for Windows from 2012.

  • Enable the Develop menu in Advanced preferences: Safari > Preferences > Advanced > Show Develop menu, then choose Develop > Show Error Console
  • Select Show Web Inspector Option-Command-I in the Develop Menu. Or control-click anywhere in the Safari tab and choose "Inspect Element" from the menu.
  • You can also add a Web Inspector button to your toolbar by customizing your Safari Window.
  • If you're using the last available Windows version from 2012: Edit > Preferences > Advanced > Show Develop menu in menu bar
  • After showing the new menu, you can view page elements with Control+Alt+I or the console with Control+Alt+C. Beware, it's a pretty busted experience. πŸ™„

Author

Grant Winney

Is there anything more satisfying than sharing knowledge? Of teaching someone and witnessing their "ah ha" moment? I usually write about tech, but no promises. I hope you find something interesting!



Comments