Now here is a nice piece of browser plugin that works best to my mind with Firefox. Essentially it adds a new toolbar with some cool and unique tools for web design.
Here's a short briefing of what it can do and how it can help you debug the websites:
- disable all styles -> it allows you to quickly specify whether the problem that you are encountering is of css nature or not;
- inspect element style -> allows to see what style is associated with given element (I recommend firebug for that purpose - I will write about it soon)
- clear cookies -> it happens all the time that even though you have made and saved the change, after refreshing the page still looks the same - it's due to chache which is a browser memory; it can hold the older versions of the page browsed recently (to make it loading quickly since it is frequently watched/read)
- forms management -> allows to clear fields, add new and trace the forms
- images -> allows to mess around with size of the images, backgrounds, etc.
- information -> allows to get specific info about tags, like div size, etc.
- disable -> allows to disable various elements like JavaScript, Cache, popups, proxies, etc.
- edit CSS and HTML
- outline various elements
- resize elements
- view page source (very usefull but most browsers has it built-in)
- validate page source
- most importantly I guess it has a function called Ruller. It is really handy. This feature allows to create a resizable box with given dimensions that can be changed. It helps a lot with measuring how much space a div for example should take...
Strictly speaking this plugin on it's own is a quite comprehensive solution but it suits better for debugging than for web design itself. Yet some of it's functions are unique and the biggest advantage of it is that it has all these functions "under one roof" and very easily accessible. It is definitely a must-have for a web design individuals.
See you soon!
No comments:
Post a Comment