Improve your development time

If you are developer working on a open source technologies then most likely you are using open source or some freeware tools. Since I’m a PHP developer this post will show examples in context of PHP. Developing for PHP can be quite a fun, or sometimes quite painful.

The biggest minus for PHP if you ask me is the debugging, or shall I say the lack of the debugging. Before getting serious with PHP I played a lot with C# and Microsoft Visual Studio. I have said it numerous times and I cant resist saying it again; there is no open source or even commercial tool for PHP that can match the power of Visual Studio (for lets say C#). Visual Studio is all i one tool for a developer. PHP however is a completely different game. It has commercial IDE’s like ZendStudio, NuSphere PhpEd or lately the open source one like NetBeans 6.5 (still in Beta as of time of this writting).

Few months ago I started working on Magento related projects. Before that I was perfectly comfortable using Notepad++ for all of my development. Due to Magento’s completely new and rarely seen architecture in PHP open source applications I decided to switch to the NetBeans fully. I tried ZendStudio and NuSphere PhpEd but it seemed to me they are no better then NetBeans, which is completely free by the way.

There are people who enjoy working with nothing but simple text editor. I find that approach somewhat error prone. Especially if you are working on a systems with mixed .php, .javascript, .xml files like Magento. Not to mention the speed of code writing. Code completion, like the one in NetBeans, can save you some development time.

Writing and testing the application does not end in the text editor or IDE. Sometimes we have some stuff, parts of code, technically written OK but the browser we are looking the page at is showing some strange stuff. This is most likely due to CSS or JavaScript bugs. These are the bugs (errors) sometimes hard to detect. At some point everything inside our IDE might seem ok, but in browser it breaks.

So, how to we cope with thing like that? One thing you need to have in mind beeing web developer as I. People still use Internet Explore, people still use Firefox, Opera, Safari… And who are we to judge on what they should use. We are here to write applications that will run and look the same across all modern browsers. My favorite browsers are Firefox (for development) and Opera (for casual surfing). Firefox, Internet Explorer and Opera have some great tools for us developers.

If you are the Firefox junky you can download and use FireBug at this link. For Internet Explorer there is Internet Explorer Developer Toolbar avaiable at this link. Since Opera is way to cool to come unprepared, it comes with built in Opera Dragonfly tool. All three tools look similar. However, I’m sure the experienced developers will agree when I say that FireBug is the best among them, then comes the Dragonfly and last but not least Internet Explorer Developer Toolbar. When I say best I’m not saying it in context of “This rocks, that sucks”, I’m primarily thinking in the context of flexibility and the level of options and possibilities each tool comes with.

Here are the screenshots of all three of them in action. Notice the IE, it shows nothing or shall I say it’s not working on this page. Not sure what happened but this sometimes happens, no time to hunt the problem now. Just showing you the screens so you can get the feel of it.

Firefox FireBug

Internet Explorer Developer Toolbar

Opera Dragonfly

Firefox Firebug features

• JavaScript debugging and profiling
• “Live” editing and inspection of (X)HTML code
• CSS editing, modification and visual highlighting
• HTTP Related Network Monitoring

Internet Explorer Developer Toolbar features

• Explore and modify the document object model (DOM) of a Web page.
• Locate and select specific elements on a Web page through a variety of techniques.
• Selectively disable Internet Explorer settings.
• View HTML object class names, ID’s, and details such as link paths, tab index values, and access keys.
• Outline tables, table cells, images, or selected tags.
• Validate HTML, CSS, WAI, and RSS web feed links.
• Display image dimensions, file sizes, path information, and alternate (ALT) text.
• Immediately resize the browser window to a new resolution.
• Selectively clear the browser cache and saved cookies. Choose from all objects or those associated with a given domain.
• Display a fully featured design ruler to help accurately align and measure objects on your pages.
• Find the style rules used to set specific style values on an element.
• View the formatted and syntax colored source of HTML and CSS.

Opera Dragonfly features

• JavaScript debugger
• DOM inspector
• CSS inspector
• Command Line to allow commands to be inputed
• Error Console that outputs validation errors and warnings exhibited by the CSS and JavaScript connected with the page
• Proxy to allow debugging directly on mobile devices

Current release of Dragonfly is an alpha, so as they say it at official opera site “it is currently a little rough round the edges“.

Have you noticed how the list of features on the Internet Explorer Developer Toolbar is the most longer one?! I simply copy pasted the list of features from the original site. Well, look closely at what those features are. Firebug has them all. I said it before, I’m saying it again, FireBug is the most powerful here. Don’t belive me? I dare you to try them all 🙂

Even if Firebug is the best among them I strongly advise on using all of them. As I sad before you should test your pages in all modern browsers unless it’s some sort of in the company web application and you are certain it will be run on only one type of the browsers.

Hope this article will help some of you to jump to these live development test tools.