How to Save CSS/Js Changes of Remote Resource Between Page Reloads or Map Remote Resource to Local in Devtools

Chrome Dev Tools - Modify javascript and reload

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.

save CSS - while browsing, how can I save the css files from inside chrome dev or firebug to local directory

In Chrome Dev-tools: Under the Sources tab, right-click the file and click "Save as"

Chrome Dev Tools - Workspace mapping mismatch

Workspaces is built to map the same file that's in file and served over the network. (like serving ~/code/app to localhost:8000).

It will not work for serving a local file as a replacement. There are some Chrome extensions for this, I recommend Flip the Script.

Chrome Dev Tools - Mapping network resource to local file not working

Is my assumption wrong that this feature in chrome dev tools can allow loading a resource locally, as if it was loaded from the original location?

I don't think this is accurate. When you map a file on a server to your local workingspace, Chrome acts as a sort of editor for your local files. You can edit the files through Chrome and Command+S to save your local files. But nothing has changed on the server. It doesn't update the files on the server, and it doesn't tell Chrome to "Use my local files instead of what's on the server".

What many people do is automate the deployment process so that when a local file is updated (either through Chrome + Workspace Mapping or just simply by editing in your editor), your working copy gets deployed. That way, next time you reload the browser, you'll see your edits.

Edit: From the workspace documentation:

And you can map resources served from a local web server to files on disk, so when you change and save those files, you can view them as if they were being served.

I think the key here is local web server. I did a bit more digging and found this dev tools docs issues, with a comment effectively saying that what you're trying to do isn't supported:

The DevTools currently does not do resource substitution. It can simply map the remote files to your local copy so if things are kept in sync (like using a local server on-system) then when refreshing your modifications can persist.

Looks like you'll need a way to deploy after making changes or have your devtools workspace point to the server docroot.

---

Related Topics