Console DevTools Tips

List all supported console functions Chrome, with the Console panel opened on the side in DevTools, showing the command result, which is an object containing a list of functions such as assert, clear, debug.

Chrome, with the Console panel opened on the side in DevTools, showing the command result, which is an object containing a list of functions such as assert, clear, debug.

You've probably already used console.log() in your code to print debugging values to the Console too... Read more

Categories:

console

Supported by:

Access results from recent Console evaluations The Console in Firefox DevTools showing how using $_ refers to the previous Console result

Imagine you evaluate a long expression like $$('*').map(el => Object.values(el.attributes).map(at... Read more

Categories:

console

Supported by:

Get the recently selected DOM nodes in the console Chrome DevTools, with the Elements and Console tools shown. 5 DOM nodes are selected, one after the other, and then the $0, $1, $2, $3, and $4 shortcuts are used in the Console, showing how they refer to the previously selected DOM nodes

Chrome DevTools, with the Elements and Console tools shown. 5 DOM nodes are selected, one after the other, and then the $0, $1, $2, $3, and $4 shortcuts are used in the Console, showing how they refer to the previously selected DOM nodes

If you type $0 in the Console tool, in any browser, the currently selected DOM node is returned. Thi... Read more

Categories:

Supported by:

Use document.designMode to spell check your webpage

https://twitter.com/AmeliasBrain/status/1521146127327801345... Read more

Categories:

Supported by:

Quickly reference nodes, expressions, and react components in the console

https://twitter.com/ChatterboxDev/status/1506299424712142864 Also learn more about getting the selec... Read more

Categories:

Supported by:

console.log() is great, but do you know console.table()? console.group()? console.assert()?

https://twitter.com/nghuuphuoc/status/1505892172700299268... Read more

Categories:

console

Supported by:

Detect the element with focus at any time GIF animation showing a web page with focus going through different element, and the Edge Console panel with the live expression showing a preview of the focused element

GIF animation showing a web page with focus going through different element, and the Edge Console panel with the live expression showing a preview of the focused element

If you want to know which element has the focus on the web page at any time, you can use a live expr... Read more

Categories:

Supported by:

Query object instances and holders from the console Screenshot of the console in Safari, showing the result of queryInstances(app.TodoItem)

All browser DevTools have a few built-in functions in the console to do things like get the current... Read more

Categories:

Supported by:

safari

Write code on multiple lines in the Console Screenshot showing the button to switch the Firefox console to the multi-line mode

If you're feeling adventurous and want to write longer pieces of code in the Console to execute more... Read more

Categories:

console

Supported by:

Automatically logging name and value in console.log() Screencast showing the different ways the variables are logged with and without curly braces

Screencast showing the different ways the variables are logged with and without curly braces

Using the console of DevTools you can to log some information to debug your JavaScript. The common w... Read more

Categories:

Supported by:

Format console messages Screenshot of a formatted console message in Edge

You can use special formatters in the console.log function to format logs just the way you want. Us... Read more

Categories:

console

Supported by:

Store a node as a variable to use it in the console screenshot of firefox's "use in console" context menu option in the Inspector, and also showing the Console with a couple of tempN variables

screenshot of firefox's "use in console" context menu option in the Inspector, and also showing the Console with a couple of tempN variables

If you want to use a DOM node from the page in the console: Right-click the node in the Elements (o... Read more

Categories:

Supported by:

Monitor all events dispatched on an element GIF animation showing how events get automatically logged when using the monitorEvents function

You can use the monitorEvents global function in the Console panel to log all of the events dispatch... Read more

Categories:

Supported by:

Prototype content changes with designMode Animated GIF of editable web page with designMode on

When creating or modifying a design prototype for the web, you may want to quickly edit content in t... Read more

Categories:

Supported by:

Apply CSS styles to console messages Screenshot of a styled console message in Edge

The console.log output can be styled in DevTools using CSS. console.log('%c Hello World', 'color: or... Read more

Categories:

Supported by:

Find all images without alternative text The output of the console.table command from above shown in the Firefox DevTools console

With HTML, you can add alternative text to images using the alt attribute. It can be used to add a t... Read more

Categories:

Supported by:

Find DOM elements from the console Firefox's console panel, showing 3 different examples of using the $ and $$ built-in console functions

$ and $$ are 2 functions you can use in the console to find elements in the page. They are essential... Read more

Categories:

Supported by:

Persist console messages across page navigations and reloads Screenshot of Edge devtools' console showing the settings panel at the top, with the "perserve log" box checked

Screenshot of Edge devtools' console showing the settings panel at the top, with the "perserve log" box checked

By default, the messages displayed in the console get removed as soon as you refresh the page (or na... Read more

Categories:

console

Supported by:

Copy an object from the console Screenshot of Chrome devtools' console with a line of code using the copy() function

The console panel supports a very handy copy() function that stringifies and copies anything you pas... Read more

Categories:

Supported by:

Get the selected element in the console screenshot of safari's console showing how the $0 shortcut returns the selected elemet

If you selected an element in the Elements panel (in Chrome, Safari or Edge) or the Inspector panel... Read more

Categories:

Supported by:

View performance markers in order Screenshot of the console in Edge showing the PerformanceTiming object, with alphabetical properties, and then using console.table to sort properties

Screenshot of the console in Edge showing the PerformanceTiming object, with alphabetical properties, and then using console.table to sort properties

When logging performance.timing events to the console, they appear in alphabetical order since they... Read more

Categories:

Supported by:

21 console DevTools Tips