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, pre

Answer 1

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

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 4

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 5

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.

Answer 6

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