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 moreSupported by:
-
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 moreSupported by:
-
Format console messages
You can use special formatters in the console.log function to format logs just the way you want. Us... Read moreSupported by:
-
Simulate pseudo CSS classes
If you use :hover, :active, and other such pseudo-classes in CSS, you can actually simulate these st... Read moreSupported by:
-
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 moreSupported by:
-
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 moreSupported by:
-
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 moreSupported by:
-
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 moreSupported by:
-
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 moreSupported by:
-
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 moreSupported by:
-
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 moreSupported by:
-
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 moreSupported by:
-
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 moreSupported by:
-
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 moreSupported by:
-
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 moreSupported by:
-
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 moreSupported by:
-
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 moreSupported by:
-
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 moreSupported by:
-
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 moreSupported by:
-
Convert color formats
Colors in CSS can be expressed in a number of different formats: keyword (e.g. blue), RGB, HSL, hexa... Read moreSupported by:
-
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 moreSupported by:
-
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 moreSupported by:
-
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 moreSupported by: