Help us make DevTools Tips better! Fill out this survey to tell us more about your DevTools habits and frustrations.
-
Use user gesture restricted APIs in the Console
Certain web APIs are user gesture restricted. This means that they can only be called as a result of... Read more -
Find the offset parent of an element
To know what an element is offset against horizontally or vertically (Which you do with position:rel... Read moreCategories: Supported by: -
Highlight all elements on the page that match a given CSS selector
When you select an element in DevTools (in the Elements or Inspector tool), you see the CSS rules th... Read more -
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 more -
Customize the way objects look in DevTools
Objects appear in many places in DevTools. Most commonly in the Console tool, but also in various pa... Read more -
Inspect DevTools with DevTools
The user interface of DevTools is built with HTML, CSS, and JavaScript. This means you can inspect a... Read more -
Create your own DevTools theme
You can change the color theme of DevTools to match your preference (see Change the color theme of D... Read more -
Find memory leaks by comparing heap snapshots
Note: If you think your memory leak comes from DOM nodes, you can also use the Detached Elements to... Read more -
Add custom headers to the network table
On the web, when a client (a browser) and a server communicate using HTTP, the requests and response... Read more -
Find the CSS rule that causes a specific style to apply
Here is the scenario: you know there's a specific style that applies to an HTML element in your web... Read more -
Debug your Safari Web Apps on macOS
Starting with Safari 17 (announced at WWDC 2023) any website you use in Safari can be installed as a... Read moreCategories: Supported by: -
Understand when the Console opens in the main panel and in the drawer
Have you noticed how the Console tool is sometimes displayed in a top-level tab (just like all other... Read more -
Know which of the font in a font-family was actually used
The CSS font-family property let's you define a comma-separated list of fonts that the browser engin... Read moreCategories: Supported 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 more -
Inspect and debug iframes
If the page you are working on contains an iframe which you want to inspect and debug, you can actua... Read more -
Take high-resolution screenshots of web pages
Taking screenshots of all or parts of web pages is super useful (scroll down to the See Also part at... Read more -
Customize the columns shown in console.table
The console.table method is great for displaying tabular data in the console, but what if the object... Read more -
Speed up or slow down a video
You can speed up or slow down a video on a website by using the playbackRate property of the video e... Read more -
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 more -
Measure arbitrary distances in the page
Do you need to find out the dimensions of any element or area in the page? Or perhaps the distance b... Read moreCategories: Supported by: -
Replay a XHR request
When you're debugging an XHR request to a backend service that doesn't respond with the right things... Read more -
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: -
List the fonts used on a page, or an element
"What font is that?" or "Why is this font used?" are probably questions you've a... Read more -
See network request paths instead of names in the Network tool
By default, the Network tool displays the name of each requested resource. For example, if a webpage... Read more -
Display the current framerate of your webpage
For a super smooth user experience on your website or app, it's better if the browser manages to ren... Read more