Help us make DevTools Tips better! Fill out this survey to tell us more about your DevTools habits and frustrations.
-
Automatically logging name and value in console.log()
Using the console of DevTools you can to log some information to debug your JavaScript. The common w... Read more -
Move panels to re-arrange them
Moving panels around the user interface can be very useful to make DevTools more unique to you and a... Read more -
Format console messages
You can use special formatters in the console.log function to format logs just the way you want. Us... Read more -
Simulate pseudo CSS classes
If you use :hover, :active, and other such pseudo-classes in CSS, you can actually simulate these st... Read more -
Zoom the DevTools UI to your liking
Do you find the UI of DevTools too small to comfortably work with? Because this UI is made of HTML a... Read more -
See the page in 3D
See your page in 3 dimensions to quickly find out how deeply nested it is, fix z-index stacking issu... Read more -
Cut down on console noise using live expressions
Using the Console of DevTools to log information that changes a lot is a bad idea. First of all, you... Read more -
Easily change CSS number values from the keyboard in increments of 0.1, 1, 10, 100
When playing with styling or layout code in DevTools, it's useful to be able to change widths, margi... Read more -
Get contextual DevTools help
Edge has a feature called the DevTools Tooltips that gives you help about the different tools right... Read moreCategories: Supported by: -
Find and export CSS changes
If you spent time changing CSS in DevTools, either in the Rules panel (in Firefox), or in the Source... 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 -
Evaluate XPath to find elements in the page
DevTools supports 2 ways to evaluate XPath expressions to help you locate elements in the page. All... Read more -
Store a node as a variable to use it in the console
If you want to use a DOM node from the page in the console: Right-click the node in the Elements (o... Read more -
Console.log() for the web with logpoints
Using the console to log some information is a very common way to debug your JavaScript. But you can... Read more -
Debug popups that appear on hover using JS
Have you ever been frustrated because you couldn't style a popup or tooltip that appeared on hover?... Read more -
Monitor all events dispatched on an element
You can use the monitorEvents global function in the Console panel to log all of the events dispatch... Read more -
Edit CSS shadow visually
If you don't remember the CSS syntax for the box-shadow property (and who does!), then Chrome and Ed... Read more -
Hide resources loaded by extensions in the Network panel
If you want to hide scripts and other resources loaded by browser extensions in the Network panel, u... Read more -
Jump from a CSS variable usage to where it is defined
CSS custom properties (also called variables) are very useful to avoid repeating values in CSS, like... Read more -
Pause script execution when the DOM changes
If you want to know what JavaScript code removes, adds, or modifies a DOM element in the page, you c... Read more -
Convert color formats
Colors in CSS can be expressed in a number of different formats: keyword (e.g. blue), RGB, HSL, hexa... Read more -
Change the color theme of DevTools
Chrome, Firefox and Safari all have a light and dark theme for their DevTools. On top of these two t... Read more -
Force PWA periodic background syncs
The periodic background sync API, available to PWAs is a great way to fetch new content while the us... Read more -
Play a sound when a line of JavaScript is executed
Sometimes pausing execution when a line of JavaScript is executed is too much, sometimes you only wa... Read moreCategories: Supported by: -
Visualize the screen reader order for elements within the page
Edge has an accessibility tab within the elements panel that, among other things, lets you visualize... Read more