If you are a developer, which is highly likely if you are reading this, you will know that one of the things that can be annoying when developing is when views are being created to obtain data in JSON format (that is, resources from a URL which is accessed using JavaScript, for example) or by sending data to the server; It is not always easy to detect the error(s) from the browser; fortunately, Google Chrome offers an interesting tool that allows us to monitor the HTTP requests of the sites we visit, although in our case of greatest interest is from the scope of development of our web applications.
Consulting HTTP requests in Google Chrome
To see the HTTP requests that we make from our application or website we must first go to the Google Chrome development console by pressing F12 or from the "More Tools" option in the menu and we will see our development console; for example, in the following image we see that an error occurred in one of the URLs that executes an internal JavaScript in the application:
In this case it is an Ajax that sends a POST request to the server, if it were a GET request, the browser would compose the URL with the parameters and we could detect the error by opening the link in a browser tab, but since the request is through a POST this will not happen.
The Google Chrome development console is used for much more than checking the status of variables, debugging, and viewing request statuses (generally 500, 404 and/or 200), but we can also see the status perfectly as if we copied the URL of the request in the browser but without the need to do so; For this we open our developer console with F12:
By default, when opening the console we are on the "Console" option, we click on the "Netwotk" tab and we will see lists of all the requests made:
We look for the resource that caused us the 500 error:
And we click on the resource that gives us the 500 error:
How can we realize it, we can see the 500 error as if the request had been made in the tab where the application is running through the main thread of the application; this way you can easily detect the error without having to use other tools or place unnecessary prints.
Develop with Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter