How to edit JavaScript in Firebug?

Question

I am only able to view the JavaScript files of the website via the Script panel. How can I edit it? I tried everything like double clicking the line that i want to edit etc., but it doesn't let me edit it.

If I move to the HTML tab, I am able to edit the HTML by clicking on the Edit button, but I am not able to edit the JavaScript.

score 65 · Accepted Answer · edited Aug 01 '19 at 11:05

65

_{(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.

edited Aug 01 '19 at 11:05

Glorfindel

21,988
13
81
109

answered Jul 08 '10 at 13:02

Matthew Abbott

60,571
9
104
129

4

Don't forget to click Show Command Editor from Console tab for firebug. – Anup_Tripathi Aug 16 '13 at 04:06

score 13 · Answer 2 · edited Feb 27 '14 at 08:00

13

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.

edited Feb 27 '14 at 08:00

Sebastian Zartner

18,808
10
90
132

answered Sep 27 '12 at 05:58

Pavle Lekic

1,062
1
15
28

2

FWIW the [Firebug issue 5083](http://code.google.com/p/fbug/issues/detail?id=5083) asks for allowing to edit JavaScript on-the-fly within the *Script* panel. – Sebastian Zartner Feb 27 '14 at 08:01

Max Kielland · Answer 3 · 2013-11-14T09:52:36.347

13

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.

edited Nov 14 '13 at 09:52

answered Nov 14 '13 at 09:37

Max Kielland

5,627
9
60
95

2

Note that in the latest version of Firefox you have to enable this option first. At the right top of the toolbar press the config wheel icon ("Toolbar Options") and check under the header "Default Firefox Developer Tools" the checkbox "Scratchpad". – Daan Jun 30 '16 at 07:50

score 4 · Answer 4 · answered Jul 08 '10 at 12:59

4

In the Firebug console, you can type in new javascript. So just redefine functions or variables as needed through that.

answered Jul 08 '10 at 12:59

jalf

243,077
51
345
550

score 2 · Answer 5 · answered Jul 08 '10 at 13:01

2

You can't do it. You should use javascript console to redefine functions.

answered Jul 08 '10 at 13:01

Pavel Strakhov

39,123
5
88
127

score 2 · Answer 6 · edited Nov 21 '11 at 11:44

2

You can also use fiddler.
I use it and it has worked out for me pretty well.

edited Nov 21 '11 at 11:44

Shawn Chin

84,080
19
162
191

answered Nov 21 '11 at 11:35

LearningEveryday

584
1
3
13

Fiddler seem a good idea. It's an external application that intercepts the web requests so that you can make live-edits of the JS etc. – not2qubit Jan 16 '14 at 01:01

How to edit JavaScript in Firebug?

6 Answers6

Linked