Hiding Angular API calls from developers tool network of browser

When, I am hitting one API calls from Angular to Backend, the API call I can see in "Network" section of "Developer's tool"(ctrl+shift+i). I want to hide the API calls from the "network" list. As, I have seen in some websites they are hiding the API calls. Means, datas are coming but it is not being listed in the developer's tool. What should I do?

For example, hitting this websites url https://track.aftership.com/shreetirupati/115601676472 or http://www.shreetirupaticourier.net/Frm_DocTrack.aspx?docno=115601676472, is not hitting any API, does this mean they are accessing data directly from DB in front-end?

Solution 1:

There is nothing that you can do for hiding service calls from Chrome DevTools. You can only authenticate user if you want to provide secure calls.

Recommend you to read this: stackoverflow.com/a/53630102/5955138

Solution 2:

I agree with above @shadowman_93's answer.

There is no way to hide the Network API calls from a browser. And if you want to achieve this in a way, then use Server-side rendering like many popular sites do (Amazon, Airbnb, etc.) Also, if you've used Service Workers then it is possible that few parts of your application might still show the API calls after the first load (generally happens with SPAs).

You can also make your SEO better if you use Server-side rendering as it helps Google crawlers to fetch the important content on the first load of your website.

Solution 3:

You can't hide api calls from network tab but you can do a trick with signalR /websocket to minimize visible API calls.

You will need to create "Get" "Post" etc method at server side and call them from client and pass data.

I would suggest to use this workaround only for APIs having less data transfer.