Charles Proxy

This software lets you map your local stylesheets to a live site, so you don't need to upload new css every time you make a small change. Ask christian@beru.dk for a serial number so you don't just have a trial.

Download the software, and do this if you're on a Mac: SSL Charles Proxy mac fix

Start mapping your stylesheet

If the site on which you want to show your local stylesheet uses HTTPS, you have to add it to a list of URL's inside the program first. You only do this once per site. Go here (or right-click on the site on choose "Enable SSL Proxying"):

And add the desired URL:

Click OK and start recording inside the program:

Go to the live site and add /?debug=true after the url:

Now, go back into Charles and you will see a long list of URL's. Find the one that you added in the SSL settings, and find this specific file. You might need to update the site a few times while recording to see the following directory:

Right click on theme.css, click "Map local" and choose the corresponding file on your own computer inside the theme. Now, when you make changes to your scss files and theme.css compiles, you can see the changes inside your browser when you update the site.

If you want to toggle local mapping on/off, click here:

This mapping can be done for JS files, images, icons etc.

SSL Charles Proxy fix

On MAC:

In Charles go to the Help menu and choose "SSL Proxying > Install Charles Root Certificate". Keychain Access will open.

Find the "Charles Proxy..." entry, and double-click to get info on it. Expand the "Trust" section, and beside "When using this certificate" change it from "Use System Defaults" to "Always Trust".

Then close the certificate info window, and you will be prompted for your Administrator password to update the system trust settings.

You may need to quit and reopen your browser to see the change.

PC and different browsers:

Read more about this here: https://www.charlesproxy.com/documentation/using-charles/ssl-certificates/