Google Chrome Developer Tools: Styles Tip

If any of you have been using Google Chrome instead of Firebug for your web development, you might have found yourself in a pinch. When using FireBug, it is relatively easy to add additional CSS styles to an element or its styles on the fly. Chrome doesn’t seem to have that ability out of the box.

Well, there IS a way, although it is rather hacky. That doesn’t mean it doesn’t do the trick!

Lets say you have an inline element with the following styles

width:50px;

However, you suddenly realise that in order to apply a width to an element it has to be a block element. So, instead of changing your stylesheet and refreshing the page, type:

width:50px;display:block;

Press Enter, and the additional style gets added!

width:50px; display:block;

Quite simple, but annoying if you didn’t know about it. Hope this helps anyone out there using Chrome for their development.

Share this post: These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • del.icio.us
  • StumbleUpon
  • Reddit
  • Facebook
  • Google Bookmarks

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>