Help us make DevTools Tips better! Fill out this survey to tell us more about your DevTools habits and frustrations.
-
Empty the cache and hard refresh
Here is a nice tip to quickly empty your cache and refresh the page, in order to test new code chang... 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:
-
Edit an element's attributes and tag name with the keyboard
Using the keyboard can be faster than using a mouse in certain cases (and for some people). One such... Read moreSupported by:
-
Create your own simulated devices
You can simulate various different devices from DevTools, to get an idea of how your webpage might r... Read moreSupported by:
-
Discover all the tools
DevTools is confusing! There's so much functionality packed in such a small UI. Did you know that Ch... Read moreSupported 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:
-
Use document.designMode to spell check your webpage
Amelia Bellamy-Royds shared a really cool tip to spell-check a webpage's content from DevTools: Ope... 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:
-
Automatically get issues your site has with performance, accessibility, security, compatibility, and others.
Edge has a very useful Issues panel that can automatically list a lot of different issues with your... Read moreCategories:Supported by:
-
Take a screenshot of part of a webpage from the Command Menu
The Command menu in Edge and Chrome is a great way to do many of the things you can do in DevTools w... Read moreSupported by:
-
Quickly reference React components in the console
Zee shared a great tip on Twitter if you are working with React and have the React DevTools extensio... 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:
-
Fix low color contrast issues
With DevTools you can detect low color contrast issues which is great. But Chrome DevTools, Edge Dev... Read moreSupported by:
-
Debug popups that appear on hover using the debugger statement
In Debug popups that appear on hover using JS we described how to pause the debugger to inspect popu... Read moreSupported by:
-
console.log() is great, but do you know console.table()? console.group()? console.assert()?
You probably know about console.log() already, it's a great way to print variables and objects to th... 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:
-
Check if your site can be instantly reloaded from bfcache
Most browsers are now able to instantly go back to previously visited pages without having to wait f... Read moreSupported by:
-
Send feedback, ask for features and report bugs
Browser vendors depend on your feedback to build the right tools for you. Without hearing from you... Read moreSupported by:
-
Manipulate complex JSON files using DevTools
I often work with large amount of data that I need to go through and gather interesting information... Read moreSupported by:
-
Detect low color contrast issues
Low color vision is very common, and your choice of text and background colors can negatively impact... 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:
-
Detect the element with focus at any time
If you want to know which element has the focus on the web page at any time, you can use a live expr... Read moreSupported by:
-
Use full browser window for device emulation
Emulating different devices in the browser is incredibly useful. It gets tricky when you are on a de... Read moreSupported by:
-
Record and replay user flows
Have you ever had to test the same user scenario again and again while working on a fix or performan... Read moreCategories:Supported by: