Devtoolstips.org

Catalog

• Add custom headers to the network table
• Block DevTools
• Check if a website uses third-party cookies
• Convert images to data-urls
• Create your own DevTools theme
• Customize the columns shown in console.table
• Customize the way objects look in DevTools
• Debug popups that appear on hover
• Debug your print CSS styles by simulating print media
• Debug your Safari Web Apps on macOS
• Disable all CSS styles on the page
• Enable DevTools in Safari
• Explain console errors by using artificial intelligence
• Find all elements with a specific style
• Find memory leaks by comparing heap snapshots
• Find the CSS rule that causes a specific style to apply
• Find the offset parent of an element
• Find why a CSS property is overridden
• Force execution, skipping breakpoints, when paused
• Highlight all elements on the page that match a given CSS selector
• Inspect and debug iframes
• Inspect DevTools with DevTools
• Inspect the user-agent DOM
• Know which of the font in a font-family was actually used
• List all event listeners on the entire page
• Measure arbitrary distances in the page
• Name evaluated files with the sourceURL pragma
• See the accessibility tree
• See the viewport size
• Simulate the Window Controls Overlay feature for PWA
• Speed up or slow down a video
• Take high-resolution screenshots of web pages
• Understand when the Console opens in the main panel and in the drawer
• Use user gesture restricted APIs in the Console