Tips supported in firefox
- Block resources to test your site without CSS or JavaScript
- Pause script execution when the DOM changes
- Change the color theme of DevTools
- Convert color formats
- Convert font property units
- Copy an element's XPath expression
- Copy an object from the console
- Debug popups that appear on hover using JS
- Use the debugger statement to pause script execution
- Drag and drop nodes in the DOM tree
- Edit clip-path and shape-outside CSS properties by dragging points in the page
- Edit CSS filters
- Edit CSS absolute and relative positions by dragging points in the page
- Evaluate XPath to find elements in the page
- Expand DOM nodes recursively
- Filter requests in the Network panel by status code, mime type and more
- Find all images without alternative text
- Find and export CSS changes
- Find your web component's custom element code
- Find DevTools reference documentation
- Find inactive CSS styles
- Get the selected element in the console
- Highlight all the elements that a CSS rule matches
- Take a screenshot of a single node
- Draw a box around all elements to debug your CSS and page structure
- Persist console messages across page navigations and reloads
- Prototype content changes with designMode
- Find DOM elements from the console
- Sample colors from the page
- See formatted JSON responses
- Send feedback, ask for features and report bugs
- Simulate color vision deficiencies
- Simulate pseudo CSS classes
- Apply CSS styles to console messages
- Event listeners are suppressed when paused
- Throttle the network speed to test your website on slower connections
- Unminify JavaScript code to easily read and debug it
- Switch DevTools to another language
- Console.log() for the web with logpoints
- Visualize the tabbing order on the page
- Zoom the DevTools UI to your liking