DevTools Beyond the Basics: Fifteen Features Worth Knowing
Most developers settle into a comfortable routine with browser DevTools, relying on the same handful of panels day after day. But DevTools across Firefox, Chrome, Edge, and Safari pack hundreds of features, and some of the lesser-known ones can save real time when you hit the right debugging scenario. Drawing from the most-viewed tips on the DevTools Tips website, here are fifteen productivity boosters worth adding to your workflow.
Zoom the DevTools Interface
If the text and buttons in DevTools feel too small, you can zoom the entire interface. Because DevTools is built from HTML, CSS, and JavaScript, it zooms just like any other web content. Click anywhere inside DevTools to give it focus, then press Ctrl+ or Ctrl- (use Cmd+ and Cmd- on macOS) to adjust the size.
Remove Annoying Overlays
Popups, cookie banners, and sticky ads can obscure the very content you are trying to inspect. DevTools offers a quick way to delete them:
- Click the element selection button (the pointer icon in the top-left corner) or press Ctrl+Shift+C (Cmd+Shift+C on macOS).
- Click the overlay in the page to select it.
- Press Delete.
Inspect the Fonts Rendering Page Content
Whether you are tracking down a font-fallback issue on your own site or identifying the typeface used on a well-designed page, DevTools can show you exactly which fonts rendered a given piece of text.
Firefox offers a dedicated Fonts panel in the sidebar of the Inspector. It works together with the currently selected element: select <body> to list all fonts on the page, or select a specific element like a <p> to see only the fonts applied to that element.
In Chromium-based browsers, the process is slightly different:
- Select an element that contains only text children.
- Open the Computed tab in the sidebar of the Elements tool.
- Scroll to the bottom of the tab to see the rendered fonts.
Measure Arbitrary Distances on a Page
While you can always query an element's dimensions, some measurements do not line up with any element on the page. Firefox includes a measurement tool for exactly this case, but you must enable it first:
- Open DevTools and press F1 to reach Settings.
- Under Available Toolbox Buttons, check Measure a portion of the page.
- Click the new toolbar icon, then click and drag on the page to measure distances and areas.
Find Unused CSS and JavaScript
Bloated bundles slow down page loads, particularly when only a fraction of the shipped code is used on the first render. Chromium-based browsers bundle a tool just for this audit.
- Open the Coverage tool—press Ctrl+Shift+P (Cmd+Shift+P on macOS), type "coverage," and press Enter.
- Click Start instrumenting coverage and refresh the page.
- Wait for the reload and the generated report.
- Click a reported file to open it in the Sources tool.
Files display with blue and red bars marking used and unused lines of code.
Control Video Playback via the Console
Some page-level video players lack playback controls or make them hard to find. When that happens, you can drive the underlying <video> element directly from the Console:
- Open DevTools and select the
<video>element in the Elements tool (called Inspector in Firefox). - Switch to the Console tool.
- Run
$0.playbackRate = 2;and press Enter.
The $0 expression is a shorthand for the element currently selected in DevTools. Other properties and methods work the same way: $0.pause() halts playback, $0.play() resumes it, and $0.loop = true sets the video to repeat.
Run DevTools in Another Language
If English is not your primary language, you can switch DevTools to something more comfortable. How you do that depends on the browser.
- Safari: Web Inspector inherits the OS language. Set it per app in System preferences → Language & Region → Apps.
- Firefox: DevTools always matches the browser language, so install the browser in your preferred language.
- Chrome and Edge: Press F1 in DevTools to open Settings, then pick Browser UI language or any language from the Language drop-down list.
Disable Unwanted Event Listeners
When unrelated mouse or keyboard handlers fire during a debugging session, they can interfere with your work. To silence them, select the element in the Elements tool (or Inspector in Firefox) and then:
- In Firefox, click the event badge next to the element and uncheck the listeners you want to disable.
- In Chrome or Edge, open the Event Listeners tab and click Remove next to the listener.
View Console Logs for Non-Safari Browsers on iOS
All iOS browsers share the WebKit engine, but bugs can still appear in Chrome or Edge that do not reproduce in Safari. Since non-Safari browsers cannot be attached to a Mac for debugging, Chromium-based browsers on iOS provide a lightweight console viewer of their own:
- Open Chrome or Edge and navigate to
about:inspect. - Click Start Logging.
- Keep this tab open and open a second tab for the page you want to debug.
- Return to the first tab to see the console output.
Copy an Element’s Full Style Set
Pulling the HTML for a single element is straightforward, but its styles are another matter — you'd have to trace every matching CSS rule by hand. Chromium browsers automate this. In the Elements panel, choose the element, right-click, and select Copy → Copy styles. The clipboard now holds a complete list of every style that applies, including inherited values and custom properties.
Grab Every Image on the Page
With the Console open, this script walks the page and downloads each image it finds. It works in any browser where you can execute JavaScript. Paste it in 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) {}
});
Content-Security-Policy headers can block some downloads. If you use this often, save it in the Snippets panel under Sources in Chromium browsers so it's one click away. Firefox has a built-in alternative: press Ctrl+I to open Page Info, then under Media select Save As for each image.
See the Page in 3D
Browsers hold pages internally as tree structures — the DOM, compositing layers, stacking contexts — and Edge exposes all of them with its 3D View tool. Open it through the Command Menu (Ctrl+Shift+P or Cmd+Shift+P), type "3D", and press Enter.
Three modes are available:
- Z-Index — reveals stacking contexts and z-axis positioning.
- DOM — shows tree depth and spots elements outside the viewport.
- Composited Layers — displays the rendering layers the engine builds for painting.
Pan, rotate, and zoom with the mouse. Safari and Chrome can also show composited layers via their own Layers tool.
Stop Malicious Debugger Traps
Some sites insert a debugger statement to pause the main thread the moment DevTools opens, making inspection painful. The counter in Chromium browsers and Firefox:
- Open Sources (called Debugger in Firefox).
- The script will be paused at the offending line.
- Right-click that line's number and pick Never pause here.
- Refresh.
Edit and Resend Network Requests
Iterating on your server-side logic often means tweaking a request parameter and trying again, without reloading the whole page. Firefox's Edit and Resend starts from any request in the Network panel — right-click it, modify the URL, method, parameters, or body, and hit Send.
Edge offers the same through its Network Console. Enable it in Settings (F1) → Experiments → Enable Network Console. Then right-click a request in Network, pick Edit and Resend, adjust it, and send.
If you don't need to change anything, most browsers also support simply replaying an XHR request without edits.
Simulate Devices With Caution
The most popular DevTools tip is device simulation, and it's easy to forget it's a lie. When Firefox emulates an iPhone, the page still renders with Gecko — not WebKit — and Chrome emulation never becomes Safari with its quirks. DevTools rightly size viewports, pixel ratios, touch inputs, and even user-agent strings, but the rendering engine underneath never changes.
Treat simulation as a layout smoke test, and reserve final judgment for real browsers on real hardware.
Quick modes per browser:
- Safari: Ctrl+Cmd+R, or the Develop menu → Enter Responsive Design Mode.
- Firefox: Ctrl+Shift+M (or Cmd+Shift+M), or via browser tools menu.
- Chrome/Edge: with DevTools open, press Ctrl+Shift+M (or the macOS equivalent) or toggle the Device Toolbar.
For heavy work with multiple breakpoints at once, setups like Polypane (a dedicated development browser) can simulate several synchronized viewports side by side.
