Is There A Way To Save Css/js Changes Of Remote Resource Between Page Reloads Or Map Remote Resource To Local In Devtools?

I know about Workspaces recently introduced in DevTools but that is not that i need. For example: page uses jquery that is loaded from CDN, i modify jquery library code, press ctrl

Solution 1:

You got most of it, but here's the slight change:

Make a change in the Styles pane (or in Sources), then click over to Sources, and when your modified file is open, hit ctrl-s.

Then you can right-click the asset in the Sources list and hit Save As... and save the new modified file to disk.

There is no way to save a modified remote file without persisting it to disk and expect it to be changed on reload.

Solution 2:

Workspaces allow you to edit files mapped to a local directory - but naturally, a pre-requisite is to be serving local files.

If you're playing with files you don't have direct/convenient access to (for whatever reason), I recommend setting up a tampering proxy like Burp. In a nutshell, you would be able to modify the server response and perform on-the-fly search and replace like cdn.example.com/jquery-library.js to localhost:8080/jquery-library.js in the html body. All you have to do afterwards is set up a local server (trivial) and edit the local instance of the script!

This is a handy pattern to preview local changes against production content, as long as it's not used in lieu of a test environment.

Solution 3:

It is possible, but quite tricky:

• open resources and right clik to the folder with styles\resources (fo not forget to click "allow" on the dialog that appears below the adress bar)
• then right click on the concrete resource and choose "save as" (save it to the working directory that you specified in the prev step)
• then right click to the same resource and choose "Map to file system resource" (write the same name as in prev. step, e.g. all.css but not all.css?id=234234234, just in case)
• modify the styles in the dev tools.
• refresh the page (and realise that all you modifications doesn't applied)
• open resources, find your workspace folder and your resource in it (e.g. all.css)
• right click on that resource and choose "local modifications"
• in opened console click to "apply original content" and realise that you styles has been applied =) It's quit a tricky way and the better idea is to use something like fiddler to replace resources to local files.

Solution 4:

You could try it this way (for jquery):

-load the page first time and on the sources tab put a breakpoint on line number 1 -then reload the page modify the file and save ( you can see that the page has paused due to the breakpoint ) -press the play button and the page will start to load. The modifications you made will work. The downside of this solution is that once you refresh again the page, the modifications will be lost.

Hope that helps!

Solution 5:

As far as I can tell, there's no way to do this in Chrome's DevTools. You should look through the documentation about saving and making local changes. The only thing that seems to persist through reloads is snippets... but it doesn't seem like that's what you want.

If ever a solution for this is made... I want it. For now, it seems the best you can do is content scripts and the like.