Help us make DevTools Tips better! Fill out this survey to tell us more about your DevTools habits and frustrations.
-
Detect unused CSS and JavaScript code
To make sure your webpage loads and appears fast for your users, load only the CSS and JS code that... Read more -
See the size of the transferred data for images, scripts, or other resources
To know how much data your website transfers between the server and the client to display images, or... Read more -
Emulate color schemes
In CSS, you can use the prefers-color-scheme media feature (docs) to detect if the user prefers usin... Read more -
Manipulate global objects on page load, before other scripts run
When a page loads, and all of its global objects are ready, but before the JavaScript code of the pa... Read moreCategories: Supported by: -
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 -
Re-use scripts as snippets
The Console is great to write short JavaScript expressions that read from the document or manipulate... Read more -
Simulate different devices and screen sizes
There is a great mode in all major browser developer tools that makes it really easy to test your we... Read more -
Install or create extensions to customize DevTools
There's a lot of tools in DevTools already, probably more than you use. But in some cases, you may n... Read more -
Use DevTools in another language
If you want to use DevTools in another language than English, you can do it across all major browser... 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 -
Remove annoying page overlays and other elements
A lot of websites these days get covered with overlays and crammed with lots of ads and other things... Read more -
Copy CSS selector of an element
Sometimes we need to uniquely identify an element that lacks an identifier, so that it can be refere... Read more -
Edit an element's attributes and tag name with the keyboard
Using the keyboard can be faster than using a mouse in certain cases (and for some people). One such... Read more -
Discover all the tools
DevTools is confusing! There's so much functionality packed in such a small UI. Did you know that Ch... Read more -
Use document.designMode to spell check your webpage
https://twitter.com/AmeliasBrain/status/1521146127327801345... Read more
-
Visualize and debug CSS cascade layers
CSS cascade layers is a CSS feature that allows web developers to define their CSS styles in multipl... Read more -
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
-
Start your HTML and CSS prototypes in the browser directly
Sometimes I need a blank canvas to prototype an idea with HTML and CSS. Something outside of the web... Read more -
Debug popups that appear on hover using the debugger statement
In Debug popups that appear on hover using JS we described how to pause the debugger to inspect popu... Read more
-
console.log() is great, but do you know console.table()? console.group()? console.assert()?
https://twitter.com/nghuuphuoc/status/1505892172700299268... Read more
-
Send feedback, ask for features and report bugs
Browser vendors depend on your feedback to build the right tools for you. Without hearing from you... Read more -
Paste multiple CSS declarations at once
You know how you can paste a CSS property name or value in the Styles (or Rules) panel? Well, you ca... 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 -
Download all images from the page
If you want to download all of the images on a webpage in one go, you can use the following few line... 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 -
Move panels to re-arrange them
Moving panels around the user interface can be very useful to make DevTools more unique to you and a... 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 -
Simulate pseudo CSS classes
If you use :hover, :active, and other such pseudo-classes in CSS, you can actually simulate these st... Read more -
Zoom the DevTools UI to your liking
Do you find the UI of DevTools too small to comfortably work with? Because this UI is made of HTML a... Read more -
See the page in 3D
See your page in 3 dimensions to quickly find out how deeply nested it is, fix z-index stacking issu... Read more -
Easily change CSS number values from the keyboard in increments of 0.1, 1, 10, 100
When playing with styling or layout code in DevTools, it's useful to be able to change widths, margi... Read more -
Find and export CSS changes
If you spent time changing CSS in DevTools, either in the Rules panel (in Firefox), or in the Source... Read more -
Evaluate XPath to find elements in the page
DevTools supports 2 ways to evaluate XPath expressions to help you locate elements in the page. All... 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 -
Console.log() for the web with logpoints
Using the console to log some information is a very common way to debug your JavaScript. But you can... Read more -
Debug popups that appear on hover using JS
Have you ever been frustrated because you couldn't style a popup or tooltip that appeared on hover?... Read more -
Pause script execution when the DOM changes
If you want to know what JavaScript code removes, adds, or modifies a DOM element in the page, you c... Read more -
Change the color theme of DevTools
Chrome, Firefox and Safari all have a light and dark theme for their DevTools. Edge not only has tho... Read more -
Play a sound when a line of JavaScript is executed
Sometimes pausing execution when a line of JavaScript is executed is too much, sometimes you only wa... Read moreCategories: 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 -
Copy an element's XPath expression
You can easily copy an element's XPath expression from DevTools. This is useful if you need this exp... Read more -
Find DevTools reference documentation
If you want to learn more about what other tools exist in a browser, or what features a given tool p... Read more -
Drag and drop nodes in the DOM tree
If you need to move nodes or elements around in the DOM tree, to re-order things in the page, you ca... Read more -
Event listeners are suppressed when paused
This is not really a tip, but rather an interesting thing to be aware of when debugging JavaScript.... 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 -
Draw a box around all elements to debug your CSS and page structure
Simple, yet powerful, * { outline: 1px solid red; } is a useful debugging trick that helps understan... 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 -
Unminify JavaScript code to easily read and debug it
Sometimes, the JavaScript code that runs on a website is minified and really hard to read. This is c... Read more -
Highlight all the elements that a CSS rule matches
When you want to know which elements a given CSS rule will apply to, in addition to the currently se... Read more -
Expand DOM nodes recursively
You can expand all descendants under a given DOM node in one go, to avoid having to expand each node... Read more -
Use the debugger statement to pause script execution
If you prefer to use console.log() statements rather than the JavaScript debugger because you find i... Read more