is there a way to save css/js changes of remote resource between page reloads or map remote resource to local in devtools?

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

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.

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

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

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

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 6

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 7

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 8

Note, Utilizes jQuery library (not required)

Try, at console

function restyle() {
  $("*").css("color", "blue"); /* development elements, css, js */
  $("head").append("<script>console.log(\"restyle\")</script>"); /* js */
  var t = document.querySelectorAll("*"); /* modified document */
  var outer = document.documentElement.outerHTML; /* modified document */
  var inner = document.documentElement.innerHTML; /* modified document */
  return $.ajax() /* `pseudo` `reload` */
  .done(function(data) { /* original document */
  document.documentElement.innerHTML = outer; /* `psuudo` `document` `reload` */
  console.log(data, inner, outer, $(t)) /* options, `callbacks` */
  /* $.each($(t), function(index, value) { console.log(value) }); */
  })
};
restyle();

Answer 9

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 10

See https://stackoverflow.com/a/31585725/52817:

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

You can even add a tab to the dev tools.