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

One thought on “Google Chrome Developer Tools: Styles Tip

Leave a Reply

Your email address will not be published. Required fields are marked *

*

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