Edit and Replay your network requests, direct from the browser

September 2, 2020 · 3 minute read · Tags: angular | blazor | react

You know how it goes; you build your shiny new feature using Blazor, React, Vue, <insert framework here>.

You test locally; everything works as it should.

Then you push to production and…

… everything is broken!

Any number of things can break your app in prod but one of the biggies is data coming back (or being posted) via your network calls which doesn’t match what you expected.

For some time we’ve been able to inspect those network requests via the browser’s Dev Tools, to see what’s really going on.

You can inspect the request, check what parameters are being sent across, then look at the response and inspect the resulting data to see why your feature might be working the way it is.

But, what if you want to play with that request, tweak it’s parameters, or just replay the request, without having to drive everything from the UI?

Microsoft Edge now includes an Edit and Replay feature comes in, and it’s pretty darn useful.

Unleash Blazor's Potential

Blazor promises to make it much easier (and faster) to build modern, responsive web applications, using the tools you already know and understand.

Subscribe to my Practical ASP.NET Blazor newsletter and get instant access to the vault.

In there you'll find step-by-step tutorials, source code and videos to help you get up and running using Blazor's component model.

I respect your email privacy. Unsubscribe with one click.

    So long as you’re using the new (actually really good) Chromium version of Edge, you can enable the shiny new Network Console for your browser.

    With that, head over to any network request in the Dev Tools, right-click and select Edit and Replay and…

    The Network Console springs into life and shows you the request, including things like Query parameters, the request Body and Auth tokens etc.

    From here you can click Send to replay the request, at which point you can easily inspect the response for that request…

    Then you can download the resulting json, or just edit the request and try again.

    There are of course other ways to achieve similar results. I’ve been a big fan of a tool called Insomnia in recent years.

    But, for testing authenticated requests it was always a bit of a pain to locate the JWT auth token, copy it and paste it across to Insomnia, then set up the request etc.

    Now, with a couple of clicks you can replay requests right there in the browser, Auth tokens and everything!

    It’s worth noting this is an “Experimental Feature so expect a few bugs here and there, but overall this looks like a big step forward for testing your client applications.

    Check out this post by Microsoft for all the details (including how to enable this in Edge).

    Join the Practical ASP.NET Newsletter

    Ship better Blazor apps, faster. One practical tip every Tuesday.

    I respect your email privacy. Unsubscribe with one click.

      Next up

      3 simple design tips to improve your Web UI
      Spruce up your features
      The quickest way to integrate PayPal checkout with Blazor SSR in .NET 8
      JavaScript Interop works differently with Blazor Server-side rendering
      Interactive what now? Deciphering Blazor’s web app project template options
      Create a new Blazor Web App and you’ll be asked how you want interactivity to work, but what does it all mean?