So, you know a frontend library and a backend language and built a bunch of full stack apps? Cool.
What's not cool is when you're working in a frontend team and you have little to no communication to backend team (or when there's limited docs).
Or, what if you've joined a new team, and the frontend codebase is wwwaaaaaaaaayyyyyyyyyyy too overwhelming and you don't know exactly what request you're sending to the backend and what response you're getting?
I'm Gonna Teach You How To Use Inspect Network Calls In Chrome Dev Tools
I'm sure you're wondering why we're not using Postman. The reason is because with Postman, you can hit a specific API endpoint with whatever headers or body you set. With Chrome Dev Tools, you can see which set of API endpoints your app is calling when you perform some action (say when you click a button), and so you'll understand you app's behaviours better.
Anyway, head over to https://dev.to, right click on any area, and click the Inspect tab. Then in Chrome Dev Tools, click the Network tab. You should see something like this.
Keep an eye on the clear icon on top left to clear a bunch of records which you will see in while.
Hit the Latest tab on DEV Community's website. On your Dev Tools, you'll see a bunch of API calls.
If it's a type of xhr, that means, it's an API call (XMLHttpRequest). Some of them might be ambiguous while others would seem kinda familiar.
What did you learn from this? To put it simple, if you click a button, and you expect it to call the backend, and if it's not reflected on Chrome Dev Tools as you expected, it's time to fix your code!
Also, do take note of query string parameters. Under Payload tab, you'll see query string parameters (used in backend) which are appended to your base URL. For example, for the URL https://www.youtube.com?user=ishak&limit=20&category=latest, the query string parameters are:
- user: ishak
- limit: 20
- category: latest
That's it guys. If Chrome Dev Tools seems less scary to you know, you owe me a...
LIKE 👍
Top comments (0)