How to Inspect and Design Transitions – Pause/Stop Requests with Fiddler

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.

design and layout transitional elements, interactions, loading overlay by pausing the loading of a page

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-logo

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:

pause or stop a request with breakpoint on POST in Fiddler - to design and layout transitions in web apps

  1. Open Fiddler
  2. Navigate to the “Filter” Tab
  3. Turn on the checkbox “Use Filters
  4. 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 🙂