Web development tools
May 9th, 2009
Firefox Addons
| Title | Description |
| Firebug | First and foremost, if you’re doing any sort of Javascript development Firebug is essential. Otherwise you’re really just stumbling around in the dark when it comes to debugging. Firebug not only gives you a robust error console, but also lets you add breakpoints in your code. Firebug’s HTML and CSS inspector gives you the freedom to either browse your source code in a collapsible tree, or click an element within the page to see its markup. Firebug also lets you edit your “live” HTML and CSS and instantly displays the results for you to review – no reloading, no saving. |
| Codeburner | Codeburner then rounds out the Firebug setup by adding a compete W3C reference lookup with search-as-you-type on HTML elements & attributes as well as CSS properties. Ever wonder which browsers support the text-transform CSS atrtribute? Codeburner will tell you that it’s buggy in IE7, but has full support in Firefox 3, Safari 3 and Opera 9. |
| Firecookie | Install the Firecookie add-on and Firebug gets a new super-power: complete cookie viewing and management. You can view the full content of each cookie, and even edit and delete them all from Firebug’s window. |
| Web Developer Toolbar | If writing Javascript without Firebug is like fumbling in the dark, building a site without the Web Developer Toolbar is like blindfolding yourself, tieing your hands and and trying to run through the woods without hitting a tree. Disable your cache, images and cookies, switch style sheets by media type, auto-fill forms with temp data, outline certain element types, resize the browser window to common sizes and validate your markup – all from within one toolbar. The Web Developer Toolbar does a whole lot more and is always the first add-on I install in Firefox. Give it a try and you’ll wonder how you ever got along without it. |
| Measure It | Ever need to know just how much space you have for a photo, or how wide a dynamically sized column is? This handy little guy lets you measure, in pixels, any area on the page. Super simple and super helpful. |
| Colorzilla | Another very simple but very useful add-on that displays the RGB and HTML color codes directly beneath your cursor. With a click, Colorzilla will copy the HTML color code to your clipboard for use in your favorite editor. |
| CSS Viewer | CSS Viewer takes one of the features in the Web Developer Toolbar and makes it a little easier. Just point your cursor at any element on the page and CSS Viewer will show you all of its CSS attributes, from size and position to fonts and colors, all in an easy to read overlay. |
| Screengrab | A simple screenshot tool, Screengrab will save the visible area or the complete page as a file on your desktop. You can choose to save as a png or jpg, and even auto-add a datestamp to the file name. |
- nUnit –unit testing
- StructureMap – dependency injection
- Resharper – VisualStudio plugin for coding efficiency
- MVC – Model View Controller
- LLBLGEN Pro – ORM Mapper and Data Layer generator
- nHibernate – Another ORM Mapper
- RhinoMocks – Mocking framework
- PostSharp – Aspect framework
- Log4Net – Logging framework
Recent Comments