October 21st, 2008

9 Things the Web Developer Toolbar Can Do

 

Many web developers use Firebug over Web Developer Toolbar. It’s true these two plugins have many features in common, but still it’s worth the visual space and amount of memory that Web Developer Toolbar uses, because it has many not so obvious but useful and interesting features.

1. View Generated Source

Path: View Source -> View Generated Source

This feature is very useful when DOM insertions are made on the fly by Javascript. To simply just view the source code of the page will not show the DOM modifications, but with this feature we can see those too.

Generated Source

2. Disable Javascript and CSS

Paths:

Disable -> Disable Javascript -> All Javascript

CSS -> Disable Styles -> All Styles

This is particulary useful when we’re developing a page and we want to see how the page looks and handles without Javascript and CSS.

3. Find Broken Images

Path: Images -> Find Broken Images

This feature gives you detailed information about broken images on a page.

4. View Image Information

Path: Images -> View Image Information

This loads a page with all the images on the website and shows you the image path, width, height and file size.

5. View Element Information

Path: Information -> View Element Information

This feature let you select a page element and shows detailed information on that element.

Element Information

6. View Color Information

Path: Information -> View Color Information

This is particulary usefu feature of Web Developer Toolbar. It creates a summary of all the colors that is used on the web page including hex color codes.

Color Information

7. Display Line Guides

Path: Miscellaneous -> Display Line Guides

It lets you add guides to your page, to check line height for example.

Line Guides

8. Display Ruler

Path: Miscellaneous -> Display Rules

Lets you measure almost anything on a page, it’s useful when you want to know for example the space between two elements.

Ruler

9. Small Screen Rendering

Path: Miscellaneous -> Small Screen Rendering

If you want to see how a page is viewed on a mobile phones then make sure you check out this feature. It gives you an appropiate mobile phone rendering.

Small Screen Rendering

If you enjoyed this article then help spread the word and please follow us on Twitter or subscribe to our RSS feed.

Subscribe to our RSS feed

5 Comments

  1. Jasper Clarkberg
    on Tuesday 21, 2008

    Nice, but I still like firebug, though it can only do 1 and 5.

    Reply
  2. Bryan @ Mid Mo Design
    on Tuesday 21, 2008

    I’ve tried both, I stick with Firebug simple because it’s what I know but I love the view-source option of the Web Dev toolbar. So many sites update dynamically and if you are debugging DOM type stuff, it is a MUST.

    Good highlight of some lesser known features.

    Reply
  3. Nolan
    on Tuesday 21, 2008

    Jasper:

    Believe it or not, you can install both!

    Reply
  4. Gyorgy Fekete
    on Tuesday 21, 2008

    Web Dev. Toolbar is definitely the underdog.

    Reply
  5. Marco Conti
    on Tuesday 21, 2008

    I got and use both. No reason why it should be one or the other. For CSS editing, it depends of what my final goal is. Sometimes FB is better, sometimes the webdev is. They have different approaches
    and that makes them equally useful in my book. The view source with… feature helps me a lot when I work on my dynamic pages. I can open them in my IDE and treat them as if they were static pages. Speeds up the workflow.

    Reply