Posted on by

Accessing Your Browser Developer Tools

Most modern web browsers are equipped with tools for web developers: normally hidden functionality that exposes the behind-the-scenes workings of a web page or application.

Inspecting CSS styles

Much of what is there is for skilled coders, but they all have what’s known as an HTML (or DOM) inspector that is useful to other users for the purpose of seeing the HTML structure of a page and the CSS rules that define it’s design and layout.

Another important part of the browser developer tools is the Console, this is where various network and javascript errors will be shown.

Working with your Site CSS

Developers tools are an essential tool to working with your website’s CSS. You can see the active rules on any elected element (using the inspector) and even change those rules on the page to see the effect of your changes.

Take a look at this article for a more detailed treatment of this subject: Simple CSS Techniques for WordPress

Accessing the Developer’s Tools

Each browser has it’s own way of invoking the developer’s tools. For each browser, here is what you need to know and how to access the tools:

Firefox

In Firefox, this is called the “Inspector” and it can be opened from the menu under the “Web Developer” or “Tools” item. Firefox currently has, in my opinion, the best UI and feature set for it’s developer tools, I highly recommend trying it.

There is also an excellent extension for Firefox called “FireBug” that adds a similar, but in many ways more extensive set of similar tools.

Keyboard Shortcuts:

Windows/Linux OS X
Open tools panel Ctrl + shift + i Cmd + Opt + i
Open web inspector Ctrl + shift + c Cmd + Opt + c

Read all the details here: Firefox Page Inspector

Chrome

The Chrome Developer Tools (also known as Devtools) and can be accessed under the menu icon by clicking on Tools>Developer Tools.

Keyboard Shortcuts:

Windows/Linux OS X
Dev Tools F12 or Ctrl + shift + i Cmd + Opt + i
Inspector F12 or Ctrl + shift + c Cmd + Opt + c

More information here: Chrome DevTools in particular the “Elements” section.

Internet Explorer/Edge

When using the Edge browser, the developer tools are available using the F12 key. More details here…

In Explorer, these tools are called “F12 Developer Tools” and it’s recommended that you be on IE 11 to use them. Earlier versions had the tools in some form, but they hadn’t matured until version 11 came along.

Screenshot 2014-11-13 at 11.26.34 AMTo access the tools, the F12 key is used, and from there, you’re going to be interested in the “DOM Explorer” tool, invoked with Ctrl 1 or clicking on the DOM Explorer icon (shown here) in the Tools window.

Detailed information on using the tool in IE can be found here: Internet Explorer F12 Developer Tools

Safari

Apple’s Safari browser has a very sophisticated set of developer tools built in, but you have to enable them in the settings to be able to access them. Enable the Web Inspector tools by navigating to the setting: Safari > Preferences > Advanced > “Show Develop menu in menu bar“ and enabling it there.

Once enabled, the Inspector is invoked by clicking the Web Inspector icon in the browser toolbar.

Editorially, I would say this tool is not the most accessible to users, it packs a lot of information into the screen and it can be tricky to focus on simple tasks unless you know very well what to look for.

Detailed information here: Safari Web Inspector

Opera

The Opera browser comes with a full set of developer’s tools that are accessed very much like the are in Chrome. You can use a keyboard shortcut, or a right-click on a page element gives you a quick way to open the element inspector.

Keyboard Shortcuts:

Windows/Linux OS X
Dev Tools Ctrl + shift + i Cmd + Opt + i

More information here: Opera Dragonfly.

Leave a Reply
You have to agree to the comment policy.

Leave a Reply
You have to agree to the comment policy.