Css DevTools Tips

Hide or pin the information tooltip while inspecting page elements Chrome, with a webpage and devtools opened to the side. The inspect mode is on, the mouse is hovering an element in the webpage, which is highlighted, but the information tooltip is not displayed.

Chrome, with a webpage and devtools opened to the side. The inspect mode is on, the mouse is hovering an element in the webpage, which is highlighted, but the information tooltip is not displayed.

When selecting elements from the page using the inspect tool, the hovered elements get highlighted,... Read more

Categories:

Supported by:

Understand flexbox item sizing Firefox, with the DevTools Inspector tool opened, showing the Layout sidebar that contains the flex item diagram

Firefox, with the DevTools Inspector tool opened, showing the Layout sidebar that contains the flex item diagram

Flexbox is a great way to easily distribute elements and empty space in a row or a column, and creat... Read more

Categories:

css

Supported by:

firefox

Find inactive CSS styles Part of the Rules panel in Firefox, showing a greyed out flex-grow property, with a tooltip saying that the property is inactive because the selected element is not a flex item

Part of the Rules panel in Firefox, showing a greyed out flex-grow property, with a tooltip saying that the property is inactive because the selected element is not a flex item

Sometimes we write CSS code that's entirely valid but has absolutely no effect at all, and this can... Read more

Categories:

Supported by:

Inspect CSS animations GIF of Chrome devtools showing how to inspect and modify CSS animations using the Animation inspector

Modern browser DevTools provide a handy tool to inspect and modify CSS animations, CSS transitions,... Read more

Categories:

css

Supported by:

Copy CSS selector of an element Screenshot of Edge DevTools, showing how to access the Copy CSS selector option

Sometimes we need to uniquely identify an element that lacks an identifier, so that it can be refere... Read more

Categories:

css

Supported by:

Quickly spot out-of-viewport elements A screenshot of Edge DevTools showing the Elements tool at the top with the DOM tree and the 3D View tool at the bottom, showing a 3D render of the page, with most elements in the same rectangle, and 2 smaller elements outside of the main rectangle

A screenshot of Edge DevTools showing the Elements tool at the top with the DOM tree and the 3D View tool at the bottom, showing a 3D render of the page, with most elements in the same rectangle, and 2 smaller elements outside of the main rectangle

Sometimes, either by accident or on purpose, HTML elements end up outside of the visible browser vie... Read more

Categories:

Supported by:

edge

Copy an elements styles Screenshot of the Edge DevTools Elements panel, showing the context menu on an element and the Copy styles menu item. The screenshot also shows what the result of copying styles is: a flat list of CSS properties and values.

Screenshot of the Edge DevTools Elements panel, showing the context menu on an element and the Copy styles menu item. The screenshot also shows what the result of copying styles is: a flat list of CSS properties and values.

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 Screenshot of Firefox, with a demo page that uses layers and devtools opened, showing the Rules panel with 2 @layer rules

Screenshot of Firefox, with a demo page that uses layers and devtools opened, showing the Rules panel with 2 @layer rules

CSS cascade layers is a CSS feature that allows web developers to define their CSS styles in multipl... Read more

Categories:

css

Supported by:

Start your HTML and CSS prototypes in the browser directly Screenshot of Edge , with a tab opened on the HTML data-url, and DevTools opened showing the Elements and Sources panels with local changes made

Screenshot of Edge , with a tab opened on the HTML data-url, and DevTools opened showing the Elements and Sources panels with local changes made

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 Screenshot of Firefox DevTools, with the Inspector panel showing the Scroll badge on an element

Sometimes scrollbars appear on a web page in places we don't want them to. And when this happens, it... Read more

Categories:

css

Supported by:

firefox

Debug CSS grid areas Screenshot of Firefox, with a highlighted grid in the page showing the area names, and devtools below it with the "display area names" option checked

Screenshot of Firefox, with a highlighted grid in the page showing the area names, and devtools below it with the "display area names" option checked

A really useful way to position elements on a CSS grid is using the grid-template-areas property. Wi... Read more

Categories:

css

Supported by:

Emulate forced-color mode Screenshot of Edge showing a webpage in forced-colors mode, with the Rendering panel next to it in DevTools

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 GIF animation showing how pasting several declarations in a CSS rule in DevTools creates them all

