Javascript, Firebug: How do I have multiple views or what is the right of way of doing development?

Question

Most of my javascript work is done with Firebug and I feel annoying most of the times having to switch between the HTML mode and console mode (which again I split into output mode and input mode). When I switch to a different page to see the HTML and come back, I lose the code that I write. What is the best way to go about developing javascript applications using firebug?

Something like a mini IDE would be awesome: It just has to let me insert some code, examine the current page and then let me execute it. Any suggestions?

Answer 1

• Write your HTML in an editor/IDE
• Save your changes
• Preview it in your browser
• Debug using Firebug
• Make your code edits in your SOURCE CODE
• Repeat

Firebug is for debugging and allows you to do some "what if" fiddling while the page is live. This is not a replacement for an IDE.

Answer 2

I use a simple text editor (vim) to write Javascript and HTML, and I check the result every now and then in Firefox. I have always two windows open: one for my text editor, and one with the current page open in Firefox. After saving a change in the Javascript, I switch to the browser and refresh the page to observe results. That was my workflow until recently.

A couple of weeks ago, I discovered the Combiner tool by Nicholas C. Zakas. To release my Javascript code, I am now using a complete build process based on Apache Ant, similar to what I was using while doing Java development previously.

The first step is to check the Javascript code with the JSLint tool by Douglas Crockford. I used to painfully copy and paste my Javascript code in the online version of the tool, once in a while; being able to run it on all my Javascript files at once with this Ant script is a huge convenience.

The second step is to combine all my Javascript files into a single file using the Combiner tool. The third step is to minify the Javascript code using YUI Compressor by Yahoo!. These last two steps allow to optimize the delivery of Javascript code to reduce page loading.

You can find an example Ant build file that you may adapt to your own needs. I am currently using this file to build my own Javascript library, bezen.org.

Answer 3

The other answers so far have been correct: I've never heard of anyone actually developing inside Firefox/Firebug, because it's a tool designed for debugging, not coding. To do your coding, you should use a tool designed for it (either a text editor or a full-fledged IDE).

But that being said, you might want to check out FireEclipse (http://www.almaden.ibm.com/u/bartonjj/fireclipse/index.html). It will allow you to integrate Firebug with the Eclipse IDE (which itself has at least three different JS plug-ins to choose from). Alternatively I think the main (aka Web Standard Toolkit, aka WST) JS editor for Eclipse has some functionality which is similar to Firebug, but I've never used it so I don't know the details.

Hope that helps.