More than one command can be used to print messages to the Console panel of Chrome DevTools. Why is that? Well, some logging practices can be used to indicate the severity of the logged data. For instance, a Chrome error log that requires immediate fixing should stand out from the rest of the logs.
Don’t let errors overshadow the purpose of your website: fix issues now!
- In this tutorial, we explain how you can deal with various errors and exceptions that are logged to the Console panel.
- The Console allows you to track the errors and exceptions that pop up, so you can get details behind them and find the causes.
Error Handling Explained
Firstly, let's assume an error or exception has occurred on your page.
After noticing that there is something wrong, you may open the Console to inspect and find an error.
On the right side of the error log, you will notice its source (to which you can navigate). The source may be an URL or a line in one of the page's files.
It is also useful to know how the error's stack trace is viewed.
In the example below, stack frames, related to the error, are shown. You can easily navigate to them. As a result, you will understand the cause of the error better.
You also have the option to pause the execution of the code on exceptions.
Usage of Stack Trace
Chrome Developer Tools allow you to inspect how websites work in more depth. Because you can review associated stack traces, the logs become more informative.
We will now look at the options for working with stack traces.
Each error object has a string property named stack. This property contains the stack trace, which can tell you more about the source of the problem.
console.trace() command makes the console print the current call stack. The command will let you see what's going on at key moments.
This command gives you more control, since using it allows you to set the conditions for errors. If the provided expression evaluates to false, an error message will be displayed.
Note: Read more about
console.trace()in our tutorial on the Console API.
Command to Find Runtime Exceptions
Another important subject we should cover is handling runtime exceptions.
To begin with, we should explain how the
- A message related to the error.
- An URL of the resource that the exception originates from.
- The line of the resource in which the exception occurs.
These three are passed as three arguments (in the order shown above).
- This tutorial informed you of the ways the Console panel of Chrome DevTools can be used to manage errors and exceptions.
- The panel lets you implement detailed analyses about the diagnosed errors and exceptions. From such detailed investigations, developers are likely to debug errors faster.