Chrome Dev Tools - Modify javascript and reload

Question

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

User · Answer

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    Save the file locally Edit as required Profit      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

User · Answer

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

User · Answer

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

User · Answer

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    Open the Sources panel  Open the Overrides tab  Click Setup Overrides   Select which directory you want to save your changes to   At the top of your viewport  click Allow to give DevTools read and write access to the directory    Make your changes     UPDATE  March 19  2018   It s live  detailed explanations here  https   developers google com web updates 2018 01 devtools overrides

User · Answer

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

[javascript] Chrome Dev Tools - Modify javascript and reload

Examples related to javascript

Examples related to google-chrome-devtools