When it comes to browser DevTools, we all have our own preferences and personal workflows, and we pride ourselves in knowing that โone little trickโ that makes our debugging lives easier.
But also โ and I know this from having worked on DevTools at Mozilla and Microsoft for the past ten years โ most people tend to use the same three or four DevTools features, leaving the rest unused. This is unfortunate as there are dozens of panels and hundreds of features available in DevTools across all browsers, and even the less popular ones can be quite useful when you need them.
As it turns out, Iโve maintained the DevTools Tips website for the past two years now. More and more tips get added over time, and traffic keeps growing. I recently started tracking the most popular tips that people are accessing on the site, and I thought it would be interesting to share some of this data with you!
So, here are the top 15 most popular DevTools tips from the website.
If there are other tips that you love and that make you more productive, consider sharing them with our community in the comments section!
Letโs count down, starting withโฆ
15: Zoom DevToolsIf youโre like me, you may find the text and buttons in DevTools too small to use comfortably. I know Iโm not alone here, judging by the number of people who ask our team how to make them bigger!
Well, it turns out you can actually zoom into the DevTools UI.
DevToolsโ user interface is built with HTML, CSS, and JavaScript, which means that itโs rendered as web content by the browser. And just like any other web content in browsers, it can be zoomed in or out by using the Ctrl+ and Ctrl- keyboard shortcuts (or Cmd+ and Cmd- on macOS).
So, if you find the text in DevTools too small to read, click anywhere in DevTools to make sure the focus is there, and then press Ctrl+ (or Cmd+ on macOS).
Chromium-based browsers such as Chrome, Edge, Brave, or Opera can also display the font used by an element that contains the text:
Note: To learn more, see โList the fonts used on a page or an element.โ
12: Measure Arbitrary Distances On A PageSometimes it can be useful to quickly measure the size of an area on a webpage or the distance between two things. You can, of course, use DevTools to get the size of any given element. But sometimes, you need to measure an arbitrary distance that may not match any element on the page.
When this happens, one nice way is to use Firefoxโs measurement tool:
Note: To learn more, see โMeasure arbitrary distances in the page.โ
11: Detect Unused CodeOne way to make a webpage appear fast to your users is to make sure it only loads the JavaScript and CSS dependencies it truly needs.
This may seem obvious, but todayโs complex web apps often load huge bundles of code, even when only a small portion is needed to render the first page.
In Chromium-based browsers, you can use the Coverage tool to identify which parts of your code are unused. Here is how:
The file appears in the tool along with blue and red bars that indicate whether a line of code is used or unused, respectively.
Note: To learn more, see โDetect unused CSS and JavaScript code.โ
10: Change The Playback Rate Of A VideoUsually, when a video appears on a webpage, the video player that displays it also provides buttons to control its playback, including a way to speed it up or slow it down. But thatโs not always the case.
In cases when the webpage makes it difficult or impossible to control a video, you can use DevTools to control it via JavaScript istead.
<video>
element in the Elements tool (called Inspector in Firefox).$0.playbackRate = 2;
and press Enter.The $0
expression is a shortcut that refers to whatever element is currently selected in DevTools; in this case, it refers to the <video>
HTML element.
By using the playbackRate
property of the <video>
element, you can speed up or slow down the video. Note that you could also use any of the other <video>
element properties or methods, such as:
$0.pause()
to pause the video;$0.play()
to resume playing the video;$0.loop = true
to repeat the video in a loop.Note: To learn more, see โSpeed up or slow down a video.โ
9: Use DevTools In Another LanguageIf, like me, English isnโt your primary language, using DevTools in English might make things harder for you.
If thatโs your case, know that you can actually use a translated version of DevTools that either matches your operating system, your browser, or a language of your choice.
The procedure differs per browser.
In Safari, both the browser and Web Inspector (which is what DevTools is called in Safari) inherit the language of the operating system. So if you want to use a different language for DevTools, youโll need to set it globally by going into System preferences โ Language & Region โ Apps.
In Firefox, DevTools always matches the language of the browser. So, if you want to use DevTools in, say, French, then download Firefox in French.
Finally, in Chrome or Edge, you can choose to either match the language of the browser or set a different language just for DevTools.
To make your choice:
Note: To learn more, see โUse DevTools in another language.โ
8: Disable Event ListenersEvent listeners can sometimes get in the way of debugging a webpage. If youโre investigating a particular issue, but every time you move your mouse or use the keyboard, unrelated event listeners are triggered, this could make it harder to focus on your task.
A simple way to disable an event listener is by selecting the element it applies to in the Elements tool (or Inspector in Firefox). Once youโve found and selected the element, do either of the following:
Note: To learn more, see โRemove or disable event listeners.โ
7: View Console Logs On Non-Safari Browsers On iOSAs you might know, Safari isnโt the only browser you can install and use on an iOS device. Firefox, Chrome, Edge, and others can also be used. Technically, they all run on the same underlying browser rendering engine, WebKit, so a website should more or less look the same in all of these browsers in iOS.
However, itโs possible to have bugs on other browsers that donโt replicate in Safari. This can be quite tricky to investigate. While itโs possible to debug Safari on an iOS device by attaching the device to a Mac with a USB cable, itโs impossible to debug non-Safari browsers.
Thankfully, there is a way to at least see your console logs in Chrome and Edge (and possibly other Chromium-based browsers) when using iOS:
about:inspect
page.Note: To learn more, see โView console logs from non-Safari browsers on an iPhone.โ
6: Copy Element StylesSometimes itโs useful to extract a single element from a webpage, maybe to test it in isolation. To do this, youโll first need to extract the elementโs HTML code via the Elements tool by right-clicking the element and choosing Copy โ Copy outer HTML.
Extracting the elementโs styles, however, is a bit more difficult as it involves going over all of the CSS rules that apply to the element.
Chrome, Edge, and other Chromium-based browsers make this step a lot faster:
You now have all the styles that apply to this element, including inherited styles and custom properties, in a single list.
Note: To learn more, see โCopy an elementโs styles.โ
5: Download All Images On The PageThis nice tip isnโt specific to any browser and can be run anywhere as long as you can execute JavaScript. If you want to download all of the images that are on a webpage, open the Console tool, paste the following code, and press Enter:
$$('img').forEach(async (img) => {
try {
const src = img.src;
// Fetch the image as a blob.
const fetchResponse = await fetch(src);
const blob = await fetchResponse.blob();
const mimeType = blob.type;
// Figure out a name for it from the src and the mime-type.
const start = src.lastIndexOf('/') + 1;
const end = src.indexOf('.', start);
let name = src.substring(start, end === -1 ? undefined : end);
name = name.replace(/[^a-zA-Z0-9]+/g, '-');
name += '.' + mimeType.substring(mimeType.lastIndexOf('/') + 1);
// Download the blob using a <a> element.
const a = document.createElement('a');
a.setAttribute('href', URL.createObjectURL(blob));
a.setAttribute('download', name);
a.click();
} catch (e) {}
});
Note that this might not always succeed: the CSP policies in place on the web page may cause some of the images to fail to download.
If you happen to use this technique often, you might want to turn this into a reusable snippet of code by pasting it into the Snippets panel, which can be found in the left sidebar of the Sources tool in Chromium-based browsers.
In Firefox, you can also press Ctrl+I on any webpage to open Page Info, then go to Media and select Save As to download all the images.
Note: To learn more, see โDownload all images from the page.โ
4: Visualize A Page In 3DThe HTML and CSS code we write to create webpages gets parsed, interpreted, and transformed by the browser, which turns it into various tree-like data structures like the DOM, compositing layers, or the stacking context tree.
While these data structures are mostly internal in-memory representations of a running webpage, it can sometimes be helpful to explore them and make sure things work as intended.
A three-dimensional representation of these structures can help see things in a way that other representations canโt. Plus, letโs admit it, itโs cool!
Edge is the only browser that provides a tool dedicated to visualizing webpages in 3D in a variety of ways.
The Z-Index mode can be helpful to know which elements are stacking contexts and which are positioned on the z-axis.
The DOM mode can be used to easily see how deep your DOM tree is or find elements that are outside of the viewport.
The Composited Layers mode shows all the different layers the browser rendering engine creates to paint the page as quickly as possible.
Consider that Safari and Chrome also have a Layers tool that shows composited layers.
Note: To learn more, see โSee the page in 3D.โ
3: Disable Abusive Debugger StatementsSome websites arenโt very nice to us web developers. While they seem normal at first, as soon as you open DevTools, they immediately get stuck and pause at a JavaScript breakpoint, making it very hard to inspect the page!
These websites achieve this by adding a debugger
statement in their code. This statement has no effect as long as DevTools is closed, but as soon as you open it, DevTools pauses the websiteโs main thread.
If you ever find yourself in this situation, here is a way to get around it:
Note: To learn more, see โDisable abusive debugger statements that prevent inspecting websites.โ
2: Edit And Resend Network RequestsWhen working on your server-side logic or API, it may be useful to send a request over and over again without having to reload the entire client-side webpage and interact with it each time. Sometimes you just need to tweak a couple of request parameters to test something.
One of the easiest ways to do this is by using Edgeโs Network Console tool or Firefoxโs Edit and Resend feature of the Network tool. Both of them allow you to start from an existing request, modify it, and resend it.
In Firefox:
In Edge:
Here is what the feature looks like in Firefox:
Note: To learn more, see โEdit and resend faulty network requests to debug them.โ
If you need to resend a request without editing it first, you can do so too. (See: Replay a XHR request)
And the honor of being the Number One most popular DevTools tip in this roundup goes toโฆ ๐ฅ
1: Simulate DevicesThis is, by far, the most widely viewed DevTools tip on my website. Iโm not sure why exactly, but I have theories:
Itโs important to realize, though, that DevTools canโt simulate what your website will look like on another device. Underneath it, it is all still the same browser rendering engine. So, for example, when you simulate an iPhone by using Firefoxโs Responsive Design Mode, the page still gets rendered by Firefoxโs rendering engine, Gecko, rather than Safariโs rendering engine, WebKit.
Always test on actual browsers and actual devices if you donโt want your users to stumble upon bugs you could have caught.
That being said,
Simulating devices in DevTools is very useful for testing how a layout works at different screen sizes and device pixel ratios. You can even use it to simulate touch inputs and other user agent strings.
Here are the easiest ways to simulate devices per browser:
Here is how simulating devices looks in Safari:
Note: To learn more, see โSimulate different devices and screen sizes.โ
Finally, if you find yourself simulating screen sizes often, you might be interested in using Polypane. Polypane is a great development browser that lets you simulate multiple synchronized viewports at the same time, so you can see how your website renders at different sizes at the same time.
Polypane comes with its own set of unique features, which you can also find on DevTools Tips.
ConclusionIโm hoping you can see now that DevTools is very versatile and can be used to achieve as many tasks as your imagination allows. Whatever your debugging use case is, thereโs probably a tool thatโs right for the job. And if there isnโt, you may be able to find out what you need to know by running JavaScript in the Console!
If youโve discovered cool little tips that come in handy in specific situations, please share them in the comments section, as they may be very useful to others too.