49

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.

TylerH
  • 20,799
  • 66
  • 75
  • 101
Amit
  • 25,106
  • 25
  • 75
  • 116

8 Answers8

43

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

TylerH
  • 20,799
  • 66
  • 75
  • 101
Leo
  • 13,428
  • 5
  • 43
  • 61
  • do you know if it is possible to auto load those changes every time you revisit the web page? – Ruben Marrero Apr 24 '15 at 20:43
  • as far as persistence goes you would probably have to clone the site to your system locally and go from there. – kpie Apr 25 '15 at 02:23
9

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.

Jon Onstott
  • 13,499
  • 16
  • 80
  • 133
7

Chrome has a pretty strong feature for making changes to JS code. You basically set some breakpoints and once hit you edit JS at your will. More info and demo -- where Paul Irish fixes a broken page.

In case of FF you can use Developer Edition:

JavaScript Debugger Stop, step through, examine and modify the JavaScript running in a page.

artur grzesiak
  • 20,230
  • 5
  • 46
  • 56
  • Any idea why Firefox doesn't offer that feature? I'm willing to use Chrome but since I primarily use Firefox a solution for it would be nice. – static_rtti Apr 18 '15 at 09:10
  • @static_rtti looking https://developer.mozilla.org/en-US/docs/Tools on FF developer edition: `JavaScript Debugger Stop, step through, examine and modify the JavaScript running in a page.` But I primarily use chrome. – artur grzesiak Apr 18 '15 at 09:12
3

Chrome provides an excellent facility to edit the javascript in the browser

step1: Launch the development tool Open Chrome, load a page from your local file system/server and open Developer Tools from the Tools menu or press Ctrl+Shift+I / Cmd+Shift+I. Navigate to the Source tab then either click the Sources icon or hit Ctrl+O to select your JavaScript file

setp2:Edit You can now jump straight in and edit your code. Chrome also offers a useful function list to help you locate the right line — press Ctrl+Shift+O / Cmd+Shift+O

step3:Save Hit Ctrl+S / Cmd+S to save your changes. This updates the file in memory and applies the changes immediately. Note however, that code won’t start again so changes to initialization variables won’t be affected.

To save the changes to the original file, right-click the editor and select Save or Save As…. Once done, you can refresh the page and the script will restart

step4: Undo Did your update cause problem? Right-click the editor and select Local modifications…. The lower pane displays all recent changes and allows you to revert back.

Firefox provides another tool to edit javascript in the browser

setp1: Launch Scratchpad To open the Scratchpad window, press Shift F4, or go to the Web Developer menu (which is a submenu in the Tools menu on OS X and Linux), then select Scratchpad. This will open up a Scratchpad editor window. From there you can immediately start writing some JavaScript code to try.

step2: Edit The File menu offers options to save and load JavaScript code snippets, so you can reuse code later if you like.Code completion and type information is only available from Firefox 32 onwards. To list autocomplete suggestions, press Ctrl Space. To show the popup, press Shift Space in Firefox 32 or Ctrl Shift Space in Firefox 33+.

step3:Execution Once you've written your code, select the code you want to run. If you don't select anything, all the code in the window will be run. Then choose the way you want the code to run using the buttons along the top, using the Execute menu, or using the context menu. The code is executed in the scope of the currently selected tab. Any variables you declare outside of a function will be added to the global object for that tab.

There are four execution options available.

  1. Run
  2. Inspect
  3. Display
  4. Reload and Run
BhandariS
  • 606
  • 8
  • 20
1

To create/edit the javascript in the browser I'd use firebug(plugin for firefox) or the built in firefox developer toolbar(best used with the developer version of firefox).

Since your bounty comment is asking to fix a broken website, I'd use the above tools to create a JS snippet that fixes your problem. After that I wouldn't want to execute the code in the developer toolbar every time.

So... once you've created this JS snippet that fixes the site for you, you could use GreaseMonkey(plugin) to execute the site fixing script on each visit. That way you can use the site normally and don't need to execute it manually every page load.

red-X
  • 5,108
  • 1
  • 25
  • 38
1

This is currently not possible in Firefox OTB. See bugs 737743 and 486546.

In reference to @artur-grzesiak, "Stop, step through, examine and modify" appears to refer to variables

Community
  • 1
  • 1
mlhDev
  • 2,235
  • 1
  • 22
  • 43
1

Chrome latest versions support local overrides for UI asset files like CSS and JS. Any update directly done in HTML DOM won't work. https://developer.chrome.com/blog/new-in-devtools-65/#overrides

Rajesh
  • 79
  • 1
  • 3
0

In chrome version 42.0.2311 in Developer Tool by click on console you can get window where youi can edit javascript and after press enter can see its effect in browser.

enter image description here

In Mozilla version 37.0.1 after open developer tool by click on console edit your java script code at right side of tool window and after finish editing click on run to test your java script code in browser.

enter image description here

Ashish Patel
  • 3,551
  • 1
  • 15
  • 31