How to collect console logs using browser inspector
In this article we have explained what console logs are and how to open Console using web browser's Developer tools to inspect and view logs, errors, and other relevant information. Console logs play an essential role in debugging and error handling. This helps our Developers in identifying issues and analysing unexpected errors. By providing details about errors encountered by users, console logs help in effective diagnosis and resolution to those errors.
Console logs are debugging logs that are captured by the web browsers. These can contain warnings, errors and other information. These are especially helpful for any development tea to narrow down the source of an issue. These can be collected by following some simple steps as shown below.
To capture the console logs, we will first access the developer tools, go to the console, reproduce the issue and get the relevant logs. The below Gif has complete demonstration of how to collect the logs. If you need a detailed explanation, refer to the steps below -
In most web browsers (Chrome, Safari, Firefox, Edge), you can open Developer Tools by right-clicking on the page and selecting "Inspect" or by pressing F12 or (Ctrl + Shift + I on Windows) (or Cmd + Option + I on Mac).
Click on the Console tab in the Developer Tools panel as shown in the image below. The console tab appears on the top of the developer tools. Optionally, you can also clear the logs since we are going to reproduce the issue in the next step.
Once you have navigated to the Console tab, it is always a good practice to re-produce the issue which you can do by refreshing the page. Refresh the webpage by clicking on the reload icon from top left or press F5 (or Ctrl + R on Windows) (or Command + R on Mac).
Note - Refreshing a webpage before collecting logs from the console helps in re-generating the logs and ensures that you capture the most current data and relevant logs that have occurred since the last load.
Logs or messages displayed in red indicate errors. These are the logs we need to collect. Usually the logs are collapsed by default. You need to expand them in order to collect the right details. Look for the right-pointing arrows as shown in the image below. These are used to expand the logs.
Note - make sure to expand all the right pointing arrows in red to check for error log details. For example, in the below image, there are 2 indicators and 2nd is equally important as the error message can be found in that section.
Use our email [email protected] or chat to send us the screenshots captured above. This will help our development team quickly narrow down the issue and resolve it.
Note - Make sure to expand the arrows as shown above so that all relevant details are shared in the screenshots that you send us.
