I use Fiddler on a regular basis to debug HTTP sessions. See what your browser is requesting, the time it takes and even see the RAW requests and responses. Nowadays I find Fiddler handy to gain a better understanding of the Web API calls.
A less known feature I use allot it the means of editing the HTML, CSS and JavaScript without actually updating the files (on the server). By altering the responses for particular request, I’m able to change my files locally and view them just like they were updated on the server.
When I develop SharePoint Add-ins that mainly consists of JavaScript files and API calls. The development can be a time consuming when publishing the file over and over again to a SharePoint Office365 instance. Every publication can take up minutes of your time and a simple change will not give you the direct feedback. Therefor I use Fiddler to change the response with the data of a file I have locally saved. When I then make a change on my locally stored files, the changes directly become available as if they were changed on the server. This saves me time because I do not have to deploy the Add-in anymore, and I get direct feedback.
This all sounds quite complicated, but in fact it’s very simple using Fiddler.
Keep your fiddler running when requesting the page and find the file you like to change. By selecting the request in the left window, you then can use the ‘Add Rule’ button on the ‘AutoResponder’ tab to add this request to the response list. You now can select the desired local file (Rule Editor) that contains all your changes and press the ‘Save’ button to save the changes. An important setting is to check both ‘Enable automatic responses’ and ‘Unmatched requests passthrough’ checkboxes. By now refreshing the page your request will respond with the new files witch are stored locally.
In my example I like to change the App.css file and return the App.css stored locally. What you might noticed in the screenshot, that I changed the request URL from ‘EXACT:https://mavention1nl-27798620f05bf5.sharepoint.com/sites/mavimdemo/MavimPublication/Content/App.css?v=1000’ to a shorter version like ‘/sites/mavimdemo/MavimPublication/Content/App.css?v=1000’. I did this because when I do install the SharePoint Add-in again on the server, I will get a new URL. Therefor I removed the first part of the URL.
One thing that I really recommend when selecting respond file (in my case D:\Source\...\.App.css). Is to select the file from the location where your source control storages the files that you are working on. When you do make changes to the file, you can quickly revert the changes to the original state or checking/push the changes back to your source control.
This works for all browsers. It does not matter if you use Internet explorer, Firefox, Chrome or Edge you can keep your favorite browser for debugging and/or just use them all to test your changes.
Beside of SharePoint Add-ins, Websites, Intranets, … you can also use this technique for native App (Windows, Android or iOS) development. Whereas you can modify every API call from the App with a response you need to have.