You know how you can paste a CSS property name or value in the Styles (or Rules) panel? Well, you ca... Read more

Categories:

css

Supported by:

Select elements with pointer-events:none by holding Shift Gif animation showing how a pointer-events:none element normally can't be selected, except when Shift is pressed

Gif animation showing how a pointer-events:none element normally can't be selected, except when Shift is pressed

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 GIF animation showing a flex layout in the page, and the cursor moving over various properties in the Styles pane

GIF animation showing a flex layout in the page, and the cursor moving over various properties in the Styles pane

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 GIF animation showing how the CSS transform highlighter appears on the page when hovering over a transform CSS property in the Rules panel

GIF animation showing how the CSS transform highlighter appears on the page when hovering over a transform CSS property in the Rules panel

CSS transforms can sometimes be hard to wrap your head around, especially when chaining multiple tra... Read more

Categories:

Supported by:

firefox

Copy a CSS rule as CSS-in-JS format GIF showing the Styles pane in Edge, with the "Copy all declarations as JS" option being used, and then pasting the result in the Console to show that it is formatted

GIF showing the Styles pane in Edge, with the "Copy all declarations as JS" option being used, and then pasting the result in the Console to show that it is formatted

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 Screenshot of the :hov panel to simulate various pseudo-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 Screenshot of the 3D view tool showing a page's z-index stacking tree as a 3d scene

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 GIF animation of the Styles panel in Edge showing how numbers can be changed in various increments

GIF animation of the Styles panel in Edge showing how numbers can be changed in various increments

When playing with styling or layout code in DevTools, it's useful to be able to change widths, margi... Read more

Categories:

css

Supported by:

Find and export CSS changes Screenshot of the Changes panel in Firefox showing a diff-like view of all the 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 GIF animation showing the shadow editor in Edge's Styles pane

If you don't remember the CSS syntax for the box-shadow property (and who does!), then Chrome and Ed... Read more

Categories:

css

Supported by:

Jump from a CSS variable usage to where it is defined GIF animation of clicking on a custom property link in the Styles panel in Edge

CSS custom properties (also called variables) are very useful to avoid repeating values in CSS, like... Read more

Categories:

css

Supported by:

Convert color formats Gif animation of the rules panel in Firefox, showing the color conversion

Colors in CSS can be expressed in a number of different formats: keyword (e.g. blue), RGB, HSL, hexa... Read more

Categories:

css

Supported by:

Edit CSS absolute and relative positions by dragging points in the page Gif demo of the geometry editor in firefox, toggling it from the Layout panel, and then dragging top and left points to move the element in the page

Gif demo of the geometry editor in firefox, toggling it from the Layout panel, and then dragging top and left points to move the element 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:

firefox

Convert font property units Screenshot of the fonts panel in Firefox, showing the unit conversion drop-down

Font CSS properties such as font-size, line-height or letter-spacing can be expressed in multiple di... Read more

Categories:

css

Supported by:

Apply CSS styles to console messages Screenshot of a styled console message in Edge

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 Gif animation showing how adding the rule in the styles pane if chrome devtools outlines all elements in the page

Gif animation showing how adding the rule in the styles pane if chrome devtools outlines all elements in the page

Simple, yet powerful, * { outline: 1px solid red; } is a useful debugging trick that helps understan... Read more

Categories:

Supported by:

Edit CSS angles Gif animation of the angle editor in Chrome, where a click is made on the angle swatch, and then the mouse is used to change the angle

In CSS, several different properties use angle unit values, such as the rotate() function of a trans... Read more

Categories:

css

Supported by:

Edit clip-path and shape-outside CSS properties by dragging points in the page Gif demo of the shape editor in firefox, clicking on the Rules panel icon, and then moving points around in the page

Gif demo of the shape editor in firefox, clicking on the Rules panel icon, and then moving points around 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:

firefox

Tweak css grid and flexbox alignment properties Screenshot of the grid editor in the Styles pane of Microsoft Edge

Chrome and Edge both have a visual editor useful for tweaking flexbox and grid alignment properties.... Read more

Categories:

css

Supported by:

Highlight all the elements that a CSS rule matches GIF animation showing how hovering over selectors in chrome highlights the matching elements in the page