Does a tool exist for dynamically altering running javascript in a browser? For example, to change the values of javascript variables during runtime.
-
1Shouldn't be closed because closing a question is essentially asking for deletion. – George Stocker Feb 04 '09 at 16:47
-
Are you going around all my questions making stupid remarks? – Gary Willoughby Feb 05 '09 at 08:44
8 Answers
So, Firebug really is one of the best options - or, if you are a developer that owns Visual Studio and want to debug using IE, you can do that. Let's assume you will do this with Firebug using Firefox.
First, determine where you want to alter the code and place the following line just before the line you want to start messing with:
debugger;
That will cause Firebug to stop the execution of the script at that point, at which point you can then step through the code and alter the values of variables.
You can also use Firebug to place breakpoints in by clicking to the left of a line of code in the script window of Firebug:

- 1
- 1

- 58,249
- 14
- 102
- 93
Look into the javascript shell here. It is like a debugger in your browser. You can run/alter any javascript function on the active document object.
Very nifty for debugging/handling other peoples javascript, on sites where you do not have access to the source/server.
Did I mention it has tab-completion? it's awesome.

- 723
- 5
- 8
-
This only works in some browsers and does not provide the ability to do what Gary has asked specifically for - i.e. alter running, non-global variables. The only way to do that is to have a breakpoint within code, and this shell doesn't provide for that. I agree that it is a nice tool though. – Jason Bunting Nov 01 '08 at 17:35
-
Nevermind, apparently an editor has added that additional question to the question. Argh! Anyway, this shell really is good, but again, it can't do much for stopping a script mid-way to edit variable values. – Jason Bunting Nov 01 '08 at 17:44
Opera 9 comes now bundled with Dragonfly (FireBug equivalent), and I've understood that it, too, can edit JavaScript on the fly. It's at least a feature to come, if they haven't had the time to include it, anyhow.

- 66,919
- 31
- 85
- 96
As mentioned by others, Firebug allows you to set breakpoints in your JavaScript (although I haven't had great success with hitting breakpoints when my JavaScript is IN an HTML document as opposed to an external file) which will interrupt the execution of a function during runtime.
It also allows you to view the DOM objects and all of the properties (which includes your JavaScript variables).
There is also a Lite version of Firebug that will work in non-Firefox browsers.

- 8,373
- 7
- 39
- 60
Mozdev has a tool called MozREPL. Not only can you alter and redefine the code on the fly, but you can get access to the underlying browser code as well. It's really cool.
It opens up a port on yoru computer amnmd allwos you to attach a telnet session (from local host only) to it to start executing code. You can also open that port up to connections that are not from localhost.... (but beware, that is pretty insecure and dangerous, etc. etc.).
It comes with an emacs minor mode that lets you send various regions of text right to mozdev, and provides a very nice interaction mode. I've further expanded it to set Firebug breakpoints right from emacs, and launch selenium tests. Basically I can script my browser from my editor. Its pretty cool. At some point soon I am going to release the source code.

- 10,526
- 2
- 24
- 32
-
I have used this and it really isn't as easy to work with as Firebug is, it takes way too much effort to get the same thing that Firebug gives you... – Jason Bunting Nov 01 '08 at 22:58
-
You probably aren't using it right then. If all you are doing is running some quick tests, the firebug console will work fine, but if you are redefining functions, then MozREPL can be a lot nicer. Have you checked the MozREPL screencast? – Jonathan Arkell Nov 04 '08 at 17:08
-
I hadn't seen that before. I suppose it could be useful for a few things, but for most uses, I still don't see how it gives me much more than Firebug (which does allow me to redefine functions). Thanks though! – Jason Bunting Nov 04 '08 at 20:08
-
I guess the real thing that works best for me is being able to change the definition of my function inside of my editor, and send that function straight to the MozREPL with a single keystroke, rather then edit definition, copy, paste into firebug, test... – Jonathan Arkell Nov 06 '08 at 17:26
JavaScript has an eval() function, you can build your string and then run it.
<script type="text/javascript" language="javascript">
example = function() {alert('first');}
example();
eval("example = function() {alert('second');}");
example();
</script>
The code above is an example of how eval can be used to change existing code.
@eyelidlessness, this shows that you can change existing code. Your edit to the question clarifies the original question, but therefore make my answer look invalild, but at the time it was originally posted it was a valid point, the original poster should have made the question clearer.

- 4,736
- 2
- 22
- 20
-
What is the down vote for? eval("alter('Dynamically run JS');"), therefore it is a valid answer. The JS is dynamic, and it has been run! – Ady Nov 01 '08 at 17:29
-
I voted down because you can't eval() to alter existing, running code. With eval() you can run more code, but that's not the question. – eyelidlessness Nov 01 '08 at 17:36
-
-
To be honest, your question was already incorrect. eval can alter only global code, which does not answer "alter running Javascript" except in the most extremely poor cases. – eyelidlessness Nov 01 '08 at 18:25
-
but it *can*, and I have proven my point. I can write some more complex code, which shows how AJAX.NET dynamicaclly loads a JavaScript file and uses eval to ensure the code is created. – Ady Nov 01 '08 at 18:28
-
I'm sorry that you're upset about the downvote, but I stand by it. I suggest moving on, the both of us. – eyelidlessness Nov 01 '08 at 18:32
-
-
eval cannot modify code with anonymous functions and the closures created thereby ex post facto. – Jason Bunting Nov 01 '08 at 23:10
-
What you consider "dynamically altering running javascript" to mean, and what I do, obviously differ. However as the question was not clear, it is open to interpretation. – Ady Nov 01 '08 at 23:23
-
In your example, you don't even *need* the eval part - if you got rid of the eval() and took that function re-assignment out of the quotes you put it in, it would work the same and work quicker - I still maintain that you don't know what you are talking about. Rude? Me? Perhaps... – Jason Bunting Nov 02 '08 at 02:38
-
Jason, the example is to show that you can turn a "dynamic" string, built using standard string manipulation into runable code. This code can be used to "alter the JavaScript in the browser". It is deliberatly simplified. – Ady Nov 02 '08 at 08:30