Improve your development time

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

Firefox FireBug

Internet Explorer Developer Toolbar

Internet Explorer Developer Toolbar

Opera Dragonfly

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.

You made it all the way down here so you must have enjoyed this post! You may also like:

(Not only) Magento .gitignore generator Darko Goles
Darko Goles, | 11

(Not only) Magento .gitignore generator

Magento with xDebug, web services API and testUnit Darko Goles
Darko Goles, | 5

Magento with xDebug, web services API and testUnit

Magento API V2 Soap unit testing Darko Goles
Darko Goles, | 3

Magento API V2 Soap unit testing


  1. Well written post, thnx.
    for me I tried many IDEs and so far nothing beats Zend Studio!
    I like netbeans but i feel its very heavy, maybe extra RAM will solve the problem.
    I have 1 question in these pictured i noticed Class names over each block, how I can get this while development?

  2. Hi Scott,

    Setting up NetBeans or any other IDE out there (ZendStudio, NuSphere) to debug PHP projects of these magnitude is in my modest opinion MISSION IMPOSSIBLE.

    You see, before i made jump to PHP I was working on a ASP.NET and C#… Debugging .Net stuff with Visual Studio and debugging PHP with Xdebug or any other so called debugger out there are completely two different worlds. This is where Microsoft beats open source at any step. I stand with what I say here.

    Using XDebug with Magento or any other bigger project will make you regret you ever lost time on it. It simply DOES NOT WORK! It breaks you Apache every now and then. And it simply does not do the debugging the right way, it does not traverse all included files and so on…

    My advice, use Zend_Debug::dump($someVar); with Magento. This might be the stupidest form of debugging while using advanced IDEs but at least it works. I say stupidest because it is time consuming when you have to var_dump or debug or whatever on each variable you want to check. Then after your finished you delete all those debug, var_dump and print_r… You see my point.

  3. Ah, I was hoping you’d share how to debug and traverse complex apps like M in NetBeans. Perhaps an idea for another article? 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <blockquote cite=""> <code> <del datetime=""> <em> <s> <strike> <strong>. You may use following syntax for source code: <pre><code>$current = "Inchoo";</code></pre>.

Tell us about your project

Drop us a line. We'd love to know more about your project.