Help us make DevTools Tips better! Fill out this survey to tell us more about your DevTools habits and frustrations.
-
Visualize the tabbing order on the page
Users who do not or can't use a mouse or trackpad can use the tab key to navigate through focusable... 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 -
Simulate color vision deficiencies
People who visit your web pages may have different types of color vision deficiencies that, if you i... 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: -
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 -
Find your web component's custom element code
In Firefox, when inspecting elements (in the Inspector panel), you can click on the custom badge to... 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 -
See quick accessibility information on hover
In Edge, Polypane and Chrome, whenever you use the element selector and hover over elements in the p... Read more -
Filter requests in the Network panel by status code, mime type and more
The Network panel lets you filter requests by status code, or mime type, and more. Click in the fil... 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 -
Edit CSS filters
The filter property in CSS lets you change the way a particular element gets rendered. Firefox provi... Read moreCategories: Supported by: -
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