Blog Toolbox 2 - Web Developer Toolbar

Welcome to Blogging Sueblimely. To keep up with my posts you can subscribe to my RSS feed and follow me on Twitter. Thanks for visiting!

If you are a beginner with html and css styling, want to expand existing skills or learn new techniques, the Web Developer Toolbar is a valuable tool. You are able to view and work with the source code of sites that have elements you are interested in, and work with the generated content of xml or database created content.

I used it extensively when I was learning web building and still use it regularly for such things as working on the styling of my beta blogger site.

Main Features

For editing

Edit HTML - opens a small window at the bottom of your screen for you to edit the html while viewing the results in the top window. You can then save the html.
View generated Source - opens up the page source code in a new window/tab. You can copy all or part of the code and paste it into another application to edit it or to practise styling before editing your css template. This is particularly useful for template based applications such as blog platforms or CMS programs where the html output is generated by xml or databases.
View Source With - allows you to specify a program you wish to edit a page with - eg notepad, dreamweaver, photoshop.
View and edit CSS and Style Information
View JavaScript.

Image tools

Image Information - displays all the images and image details on a separate page/ta Outline images with empty alt attributes
Display Image File Sizes and image dimensions

Other Page information

View Color Information Display Element Information - a nifty feature allowing you to highlight parts of the page and find out various information such as ID, class, CSS inheritance and color.
View Document Size, Meta Tag Information, Link Information, Page Alt Attributes
Outline External Links
Display Id & Class Details
Display Block Size

Utilities