227

Is it possible to modify the JavaScript of a page and then reload the page without reloading the modified JavaScript file (and thus losing modifications)?

CDT
  • 8,269
  • 15
  • 55
  • 89

5 Answers5

245

This is a bit of a work around, but one way you can achieve this is by adding a breakpoint at the start of the javascript file or block you want to manipulate.

Then when you reload, the debugger will pause on that breakpoint, and you can make any changes you want to the source, save the file and then run the debugger through the modified code.

But as everyone has said, next reload the changes will be gone - at least it let's you run some slightly modified JS client side.

Ashley Schroder
  • 3,438
  • 1
  • 17
  • 15
  • 13
    Turns out this was the answer I was looking for. Place a breakpoint on the first line of the javascript code. Then when the break happens, paste your modified code in there. Unpause and it works! – Nicholas Blasgen Jul 23 '14 at 23:12
  • how do you edit or paste code in there? I definitely don't see that functionality in Chrome console. I can edit JS/HTML from the Elements section, but that does not reload automatically. But in the place where breakpoints are set, that appears to be readonly – Josh Sutterfield May 04 '16 at 15:30
  • Unfortunately this is still not a great solution. Any code you add is not available in the console. E.g. adding `var foo = 'bar'` in a script does not expose `foo` to the console. – AgmLauncher Jun 27 '16 at 15:18
  • what's up with external scripts? breakpoints seem to disappear from them. – OlehZiniak Feb 06 '17 at 13:08
  • This works as long as you want to modify externally loaded scripts, neither Chrome neither FireFox debugging tools won't allow to modify the inline javascript, even if its execution gets interrupted with a breakpoint. – Marek Mar 04 '17 at 16:29
  • @Marek try the next answer – laktak Mar 06 '17 at 16:06
  • This answer is now updated. See [Nico's answer](https://stackoverflow.com/posts/48843321/revisions) for a built-in solution as of Chrome 65. – Zach Saucier Mar 21 '19 at 00:20
201

Great news, the fix is coming in March 2018, see this link: https://developers.google.com/web/updates/2018/01/devtools

"Local Overrides let you make changes in DevTools, and keep those changes across page loads. Previously, any changes that you made in DevTools would be lost when you reloaded the page. Local Overrides work for most file types

How it works:

  • You specify a directory where DevTools should save changes. When you make changes in DevTools, DevTools saves a copy of the modified file to your directory.
  • When you reload the page, DevTools serves the local, modified file, rather than the network resource.

To set up Local Overrides:

  1. Open the Sources panel.
  2. Open the Overrides tab.
  3. Click Setup Overrides.
  4. Select which directory you want to save your changes to.
  5. At the top of your viewport, click Allow to give DevTools read and write access to the directory.
  6. Make your changes."

UPDATE (March 19, 2018): It's live, detailed explanations here: https://developers.google.com/web/updates/2018/01/devtools#overrides

Nico
  • 3,117
  • 1
  • 17
  • 17
  • 22
    With the release of Chrome 65, this should be the new accepted answer. (Functionality was already available in Chrome Canary) – Micros Mar 05 '18 at 10:49
  • 1
    I have a file "a.js?ver=1.2". It is saved in the override folder as "a.js", and not loaded as an override. Does it not work when there are parameters? Is there a workaround? – Ralf May 23 '19 at 17:21
  • Works as intended, but need to take care of one thing. You got to clear override configurations or delete locally modified file (saved in the folder that you specify while configuring overrides) once you want to load your original js. – Muhammad Murad Haider Feb 14 '20 at 06:41
  • thanks , I didn't find the Override tab at first, since my navigator panel (the left panel) was collapsed. – pref Jan 25 '21 at 19:26
62

The Resource Override extension allows you to do exactly that:

  • create a file rule for the url you want to replace
  • edit the js/css/etc in the extension
  • reload as often as you want :)
laktak
  • 47,916
  • 15
  • 112
  • 150
  • 1
    Did the trick to me thank you. I used to use Fiddler for Windows before that extension. Right now I can debug remote files on any platform. – Ahmad Alfy Nov 22 '15 at 15:35
  • I don't understand the software, can someone explain how exactly I have to set it up? – Black Feb 08 '19 at 09:25
0

I know it's not the asnwer to the precise question (Chrome Developer Tools) but I'm using this workaround with success: http://www.telerik.com/fiddler

(pretty sure some of the web devs already know about this tool)

  1. Save the file locally
  2. Edit as required
  3. Profit!

enter image description here

Full docs: http://docs.telerik.com/fiddler/KnowledgeBase/AutoResponder

PS. I would rather have it implemented in Chrome as a flag preserve after reload, cannot do this now, forums and discussion groups blocked on corporate network :)

Mars Robertson
  • 11,255
  • 10
  • 63
  • 85
-9

Yes, just open the "Source" Tab in the dev-tools and navigate to the script you want to change . Make your adjustments directly in the dev tools window and then hit ctrl+s to save the script - know the new js will be used until you refresh the whole page.

jacksbox
  • 838
  • 1
  • 9
  • 23
  • What version of chrome? Yes, you can "edit" the content of a script (not scripts on the page itself though), but changes does not have any effect, and ctrl-s / save as just let you save the script locally (as ctrl-as in the main window). – davidkonrad May 06 '14 at 14:38
  • I use version 34 - when I edit an script e.g. add an console.log to an click event (already bond) and save, the console outputs following message: "Recompilation and update succeeded." - after that. when I trigger the click event I get the log-output in the console. – jacksbox May 07 '14 at 10:23
  • When you reload the page it appears to not used the locally modified file. – Jake Wilson Mar 30 '15 at 16:35
  • 34
    you had me at "yes"... but then you lost me at "until you refresh the whole page".... – Cool Blue Apr 25 '15 at 09:57