30 css DevTools Tips
-
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
Categories:
Supported 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 more
Categories:
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
Categories:
Supported 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 more
Categories:
Supported 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 more
Categories:
Supported 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 more
Categories:
Supported 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 more
Categories:
Supported by:
-
Emulate forced-color mode
Operating systems offer an accessibility feature where the colors shown on the screen are converted...
Read more
Categories:
Supported 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 more
Categories:
Supported 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 more
Categories:
Supported 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 more
Categories:
Supported by:
-
Visualize the effect of CSS transforms
CSS transforms can sometimes be hard to wrap your head around, especially when chaining multiple tra...
Read more
Categories:
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
Categories:
Supported by:
-
Simulate pseudo CSS classes
If you use :hover, :active, and other such pseudo-classes in CSS, you can actually simulate these st...
Read more
Categories:
Supported 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 more
Categories:
Supported 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 more
Categories:
Supported 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 more
Categories:
Supported 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 more
Categories:
Supported 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 more
Categories:
Supported by:
-
Convert color formats
Colors in CSS can be expressed in a number of different formats: keyword (e.g. blue), RGB, HSL, hexa...
Read more
Categories:
Supported 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 more
Categories:
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
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:
-
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
Categories:
Supported by:
-
Edit CSS angles
In CSS, several different properties use angle unit values, such as the rotate() function of a trans...
Read more
Categories:
Supported 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 more
Categories:
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
Categories:
Supported 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 more
Categories:
Supported by:
-
Find inactive CSS styles
Firefox has a unique feature that helps find CSS styles that don't have any effect on the page.
This...
Read more
Categories:
Supported by:
-
Edit CSS filters
The filter property in CSS lets you change the way a particular element gets rendered.
Firefox provi...
Read more
Categories:
Supported by: