Help us make DevTools Tips better! Fill out this survey to tell us more about your DevTools habits and frustrations.
-
Find the offset parent of an element
To know what an element is offset against horizontally or vertically (Which you do with position:rel... Read moreCategories: Supported by: -
Highlight all elements on the page that match a given CSS selector
When you select an element in DevTools (in the Elements or Inspector tool), you see the CSS rules th... Read more -
Find the CSS rule that causes a specific style to apply
Here is the scenario: you know there's a specific style that applies to an HTML element in your web... Read more -
Know which of the font in a font-family was actually used
The CSS font-family property let's you define a comma-separated list of fonts that the browser engin... Read moreCategories: Supported by: -
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 -
Debug your print CSS styles by simulating print media
If you work on a webpage that's supposed to be printed, you probably want to test your print CSS sty... Read more -
List the fonts used on a page, or an element
"What font is that?" or "Why is this font used?" are probably questions you've a... Read more -
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 -
Emulate color schemes
In CSS, you can use the prefers-color-scheme media feature (docs) to detect if the user prefers usin... Read more -
Debug unwanted scrollbars
Sometimes scrollbars appear on a web page in places we don't want them to. And when this happens, it... Read more -
Find the most expensive CSS selectors
When it comes to performance, we often spend time improving our JavaScript code. But CSS has a role... Read moreCategories: Supported by: -
Hide or pin the information tooltip while inspecting page elements
When selecting elements from the page using the inspect tool, the hovered elements get highlighted,... Read more -
Understand flexbox item sizing
Flexbox is a great way to easily distribute elements and empty space in a row or a column, and creat... Read moreCategories: Supported by: -
Find inactive CSS styles
Sometimes we write CSS code that's entirely valid but has absolutely no effect at all, and this can... Read more -
Inspect CSS animations
Modern browser DevTools provide a handy tool to inspect and modify CSS animations, CSS transitions,... 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 -
Quickly spot out-of-viewport elements
Sometimes, either by accident or on purpose, HTML elements end up outside of the visible browser vie... Read moreCategories: Supported by: -
Copy an elements styles
You can extract all the styles of an element in one go by using the Copy styles feature. No need to... 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 -
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 CSS grid areas
A really useful way to position elements on a CSS grid is using the grid-template-areas property. Wi... Read more -
Emulate forced-color mode
Operating systems offer an accessibility feature where the colors shown on the screen are converted... 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 -
Select elements with pointer-events:none by holding Shift
When selecting elements from the page they normally get highlighted on hover and selected on click.... Read more -
Highlight the effect of individual CSS properties on hover
How do certain CSS properties apply to the page isn't always an easy question to answer. While some... Read more -
Visualize the effect of CSS transforms
CSS transforms can sometimes be hard to wrap your head around, especially when chaining multiple tra... Read moreCategories: Supported by: -
Copy a CSS rule as CSS-in-JS format
Do you use a CSS-in-JS framework? If so, you know how frustrating it can be to copy CSS from DevTool... 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 -
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 -
Edit CSS shadow visually
If you don't remember the CSS syntax for the box-shadow property (and who does!), then Chrome and Ed... Read more -
Jump from a CSS variable usage to where it is defined
CSS custom properties (also called variables) are very useful to avoid repeating values in CSS, like... Read more -
Convert color formats
Colors in CSS can be expressed in a number of different formats: keyword (e.g. blue), RGB, HSL, hexa... Read more -
Edit CSS absolute and relative positions by dragging points in the page
Firefox features a position editor that lets you move elements in the page by drag and drop. This wo... Read moreCategories: Supported by: -
Convert font property units
Font CSS properties such as font-size, line-height or letter-spacing can be expressed in multiple di... 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 -
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 -
Edit CSS angles
In CSS, several different properties use angle unit values, such as the rotate() function of a trans... Read more -
Edit clip-path and shape-outside CSS properties by dragging points in the page
The clip-path property is a great way to change the final shape of an element and give it the shape... Read moreCategories: Supported by: -
Tweak css grid and flexbox alignment properties
Chrome and Edge both have a visual editor useful for tweaking flexbox and grid alignment properties.... 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 -
Edit CSS filters
The filter property in CSS lets you change the way a particular element gets rendered. Firefox provi... Read moreCategories: Supported by: