Switch CSS file from remote one to local one via Developer Tool

Developer Tools
#1

Let’s say that I have a website on a remote server, full of data (one example could be product lists with details, prices, discount, etc.) and I have some layout bugs that should be solved in CSS.

This is a situation hard to solve in a local environment because very often our layouts strongly depends by data that are, quite always, only in a remote DB and not easily reproducible locally.

In this scenario, generally I made locally css (better, LESS or SASS) edits, generate new final css, open the file, and then copy&paste this new code onto remote css file using Developer Tool (Style pane) to test my fixes.
It’s effective but quite uncomfortable.

My idea should be the possibility to “switch” via Developer Tool, which css file should be used to render the page, from remote one to local one. Please, imagine how comfortable could be update local file and instantly see fixes online without any page reload, copy&paste.

What do you think about this idea?

#2

Yes that sounds very useful indeed.

I have used proxies very successfully in the past for these kinds of in-production fixes. Fiddler was what I used at the time to redirect requests to certain URLs to local files.

In Firefox DevTools, you could also use the Style Editor panel to edit the CSS on your production website.

Now if you are using a CSS pre-processor then that makes things a bit more difficult (the Style Editor can only let you write CSS, not another language). But the proxy idea still works.

#3

yes ok, thanks for suggstion but… could be very useful if feature could be “native” :slight_smile:

#4

We are looking to extend the new Request Blocking in Network panel with a Request Override feature. Matched patterns would then served from a file on hardware. Seems like that would solve your use case.

2 Likes