6

Using Chrome's devtools, is it possible to reload just one (or more) of the scripts or stylesheets injected into a page without reloading the whole page? So, if I am on page.html that uses script.js and style.css, is it possible to reload, say, script.js, without refreshing page.html?

  • This is probably not what you want but Stylebot lets you to modify CSS on the fly and also preview your changes and the original style instantly, without reloading. – Vinayak Sep 21 '15 at 20:10
1
+50

An easy way that should work with almost all stylesheets and images is to change the filename by adding an query to their url.

For example, in superuser, the css is:

<link rel="stylesheet" type="text/css" href="//cdn.sstatic.net/superuser/all.css?v=a5d649727a07">

Change that to

<link rel="stylesheet" type="text/css" href="//cdn.sstatic.net/superuser/all.css?v=a5d649727a07&refresh">

And get a reloaded (although the same) style rules.

This can be made into a bookmarklet or copied to the console

[].forEach.call(document.querySelectorAll("link[rel=stylesheet]"), function(link) {
   link.href+=(link.href.indexOf("?") > -1) ? "&refresh" : "?refresh";
})

As of scripts, you shouldn't. Almost all scripts are modifying the page on load or attaching themselves to some handler. You can easily load another js file, but the changes made by the one before are very hard to undo.

0

I can see where this would be useful when trying to debug a multi-page form or something that is loaded by Ajax in response to a series of questions; however, I personally have seen times when modifying CSS or scripts in Chrome's dev tools creates a different result than when those same changes are added to the appropriate file and the page is reloaded from scratch. It doesn't happen all the time, but I've seen it happen enough that I'm hesitant to trust the results after making multiple changes in the dev tools.

I'm not sure why you want to do this, but, assuming it is for the purposes of debugging some long chained process, I would suggest adding a simple test to determine if you are debugging. Depending on how your code is setup, I would try to add debug points that act like the following rough example:

If (current-point != debug-point && debugging === true) Then
   ---code to bypass steps here---
Else
   ---other code to aid the debug process or allow regular execution---
End If

Obviously making a function would be ideal. It may take a little bit of effort to set this up and you'd have to remove it or otherwise disable it before going live, but it would save time over repeatedly reloading a page and having to redo a long chain of steps.

This may not be possible if your code is significantly complicated (through the use of external libraries or simply sloppy code) or if you have to work on a live system. However, if it is possible, then automating or bypassing the steps up to the point you need will let you debug and work faster with more accurate results than relying on Chrome's dev tools to accurately interpret and reflect all changes you make post page-load.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.