Designing user-friendly applications often involves creating tranisitions between two states. For example after hitting the save button you want to show feedback (a loading overlay with a spinner), so that the user knows your app is actually doing something – processing and saving the data.
Here is an example where communicate that we are saving the Premium settings in discoverize – the html of the overlay is being appended by javascript.
Because these transitional elements are only on screen while the transition takes places it is hard for a frontend designer to design and layout the elements show during the transition. If they are only being hidden with css properties you could make the elements visible with help of firebug or any other browser developer tool or inspector.
However if these elements are loaded/appended by javascript and removed after the transition has finished it is almost impossible to inspect and adjust them.
How to Stop or Pause a Request with Fiddler Filters Break for Inspection
There is an easy way to pause or stop your request: Fiddler filters.
Fiddler is a free desktop web debugging tool by telerik. It allows you to analyse traffic of your web app or website.
Here is how you set a breakpoint on POST to interrupt the request:
- Open Fiddler
- Navigate to the “Filter” Tab
- Turn on the checkbox “Use Filters”
- Go down to “Breakpoints” and turn on the checkbox “Break request on POST”
Done. Now, in your web app, as soon as you press the save button (or equivalent interaction) fiddler stops/pauses the request. In our case the loading overlay is being shown permanently.
You can layout and design the transitional elements as you are used to with firebug and so on.
Once you are done you can either resume the request by pressing “Go” (top left) in Fiddler or simply turn off the breakpoint or filter.
Thanks to Oliver for showing me this tip 🙂