I do a lot of Asp.Net development and I use Firefox as part of my development toolkit when diagnosing performance and design issues with any website I'm working on. I'm not going to touch on various methods of developing a website as I feel that's akin to trying to change someone's religion. Most of the tools I use however are software development platform choice independent.
Firefox really shines as a development tool when you start utilizing some of the powerful developer-minded plug-ins that are available. I'm going to take the long view of some of these plug-ins in this post then drill down into some of the various features of some of the more comprehensive tools in future posts.
Yahoo! YSlow: I love it when powerhouses like Google, Yahoo, and Microsoft give back to the developer community by providing some free and useful tools. YSlow is a monster albeit a well designed one in that it's features aren't invoked until you ask for them thus keeping your average browsing experience relatively quick. This tool is indispensable for analyzing website speed bottlenecks and consequently design (layout) issues. Yahoo's YSlow relies on another must-have tool Firebug. Again, I will go into much greater detail about these tools soon but if you're not currently using them I highly recommend checking them out. They will make your website development a brighter world and neither are specific to Asp.Net.
Skynet's HTML Validator: Even if you're not a standards compliant centric developer (shame on you) this tool is invaluable. There have been countless times I've run into a layout or design flaw that I couldn't figure out even with FireBug. Sometimes the issue is, quite simply, that I have an artifact in my outgoing XHTML that is propogating down the DOM model to create very undesired results. The HTML Validator is a great tool for catching these flubs.
If you are a standards minded developer and strive to add the...
(or similar compliance) logo to your website then this tool offers huge time saving by bring the validation service to your local machine via Firefox.
Colorzilla: This is a handy tool for fetching HTML color codes in various formats. Although not a power tool in terms of performance analysis I couldn't live without this tool and use it daily.
LiveHttpHeaders: When I need information on what is being posted/received in the HTTP headers this is where I go.
IE Tab: Although I do my personal browsing and development testing in Firefox my target audience is typically an Internet Explorer browsing crowd. This tool is great for switching your gecko rendering engine over to IE to take a look at what the customer will see. I'd rather not load up IE 8 just to take a look at each web page I've designed to make sure it looks the same as my Firefox page, this is how. Also, if you've ever been to an ActiveX dependent web page, having filled in form information only to get stopped because the page requires IE, this is a great way to switch over, refresh the page and not lose everything you've typed in up to that point.
FireShot: I use this extensively for documentation provided to clients of the websites I'm working on. The ability to grab complete screen-shots of a web page, not just the portion visible on the screen/browser, is invaluable. It also provides powerful annotation/editing tools to make documentation simple and easy.
ShowIP: A nice quick tool that keeps me from having to dig up the IP Address of the server I'm working on.
Extended Statusbar: This is a useful one-stop shop for page download and render times.
Clear Cache Button: O.K., not really a developer tool but install it and try living without it. Often I need to clear the browser cache to ensure I'm looking at my last minute development changes.
Google Chrome: While Firefox will probably always remain my workhorse for development testing and debugging sometimes I need a light-weight browser just to take a quick test run through some code changes. Please note: Firefox is a very lightweight browser until you load a ton of plug-ins into it. As a contract software and web developer I do a lot of work on laptops when I'm not at home. When I'm working on a less than hardy development workstation such as a laptop I'll use a default, no frills, install of Chrome to view and test website changes with. It carries a much lighter footprint than Internet Explorer of course, while also providing me with glaring design flaws under the WebKit rendering engine. The WebKit rendering engine is also used by Safari so if you don't have a Mac lying around somewhere this is a simple and easy way to get a look at what your Mac based audience is typically seeing. Please note that Chrome and Safari do not run parallel compliance to the WebKit versions so Chrome is not a replacement to Safari targeted development. So, until Firefox (or a plug-in) makes profile switching a breeze, allowing me to mindlessly run a stripped down version or bloated version of Firefox with ease I will continue to have a place for Chrome in my toolkit.
That's all for now. Soon I will do a much more detailed write up of FireBug and YSlow.
No comments:
Post a Comment