how to modify a javascript after it has been loaded

2,248 views
Skip to first unread message

matthias...@gmail.com

unread,
Dec 4, 2007, 8:12:47 AM12/4/07
to Firebug
Hi All!

FB allows the user to modify the CSS and the HTML after it has been
loaded, but it looks like it is not possible to do the same thing on
the JS scripts. Is it possible?

thx,
Matthias

John J Barton

unread,
Dec 5, 2007, 1:38:19 AM12/5/07
to Firebug
You can edit js embedded in HTML on the HTML panel. But not JS in
files loaded separately.

On Dec 4, 5:12 am, "matthias.buch...@gmail.com"

]matmat[

unread,
Dec 5, 2007, 3:37:10 AM12/5/07
to Firebug
OK. But is it a FireBug limitation or not?
If yes, do you know another tool providing a such feature? Do you plan
to add this feature into FB?

Regards,
Matthias

John J Barton

unread,
Dec 5, 2007, 10:57:29 AM12/5/07
to Firebug


On Dec 5, 12:37 am, "]matmat[" <matthias.buch...@gmail.com> wrote:
> OK. But is it a FireBug limitation or not?

No its not a Firebug limitation. Firebug just doesn't support editing
JS.

> If yes, do you know another tool providing a such feature? Do you plan

I don't know how you define this feature. Editing the JS inside of
Firefox? No I don't know of another tool. Editing JS files? Yes, a
hundred different editors will do.

> to add this feature into FB?

Yes or no depending on what you mean.

]matmat[

unread,
Dec 6, 2007, 6:19:38 AM12/6/07
to Firebug
John,

Let me detail a little bit more what I am trying to do:
* I have a HTML page using some JS in a separated file.
* The page does not contain any POST, everything is on the client
side.
* I load my page in FF.
* I modify a JS function and save it.
* I don't reload the page.
* I click on something using the modified function.
* My modifications have taken effect.

Let me know if it is still not clear.
Regards,
Matthias

John J Barton

unread,
Dec 6, 2007, 10:49:54 AM12/6/07
to Firebug


On Dec 6, 3:19 am, "]matmat[" <matthias.buch...@gmail.com> wrote:
> John,
>
> Let me detail a little bit more what I am trying to do:
> * I have a HTML page using some JS in a separated file.
> * The page does not contain any POST, everything is on the client
> side.
> * I load my page in FF.
> * I modify a JS function and save it.

Using an external editor I guess.

> * I don't reload the page.

Ok, so what magic tells Firefox to use the new code? I have been
working on a solution using a socket connection to drive Firebug to
recompile the JS.

> * I click on something using the modified function.
> * My modifications have taken effect.

Are you ok with the reality that global operations in the separated JS
file will run every time you edit? I don't know if this can be
prevented.

Julien Wajsberg

unread,
Dec 6, 2007, 11:13:34 AM12/6/07
to fir...@googlegroups.com
On 06/12/2007, John J Barton <johnj...@johnjbarton.com> wrote:
> * I modify a JS function and save it.

Using an external editor I guess.

I guess it is what he would like to do with Firebug ;)



splintor

unread,
Dec 9, 2007, 12:02:13 AM12/9/07
to Firebug
When I need to do something like that, I first edit the function in my
editor, e.g.:

function eventHandler() {
alert('this is the modified function!');
}

And then, if I want to test it, I copy it to Firebug's console (and
get the multiline mode) and then change the first line to be:

window.eventHandler = function () {

this causes the eventHandler function in the page to be what I want so
I can check my changes without refreshing the page.

I agree this is tedious, and doesn't really scale for many changes,
but since Firebug currently doesn't support any better option, this is
my way of testing Javascript changes without reload. Note that this
becomes problematic if the changed function is used with Prototype's
bind(), or bindAsEventListener(), since in that case, a new anonymous
function is really used instead.

I hope that helps,
splintor

John J Barton

unread,
Dec 10, 2007, 7:29:19 PM12/10/07
to Firebug
I'm curious: why not reload? Seems like it would be way faster, so
there must be something about your setup or requirements which are
quite different from mine.

John

]matmat[

unread,
Dec 11, 2007, 5:51:48 AM12/11/07
to Firebug
Hi All,

I have been pretty busy these last days, that's why I did not answer
you.
John said: *Using an external editor I guess.
If I can't use FireBug to do what I want, I will need to find the
cache files and edit them by myself.
I figured out that I can get the cache location by entering
about:cache as a URL.
I don't know exactly how FF orgonizes its cache files, but I found a
JS file from my page, modified it. But my modifications have taken
effects only after a reload ;-(

John said: * Ok, so what magic tells Firefox to use the new code?
That's a good question. I wonder if there a way to ask FF to update
its reference to a JS. FireBug is able to do the same trick but for
HTML, so it should be possible for JS!

John said: *I have been working on a solution using a socket
connection to drive Firebug to recompile the JS.
Does this project have been stoped? Did it work?

John said: *Are you ok with the reality that global operations in the
separated JS file will run every time you edit? I don't know if this
can be prevented.
I am ok with that.

Julien Wajsberg said: *I guess it is what he would like to do with
Firebug ;)
Now I know how to edit a JS file in the FF cache. But I miss the
update in live feature!

splintor: that's an interesting proposition. I will try.

John said: I'm curious: why not reload?
Well, the application I am working on has about 10k JS lines. A bunch
of stuff is done on the client side as you can guess! In some cases,
it is a real pain to debug because I don't have the feature we are
talking about. In some cases, the application needs to process some
data during about 20 seconds, then it is in the state I want to debug.
If I need to reload, I need to wait 20 seconds again.

I will try slintor's advices and have a look at FireBug code to see
how the HTML update is done.

Regards,
Matthias

JFl...@gmail.com

unread,
Dec 20, 2007, 4:50:35 PM12/20/07
to Firebug
I can answer for myself here. I love to edit javascript from within
firebug, for the same reasons I love using Firebug to tweak CSS rather
than using an external editor and reloading the page. It's quick and
easy and you're already in an environment where you can see what's
going on under the hood. That immediate feedback is what makes
debugging CSS in Firebug so great. Click, "that doesn't look right".
Click again, "got it."

jon
Reply all
Reply to author
Forward
0 new messages