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.
Here are some of the features of the HTTP Request Inspector.
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.
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.
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.
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.
I used the following technologies to create the HTTP Request Inspector:
Frameworks and Tools
- Tailwind CSS
- Deployed on Vercel
- Database by PlanetScale
Deploying on the Vercel is the easiest. First, click the Deploy button on the README and follow the instructions on the Vercel deployment wizard.
git clone https://github.com/devkiran/http-request-inspector
cp .env.example .env
.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>
npm run dev
Open http://localhost:3000 with your browser to see the result.