is there a way to save css/js changes of remote re

Question

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-s, reload page -> modifications are lost. Or i want to debug some site i don't have an ability to change files of.

I don't want only save changes as in save CSS - while browsing, how can I save the css files from inside chrome dev or firebug to local directory, i want them to persist between page reloads.

Answer 1

I use my apache in debug mode with eclipse so the cahnges are reflected to the site as soon as I save the page.

Answer 2

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.

Answer 3

I don't know if this qualifies as an answer, but it is what I am doing, and the closer that I have get to what you want.

I load the page in the browser, and the I do save as in a local file. Note that I am saving the full page, with HTML, js and CSS.

Now, if I want to modify the a CSS, I edit the HTML and direct these file (or files) to my development files.

I reload the page, and now I can work as you want (saving and reloading what I have saved).

Of course that means that you have full access to the files, and most probably they are local, but I don't think that you are really willing to edit the real web files on line.

When I am finished modifying the files, it's just a matter of syncing my dev files with the web files .

Answer 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!

Answer 5

Just a tip, under Firefox i use Greasemonkey. I dont know if you know this tool, but it allows to run javascript scripts over a webpage for a website. Then, with an adapted javascript you can change css dynamically.

A little get started for greasemonkey: http://www.webmonkey.com/2010/02/get_started_with_greasemonkey/

For chrome it is tampermonkey : http://tampermonkey.net/faq.php

Answer 6

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.