Help us make DevTools Tips better! Fill out this survey to tell us more about your DevTools habits and frustrations.
-
Check if a website uses third-party cookies
Cookies are small files that websites save on your computer when you visit them. Websites often use... Read moreSupported 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:
-
Find broken links
The link to X on page Y doesn't work is probably a bug report you've received at some point. But how... Read moreCategories:Supported 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:
-
Simulate multiple devices that are kept in sync
Instead of simulating devices one by one and switching between them, Polypane supports testing on mu... Read moreCategories:Supported by:
-
Show web vitals
Web vitals are a set of metrics that help you determine how well-built your page is. You can learn m... Read moreCategories:Supported by:
-
Autofill forms for testing
In Polypane you can right-click any form on the page and select Autofill form to add dummy values to... Read moreCategories:Supported by:
-
Test your PWA protocol handlers
Progressive Web Apps (PWA) can register themselves to handle URIs with pre-defined or custom protoco... Read moreSupported by:
-
Emulate idle detection states
The Idle Detection API is useful for web developers to detect when the user isn't interacting with t... Read moreCategories:Supported by:
-
Simulate different devices and screen sizes
There is a great mode in all major browser developer tools that makes it really easy to test your we... Read moreSupported by:
-
Simulate a different latitude/longitude geolocation
If your website has features that depend on the geographic location of your users, you can test thes... Read moreSupported by:
-
Copy an element's JavaScript path
JavaScript often needs references to DOM nodes on the page. Getting a reference is sometimes easy wi... Read moreSupported by:
-
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:
-
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:
-
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:
-
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:
-
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:
-
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:
-
Evaluate XPath to find elements in the page
DevTools supports 2 ways to evaluate XPath expressions to help you locate elements in the page. All... Read moreSupported by:
-
Block resources to test your site without CSS or JavaScript
The various resources loaded by your site aren't always guaranteed to reach your users when they vis... Read moreSupported by:
-
Copy an element's XPath expression
You can easily copy an element's XPath expression from DevTools. This is useful if you need this exp... Read moreSupported by: