· 2 min read
Three common tools for web application debugging
You've probably used these tools before for debugging, but have you explored everything they have to offer?
Just getting started with the world of debugging? You might already have most of the tools you need to get started.
All of these tools - Visual Studio Code, Google Chrome, and Postman - are free to use, and widely used in industry.
Visual Studio Code
Visual Studio Code is an interesting mix of a text editor and an Integrated Developer Environment (IDE). While traditional IDEs might only support one proramming language, or have a much more heavyweight structure organized around their own project structures, Visual Studio Code supports languages and technologies through extensibility.
The Visual Studio Code debugger is built-in, but requires some configuration based on the programming language you are using - such as Node.js/JavaScript or Python.
Chrome Developer Tools
Google Chrome includes developer tools in the web browser - similar to the other major web browsers. You may have used it before to view the console logs from your web applications running in the web browser.
Within the developer tools, you can inspect all of the network traffic between your front end and any servers - this is invaluable for things like cookies, authorization headers, HTTP codes, and JSON responses.
You can also inspect the generated Document Object Model (DOM) for your web application, which can help you track down visual problems where the web page doesn’t seem to reflect the changes you expect to see from your code.
Postman
Postman is the last tool to discuss - Postman lets you call HTTP/HTTPS servers from a desktop tool. I personally use it to mimic API calls from the front end to the back end, especially if I don’t control the back end server.
While Postman has added many team or collaboration features over the years, those tend to be very overwhelming, and Postman now supports a Lightweight API Client that simplifies the user interface.
Much of the data available in the Network tab of Chrome Developer Tools is also available in Postman - the difference is that you can easily make your own HTTP requests in Postman.
Conclusion
These are three free, widely-available tools for debugging. Each of these will be discussed in more detail on this site, but you may not be aware of the debugging capabilities of each of these.