Web Inspector: Styles Enhanced

February 24th, 2011

During the past few months, we’ve been working hard to improve the CSS editing experience for Web Inspector users. Now, we are happy to provide you with an update.

Style Presentation

Have you ever found yourself in a situation where you entered a large, complex gradient definition for your background property and it suddenly disappeared once you hit Return? The reason was that the Styles sidebar only showed style content that the browser understood. If the browser didn’t understand the content, be it a typo or an unsupported property, the Web Inspector would show nothing. This has now changed. The Web Inspector now shows all the declared properties, and if the browser does not understand a property name or value then the respective property is denoted by an exclamation mark (“warning”) next to its name. You can even edit (or remove) these properties like normal.

On a related note, the Web Inspector can now show the colors in property values exactly as they are written in an inline style, external stylesheet, or via the inspector. Just use the “As Authored” option accessible via the Styles sidebar’s Gear menu.

Editing Styles

Based on feedback from our users, we have improved the editing of CSS rules. Two separate fields are now used for the property name and value. You can navigate between them, and also to other rules and selectors, with the Tab/Shift-Tab or Return keys. Property and value keywords are suggested as you type, and can be auto-completed using the End or → keys, just like in the Console. Previous and next suggestions can be selected with ↑ and ↓ keys. If you wish to accept the current suggestion and move on to another field, use the Tab/Return keys.

Additionally, you can paste a compound “name: value” property into the name field, and it will work as you expect. The Inspector will break it up into “name” and “value”, putting each in its own field for you.

Persisting Changes

Every time you modify a style from an external style sheet the respective resource text is updated in the Resources panel. This feature is a work in progress but it’s quite exciting. While the Inspector remains open, the history of style sheet resources is tracked. Select any resource revision to see its differences from the original one. Changes are highlighted line-wise.

Textual resources, such as style sheets, html, and JavaScript resources, can be dragged and dropped from the Resources panel’s sidebar into your favorite text editor. This is a great way to work with new style sheet revisions and get changes out of the Inspector.

Did you know that…

Let’s take this opportunity to mention a few Inspector tips and tricks. While in the Styles pane, you can:

  • create a new property-value pair by double-clicking the blank space in the lines with braces, or by hitting Tab while editing the last property value.
  • add a new rule by selecting the “New Style Rule” item in the Gear menu.
  • click a link in a property value (say, background-image) to navigate to the respective resource in the Resources panel.
  • click the color swatch next to a color value to cycle through that color’s different format representations (for example, rgb(0, 0, 0), #000000, black).

We are currently experimenting with even more improvements to styles within the Web Inspector. Stay tuned here and check back often.

Note that for more information on the recent features of the Web Inspector, you can visit the Chrome DevTools documentation page.