DEV Community 👩‍💻👨‍💻

Cover image for HTTP Request Inspector - Capture and inspect HTTP requests.
Kiran
Kiran

Posted on • Originally published at kirank.hashnode.dev

HTTP Request Inspector - Capture and inspect HTTP requests.

Introduction

Most of the time, you will want to capture and inspect HTTP requests as a developer. This is a common task in web development. The HTTP Request Inspector is a tool that helps you do that.

An everyday use case is to use the endpoint as a webhook to receive HTTP requests from a third-party service (Eg: Stripe).

HTTP Request Inspector is open source, and you can host it yourself. This allows you to host the HTTP Request Inspector on your servers and don't share what you send to the endpoints with the third-party servers.

Features

Here are some of the features of the HTTP Request Inspector.

Image description

Create HTTP endpoints

You can create HTTP endpoints that receive different HTTP methods (GET, POST, PUT, DELETE, and PATCH). You can create as many endpoints as you want.

Capture and inspect HTTP requests

Once you have created an endpoint, you can capture and inspect HTTP requests. For example, send a request to the endpoint, and the tool will capture and display the request body, cookies, and headers.

Copy and paste the code

The tool will display the code for making HTTP requests in different languages for each endpoint. You can copy the sample code and paste it into your code.

Create a user account

You can create an account to use the tool. A user account allows you to store your endpoints and your captured requests. Authentication is powered by the Supabase and supports authentication using email/password and GitHub.

Image description

Technologies used

I used the following technologies to create the HTTP Request Inspector:

Frameworks and Tools

  • Next.js
  • Prisma
  • TypeScript
  • Tailwind CSS
  • ESLint
  • Prettier
  • Husky

Infrastructures

  • Deployed on Vercel
  • Database by PlanetScale

Deploy on Vercel

Deploying on the Vercel is the easiest. First, click the Deploy button on the README and follow the instructions on the Vercel deployment wizard.

Install on your machine

git clone https://github.com/devkiran/http-request-inspector
Enter fullscreen mode Exit fullscreen mode
cd http-request-inspector
Enter fullscreen mode Exit fullscreen mode
npm install
Enter fullscreen mode Exit fullscreen mode
cp .env.example .env
Enter fullscreen mode Exit fullscreen mode

Update the .env file with your credentials.

NEXT_PUBLIC_APP_URL=http://localhost:3000

DATABASE_URL="<PlanetScale database connection URL>"

NEXT_PUBLIC_SUPABASE_URL=<Supabase URL>
NEXT_PUBLIC_SUPABASE_ANON_KEY=<Supabase Anon Key>
Enter fullscreen mode Exit fullscreen mode
npm run dev
Enter fullscreen mode Exit fullscreen mode

Open http://localhost:3000 with your browser to see the result.

Links

Top comments (0)

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.