CODEWITHSUNDEEP
javascriptgoogle-chrome-devtools
CDT
CDT

Reputation: 10631

Chrome Dev Tools - Modify javascript and reload

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)?

Upvotes: 316

Views: 252625

Answers (6)

efrat v
efrat v

Reputation: 1

Yes you can eazily! Source -> filesystem -> choose the conatainer folder -> allow access -> open your file, edit and save. https://www.delftstack.com/howto/javascript/edit-javascript-in-the-browser/

Upvotes: 0

Ashley Schroder
Ashley Schroder

Reputation: 3886

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 lets you run some slightly modified JS client side.

Upvotes: 284

Péter Zajácz
Péter Zajácz

Reputation: 191

  1. In the devtools preferences check the Enable local overrides.
  2. Go to network tab, find the file you want to edit, rigth click on it and select Save for overrides (on the sources/overrides tab you need to add a local folder)
  3. The file appears in a new tab on the Sources tab as local copy, so you can edit this file, and after site reload the new (and edited) override file will load on the site!

Upvotes: 17

Nico
Nico

Reputation: 4416

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

Upvotes: 306

Mars Robertson
Mars Robertson

Reputation: 13213

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 :)

Upvotes: 1

laktak
laktak

Reputation: 60003

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 :)

Upvotes: 63

Related Questions