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
- Magnifier
- Ruler
- Display page at various window sizes – eg 800×600, 1024×768 etc
- Validate HTML, CSS, Links, Feeds
More information and downloads:
- For Firefox/Flock/Mozilla
- For Opera
- For Internet Explorer - a different toolbar but similar features
Blog-Tools, html, Blog-Toolbox sueblimely alexa
[...] Web Developer Toolbar – Lets you interact with your page code and styling in multiple ways. I wrote a post about this last year – Blog Toolbox 2 – Web Developer Toolbar [...]
a nifty feature allowing you to highlight parts of the page and find out various information such as ID, class, CSS inheritance and color.
If any of my regular readers wish to do a guest post on that blog aimed at beginning blogspot users or have written tutorials that I could link to please contact me.
Ugg
Nike Shoes
[...] Web Developer Toolbar – Lets you interact with your page code and styling in multiple ways. I wrote a post about this last year – Blog Toolbox 2 – Web Developer Toolbar [...]
Definitely concur with what you stated. Your explanation was certainly the simplest to understand. I inform you, I usually get irked when folks discuss issues which they plainly do not know about. You managed to hit the nail correct on the head and explained out everything without complication. Perhaps, people can take a signal. Will likely be back to get more. Many thanks