Using the Chrome Inspector to edit your site’s Dark Matter

And by Dark Matter I mean “content that only gets styled by pseudo-selectors”. 🙂

When you’re rebuilding, re-designing or even tweaking a website, it’s often quite painful to restyle the items on a page that are hidden by default. Navigation panels, menus, etc., are often hidden until you mouse over them or click a drop-down, which means it can be very fiddly (and often impossible) to use Firebug or the Web Inspector to interactively edit their CSS while they’re hovered over.

The Google Chrome developers obviously realized this, and built a feature to help you temporarily lock the state of certain elements. Unfortunately they put this feature in the most subtle place I’ve ever seen. And they gave it the same icon as a completely different feature in Firebug. I’ve added a highlight to help you spot it in this screenshot:

Inspector with "show pseudo selectors" highlighted

For some reason its icon is identical to that of the select element toggle in Firebug. Because of that I let months go by before I ever clicked on that button; I was happy to toggle select element mode with ⌘⇧C.

But when you do click the button it reveals a set of pseudo-selectors that you can check in order to lock the relevant states on the selected element:

Pseudo-element selection panelThese are all states that you can usually trivially activate with the mouse: for example, ordinarily you can hover over an element and the hidden content will appear. However, as soon as you try to use the inspector to change the element’s properties, then you have to move your mouse away from the hover element! That’s where these checkboxes come in: they allow you to lock pseudo-selectors (such as :hover) in place until you uncheck the box later.

Activate the pseudo-selectors!

This means that when you have a navigation menu on a site like linkedin.com, (pictured below), you can now make changes to the hoverable items interactively. This shortens your develop-test cycle dramatically.

:hover state activated

Interactivity editing your styles helps you develop pixel-perfect designs faster, and helps you get to something beautiful more naturally. You can take things one step further and check the :visited option, to see and edit how your links will look when a user has already clicked them.

This special little feature, which I’m henceforth going to call the black-hole button, is wonderfully useful for tweaking those hard-to-see parts of your site. It’s not a tool you’re likely to use often, but when you do, it makes things much easier.

Have you found any other obscure features in the Inspector or Firebug that are essential productivity boosters when editing a great site? Please let me know in the comments below!

to see future front-end development tips and tricks.

Advertisements
This entry was posted in Chrome, CSS, Tools. Bookmark the permalink.

One Response to Using the Chrome Inspector to edit your site’s Dark Matter

  1. Tavis says:

    Just thought I’d note another way to access this amazing feature. When on the “Elements” tab viewing the DOM like in your screenshots, you can right-click on any element and see a contextual menu. Inside the menu is a “Force Element State” flyout that will allow you to trigger the desired pseudo-selector. Handy!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s