Help us make DevTools Tips better! Fill out this survey to tell us more about your DevTools habits and frustrations.
-
Inspect DevTools with DevTools
The user interface of DevTools is built with HTML, CSS, and JavaScript. This means you can inspect a... 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: -
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: -
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: -
Reload a page when there's changes on disk
While working on a page locally and you're not using a hot reloading dev server, you need to reload... Read moreCategories: Supported by: -
Remove annoying page overlays and other elements
A lot of websites these days get covered with overlays and crammed with lots of ads and other things... Read more -
Jump from a label `for` attribute to the linked input (and more)
In Firefox, you can jump from an element that references the ID attribute of an other element, to th... Read moreCategories: Supported 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 more -
Edit an element's attributes and tag name with the keyboard
Using the keyboard can be faster than using a mouse in certain cases (and for some people). One such... Read more -
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 more -
Quickly reference React components in the console
Zee shared a great tip on Twitter if you are working with React and have the React DevTools extensio... Read more -
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 more -
Download all images from the page
If you want to download all of the images on a webpage in one go, you can use the following few line... Read more -
Use commands to do things faster
There is a command menu in Edge and Chrome that allows you to quickly access many different features... Read more -
Prototype content changes with designMode
When creating or modifying a design prototype for the web, you may want to quickly edit content in t... Read more -
Sample colors from the page
Being able to sample colors from the page is super useful. Firefox, Edge and Chrome all allow you to... Read more -
Get the selected element in the console
If you selected an element in the Elements panel (in Chrome, Safari, Polypane or Edge) or the Inspec... Read more -
Expand DOM nodes recursively
You can expand all descendants under a given DOM node in one go, to avoid having to expand each node... Read more