Tips supported in chrome
- Block resources to test your site without CSS or JavaScript
- Capture node creation stack traces
- Change the color theme of DevTools
- Convert font property units
- Copy an element's XPath expression
- Copy an object from the console
- Use the debugger statement to pause script execution
- Drag and drop nodes in the DOM tree
- Edit CSS angles
- Evaluate XPath to find elements in the page
- Use commands to do things faster
- 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 DevTools reference documentation
- Force PWA periodic background syncs
- Get the selected element in the console
- Highlight all the elements that a CSS rule matches
- Cut down on console noise using live expressions
- 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 quick accessibility information on hover
- 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
- Tweak css grid and flexbox alignment properties
- Unminify JavaScript code to easily read and debug it
- Console.log() for the web with logpoints
- Re-use scripts as snippets
- View performance markers in order
- Visualize the screen reader order for elements within the page