Fiddler allows you to load a remote website with files from your local machine. It’s a good way to do quick development when your usual setup isn’t handy.
If you’re asking yourself why anyone would need to do this, it’s simply a situation that sometimes comes up. In my case, the part of the site I was working with was written in Java, and I didn’t have my development environment set up for Java development. But that didn’t mean I couldn’t temporarily help with front-end development. Also, if you find yourself having to restart your local server every time you update a script, this could be a way to mitigate that during development.
Download and install Fiddler. At the time of writing we’re using v4.6 on Windows, and this blog post is written with that in mind. The application works on almost any system including Mac OS and Linux.
Set It up for HTTPS Use
If the remote server is using http, not https, you can skip this section.
Got to: “Tools” | “Telerik Fiddler Options”
Go to: “HTTPS” tab and click “Decrypt HTTPS traffic”
A big, scary message shows up, asking you to install Fiddler’s root certificate. Click “Yes”.
A second message appears. Click “yes” to that too.
On Windows, you’ll likely see a User Account Control pop-up, click “yes” on that as well. Click “Yes” on the following TrustCert Confirmation pop-up.
Click “OK” on the TrustCert Success pop-up.
Your computer now blindly trusts Fiddler, and so Fiddler can see all of your encrypted traffic. This is pretty scary, and a security concern, and that’s why the message shows up. This should only be done temporarily, while you’re doing the development, and reverted once you’re done (we show you how below). In the meantime, don’t visit shady websites.
Click “OK” in the “Telerik Fiddler Options” to close that window.
Set up Your Development Files
On Fiddler’s main screen, on the right side, you should see multiple tabs.
Click on the “AutoResponder” tab.
Check both boxes “Enable Rules” and “Unmatched requests passthrough”.
Click the “Add Rule” button, and edit the fields in the “Rule Editor” on the bottom for that rule.
In my case, the website I was working with loaded a file named “dashboard.js”, which had the URL ending with “/dashboard.js”. I had a version of it on my desktop, which I had modified, and pointed the rule to that file by clicking on the lower dropdown in the “Rule Editor” and then clicking on “Find a File…” at the bottom.
At this point we’re all set. Now whenever I visit the remote website the “dashboard.js” file loaded in the browser is replaced by the one on my desktop, and so I can make changes and see how it affects the site. In case this wasn’t clear, this only affects your browser, not the site, and only while “Enable Rules” is checked and Fiddler is open.
There are plenty of more complicated rules you can use to filter requests and replace with your file. If you have two files named “dashboard.js” but coming from different URLs, you will want to give more specific filtering so only the correct file gets replaced. You can find more information on filtering on Telerik’s website, or by clicking the blue “Help” button in the top right corner of the “AutoResponder” tab, as can be seen in the picture above.
Uninstall Fiddler’s Certificate
If you went through setting Fiddler up for HTTPS and installed the certificate, follow these steps to uninstall it once you’re done with development.
Go to: “Tools” | “Telerik Fiddler Options” | “HTTPS” tab
Click on “Actions” and then “Reset All Certificates”. This removes the certificate from your computer.
Fiddler is a very powerful tool, though it can be overwhelming considering the number of options you see and things it can do. One of the most important things in development is knowing your tools and knowing what’s available for you to use. If you want to learn more about Fiddler, you can check out their documentation for specific items or learn it in a more bite-sized format by watching some of their tutorial videos.
Thanks for reading. Remember to learn something new every day, and enjoy the journey!