Question

[Solved] 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.

Enquirer: Amit

||

Solution #1:

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

Respondent: Leo

Solution #2:

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.

Respondent: Jon Onstott

Solution #3:

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.

Respondent: artur grzesiak

Solution #4:

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
Respondent: BhandariS

Solution #5:

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.

Respondent: red-X

Solution #6:

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

Respondent: mlhDev

Solution #7:

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

Respondent: Ash Patel

The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 .

Most Popular

To Top
India and Pakistan’s steroid-soaked rhetoric over Kashmir will come back to haunt them both clenbuterol australia bossier man pleads guilty for leadership role in anabolic steriod distribution conspiracy