The second most important element of the DevTools is the Console.

The Console can be seen on its own panel, or by pressing Esc in the Elements panel, it will show up in the bottom.

The Console serves mainly two purposes: executing custom JavaScript and error reporting.

Executing custom JavaScript

At the bottom of the Console there is a blinking cursor. You can type any JavaScript there, and it will be promptly executed. As an example, try running:

alert("test")

The special identifier $0 allows you to reference the element currently selected in the elements inspector. If you want to reference that as a jQuery selector, use $($0).

You can write more than one line with shift-enter. Pressing enter at the end of the script runs it.

Error reporting

Any error, warning or information that happens while rendering the page, and subsequently executing the JavaScript, is listed here.

For example, failing to load a resource from the network, with information on why, is reported in the console.

In this case, clicking the resource URL brings you to the Network panel, showing more info which you can use to determine the cause of the problem.

You can filter those messages by level (Error / Warning / Info) and also filter them by content.

Those messages can be user-generated in your own JavaScript by using the Console API:

console.log("Some info message")
console.warn("Some warning message")
console.error("Some error message")

0:	Introduction