How to edit JavaScript in Firebug? How to edit JavaScript in Firebug? javascript javascript

How to edit JavaScript in Firebug?


alt text
(source: fidelitydesign.net)

You can use the Firebug Console tab to write Javascript. I use this quite a lot of rapid prototyping of code before I integrate it into my projects. When you use the Console, javascript is executed in the context of the current page. Therefore, and scripts that are currently defined for that page, can potentionally be redefind. E.g., in the Console window, I could do this:

$ = function() { alert("Whoops"); }

...and that would redefine the $ function used by JQuery.


There is a "Scratchpad" built into the Mozilla framework. This can be reached from within Firefox.

In the "Tools" menu under "Web Developer"->"Scratchpad".

Or...

Just right click on any element on your page.Select "inspect element"On the inspector toolbar, far to the right, there is a noteblock "Scratchpad", press it.

enter image description here

Now you get a Javascript editor with syntax highlightning etc.. From here you can open/save your javascript source file.

enter image description here

Read more bout it here.


As far as I know only Chrome's dev tools support editing JavaScript inside their Sources tab (not just via the command line). And you can add an extension like Tincr or DevTools Autosave and Chrome will save the changes to your JavaScript files on the disk. So it is pretty much a complete IDE for JavaScript.

Otherwise if you are using Firebug, you would have to test your code in the Command Editor, then open your text editor and open that file you were looking in Firebug and then add those changes inside your text editor and save.

I hope that one day they will enable JavaScript to be editable inside the Script panel of Firebug.