Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do you edit Javascript in the browser?

I was looking for a way to edit JavaScript in a browser, such as Firefox, on the fly and execute it. Firebug allows us to edit HTML and CSS on the fly but JavaScript is a pain. I have to go back to the source and modify that.

I don't understand why the browser developer tools don't allow editing. Is there a way to do it?

[Update]: Marked a new answer in 2015

Quick pointers:

  • IE now provides one of the best dev/debugging experience
  • Chrome provides IntelliSense while writing javaScript, which is cool
  • FF works the same way as 2010..!

One can use all three (Firefox, Internet Explorer, and Chrome) browser consoles to update an existing function: say I had a function a() which used to do console.log('a'), I can go to console, redefine the function a() as alert('a') and execute it again to see an alert box.

When I had asked this question in 2010, browsers were not so great at debugging JavaScript and also I was probably unaware that a function can be replaced on the fly.

like image 645
Amit Avatar asked Apr 01 '10 05:04

Amit


People also ask

How do I edit a .JS file?

js files are plain text and can be edited using Notepad, TextEdit, or any plain text editor. Some HTML editing software can also edit .


2 Answers

In Chrome: Open Chrome DevTools -> Sources panel, browse in left navigation, or press Ctrl+O to open files included in the page.

Then you can edit the file and press Ctrl+S to save the change, and see what happens with the new codes. I usually do it with the help of break points.

If you are debugging and want to save the changes to your local file system, you could right click on the navigation, and select Add folder to workspace:

enter image description here

In such case, if you save your changes in DevTools, the relevant file in your file system will be updated as well.


For example I add a folder to workspace, in it there is a 1.js:

enter image description here

Then I edit the JS file in DevTools, the change is updated in local file system immediately:

enter image description here

like image 63
Leo Avatar answered Sep 29 '22 10:09

Leo


Sure, I found Execute JS (for firefox) to be helpful at times, and I think it's what you're looking for:

https://addons.mozilla.org/en-US/firefox/addon/1729

It lets you view and modify Javascript on your page.

like image 40
Jon Onstott Avatar answered Sep 29 '22 10:09

Jon Onstott