Using Browser Developer Tools and Postman

Learn how to use browser dev tools and Postman to analyze web traffic.

In this video, you will learn how to use Developer Tools within your browser. I have picked Chrome as an example, but the video is equally applicable to Firefox, Safari and other browsers. I have also picked walmart.com as an example, demonstrating login, add to cart and checkout steps.

What you will learn from this video:

• How to activate Dev Tools within the browser
• How to use the Dev Tools interface
• How to inspect HTTP requests and responses within Dev Tools, and replay them using CURL in your local terminal
• How to inspect application storage (cookies and local storage in particular), and decode JSON Web Tokens (JWTs) using jwt.io

This video is ~20 minutes long, and has been split into two parts. Full screen recommended.

Part 1: Overview of Dev Tools; inspecting a login

Part 2: Post-login; inspecting add-to-cart and checkout

Using Postman

As you can see in the above videos, real-world applications are complex and a single action often generate dozens or even hundreds of HTTP requests.

Many of these requests are caused by advertising, analytics, marketing, and security tools used by the website. The core functionality of the website can often be found in just a handful of HTTP requests, often to API endpoints.

Once you have narrowed down the API endpoint(s) involved for a given function, it can be helpful to simulate the request using Postman (free download). Postman allows you to easily adjust request headers and bodies, save and organize requests into collections, view responses and do a lot more.