18 console DevTools Tips
-
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:
Supported by:
-
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
Categories:
Supported by:
-
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 more
Categories:
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
Categories:
Supported by:
-
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
Categories:
Supported by:
-
Format console messages
You can use special formatters in the console.log function to format logs just the way you want.
Us...
Read more
Categories:
Supported by:
-
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
Categories:
Supported by:
-
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
Categories:
Supported by:
-
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
Categories:
Supported by:
-
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
Categories:
Supported by:
-
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
Categories:
Supported by:
-
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
Categories:
Supported by:
-
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
Categories:
Supported by:
-
Copy an object from the console
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
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
When logging performance.timing events to the console, they appear in alphabetical order since they...
Read more
Categories:
Supported by: