Codementor Events

5 Useful Web Developer Tools Features

Published Sep 29, 2015Last updated Mar 29, 2017
 5 Useful Web Developer Tools Features

5 Excellent Developer Tools Features

These are five developer tools features I use often in Firefox and Chrome. I thought I would blog about similar features in both browsers instead of focusing on one browser, and show how to use them in both of them.

Emulating Element States (hover, focus, etc.)

One of my favourite features, which makes things much less of a pain, is the ability to trick the browser into thinking that you’re hovering over an element until you remove the flag. You can then freely inspect any :hover css code and see how it’s (not) working.

In Chrome dev tools, after you inspect an element, you can right click on the element (make sure to not do this on the body/text or it won’t work) and click on ‘force element state’, then the state you want (e.g. :hover)

Forcing hover state in Chrome

Now, you should see your stylesheet for the :hover state!

Hover state is forced

You can do the same thing in Firefox by simply right-clicking an element and clicking ‘hover’, it again allows you to see the effects of your CSS and see the new :hover code applying.

Firefox forcing hover state

Device Emulation

In Chrome, you can toggle the bottom pane by pressing ESC when your developer tools is up. Once your dev tools is open, you can choose the ‘emulation’ panel. This gives you several options: from screen sizes, to user agents, to whole device setups! Perfect for testing responsive websites.
You can also emulate touch events with your mouse there.

Chrome device emulation

In Firefox, there is a little icon on the element inspector that toggles responsive design mode

Firefox device emulation

Once clicked, you can again see your website in a variety of sizes.

Firefox responsive view

There’s a dropdown to select a screen size, and you can toggle touch event emulation again or take a screenshot. My favourite feature there though is the ability to rotate the screen with a button!

Networking

Chrome has a networking tab in its console which allows you to see all your requests and how much time each request took. Apart from being a way to see if you have any slow pages, it also helps diagnose errors such as missing assets and see AJAX requests.

Chrome networking monitor

It also shows details for a specific request when clicked, making it easy to see request headers and body – very useful for debugging POST requests.

Specific request info

Finally, there’s the ‘audits’ panel which offers some advice on how to make your page faster, sort of like YSlow and similar extensions.

Performance audit

Firefox offers the same functionality in its own networking panel:

Firefox networking info

Firefox single request info

And if you click the little clock on the bottom right, you can see a breakdown of the various page elements and how much time they take.

Firefox performance audit

Style Editor

If you open a CSS file in sources, Chrome allows you to make changes to it on-the-fly, and see if they apply. This, of course, is in addition to being able to see and edit any styles that apply to an element back in the elements panel!

Chrome css editor

Firefox has a style editor pane that works the same, but with the addition of the ability to add new stylesheets and to import stylesheets, which is even better.

Firefox CSS editor

Shader Editor

Finally, this is a Firefox feature I only found out about while writing this post! If you click the little wrench icon in the top left of firefox dev tools, you can enable the shader editor. If you go to a page that uses WebGL afterwards (such as HelloRacer) you can see and edit shader code. Pretty neat!

Shader editor

Discover and read more posts from Errietta Kostala
get started