Help us make DevTools Tips better! Fill out this survey to tell us more about your DevTools habits and frustrations.
-
Use user gesture restricted APIs in the Console
Certain web APIs are user gesture restricted. This means that they can only be called as a result of... Read more -
Understand when the Console opens in the main panel and in the drawer
Have you noticed how the Console tool is sometimes displayed in a top-level tab (just like all other... Read more -
Find all elements with a specific style
Let's say you want to list all of the elements on a page that are absolutely positioned. Or maybe yo... Read more -
Customize the columns shown in console.table
The console.table method is great for displaying tabular data in the console, but what if the object... Read more -
Speed up or slow down a video
You can speed up or slow down a video on a website by using the playbackRate property of the video e... Read more -
View console logs from non-Safari browsers on an iPhone
Using the about:inspect special page you can see your website's logs in Chrome or Edge running on iP... Read more -
List all supported console functions
You've probably already used console.log() in your code to print debugging values to the Console too... Read more -
Access results from recent Console evaluations
Imagine you evaluate a long expression like $$('*').map(el => Object.values(el.attributes).map(at... Read more -
Get the recently selected DOM nodes in the console
If you type $0 in the Console tool, in any browser, the currently selected DOM node is returned. Thi... Read more -
Use document.designMode to spell check your webpage
Amelia Bellamy-Royds shared a really cool tip to spell-check a webpage's content from DevTools: Ope... Read more -
Quickly reference React components in the console
Zee shared a great tip on Twitter if you are working with React and have the React DevTools extensio... Read more -
console.log() is great, but do you know console.table()? console.group()? console.assert()?
You probably know about console.log() already, it's a great way to print variables and objects to th... Read more -
Detect the element with focus at any time
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 -
Query object instances and holders from the console
All browser DevTools have a few built-in functions in the console to do things like get the current... Read moreCategories: Supported by: -
Write code on multiple lines in the Console
If you're feeling adventurous and want to write longer pieces of code in the Console to execute more... Read more -
Automatically logging name and value in console.log()
Using the console of DevTools you can to log some information to debug your JavaScript. The common w... Read more -
Format console messages
You can use special formatters in the console.log function to format logs just the way you want. Us... Read more -
Store a node as a variable to use it in the console
If you want to use a DOM node from the page in the console: Right-click the node in the Elements (o... Read more -
Monitor all events dispatched on an element
You can use the monitorEvents global function in the Console panel to log all of the events dispatch... Read more -
Prototype content changes with designMode
When creating or modifying a design prototype for the web, you may want to quickly edit content in t... Read more -
Apply CSS styles to console messages
The console.log output can be styled in DevTools using CSS. console.log('%c Hello World', 'color: or... Read more -
Find all images without alternative text
With HTML, you can add alternative text to images using the alt attribute. It can be used to add a t... Read more -
Find DOM elements from the console
$ and $$ are 2 functions you can use in the console to find elements in the page. They are essential... Read more -
Persist console messages across page navigations and reloads
By default, the messages displayed in the console get removed as soon as you refresh the page (or na... Read more -
Copy an object from the console
The console panel supports a very handy copy() function that stringifies and copies anything you pas... Read more -
Get the selected element in the console
If you selected an element in the Elements panel (in Chrome, Safari, Polypane or Edge) or the Inspec... Read more -
View performance markers in order
When logging performance.timing events to the console, they appear in alphabetical order since they... Read more