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 moreSupported by:
-
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 moreSupported by:
-
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 moreSupported by:
-
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 moreSupported by:
-
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 moreSupported by:
-
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 moreSupported by:
-
Emulate color schemes
In CSS, you can use the prefers-color-scheme media feature (docs) to detect if the user prefers usin... Read moreSupported by:
-
Debug unwanted scrollbars
Sometimes scrollbars appear on a web page in places we don't want them to. And when this happens, it... Read moreSupported by:
-
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 moreSupported by:
-
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 moreSupported by:
-
Inspect CSS animations
Modern browser DevTools provide a handy tool to inspect and modify CSS animations, CSS transitions,... Read moreSupported by:
-
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 moreSupported by:
-
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 moreSupported by:
-
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 moreSupported by:
-
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 moreSupported by:
-
Debug CSS grid areas
A really useful way to position elements on a CSS grid is using the grid-template-areas property. Wi... Read moreSupported by:
-
Emulate forced-color mode
Operating systems offer an accessibility feature where the colors shown on the screen are converted... Read moreSupported by:
-
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 moreSupported by:
-
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 moreSupported by:
-
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 moreSupported by:
-
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 moreSupported by:
-
Simulate pseudo CSS classes
If you use :hover, :active, and other such pseudo-classes in CSS, you can actually simulate these st... Read moreSupported by:
-
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 moreSupported by:
-
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 moreSupported by:
-
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 moreSupported by:
-
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 moreSupported by:
-
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 moreSupported by:
-
Convert color formats
Colors in CSS can be expressed in a number of different formats: keyword (e.g. blue), RGB, HSL, hexa... Read moreSupported by:
-
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 moreSupported 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 moreSupported by:
-
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 moreSupported by:
-
Edit CSS angles
In CSS, several different properties use angle unit values, such as the rotate() function of a trans... Read moreSupported by:
-
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 moreSupported by:
-
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 moreSupported by:
-
Edit CSS filters
The filter property in CSS lets you change the way a particular element gets rendered. Firefox provi... Read moreCategories:Supported by: