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.
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.
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
cd http-request-inspector
npm install
cp .env.example .env
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>
npm run dev
Open http://localhost:3000 with your browser to see the result.
Top comments (0)