DevTools Tips & Tricks

Front-end developers spend a significant amount of time working inside the browser’s DevTools. Likely just as much as they spend time writing code in the code editor. However, most developers barely scratch the surface of what DevTools can accomplish. I have been curating a collection of DevTools tips across major browsers. The following are some of the useful tips & tricks for across different browsers that will help you unlock the full potential of DevTools.

For the sake of brevity, all the Chromium based browsers like Chrome, Edge, Opera etc,. are referred to as Chromium, because the DevTools experience and features across these browser are very similar.

1. Inspect Popups on Hover

If you have ever tried to inspect popup elements like tooltips, dropdown menus etc that only appear on hover, then you would know how hard it is to inspect the popup element. The main problem with inspecting the popup elements is when you click anywhere in the DevTools, the page loses focus, which causes the popup to disappear. To solve this problem, Chromium browsers have a Emulate a focused page option to keep the page focused while using the DevTools.

There are two ways to access this option in DevTools:

• 1. Select the element in the Elements panel that activates the popup on hover. Open the Styles pane, click :hov button to activate the hover state. Enable the Emulate a focused page option to keep the main page focused while you interact with the DevTools.
• 2. Open the Command Menu, and Run Show Rendering to open the Rendering drawer at the bottom of the DevTools. Scroll down to find the Emulate a focused page option and enable it.

2. Use logpoints

Debugging tools in DevTools have come a long way. But if you’re like me, and still prefer console.log to debug your code, there is a better way to get log output in the console without cluttering the code with console.log() statements. It’s also useful while debugging production code.

For Chromium browsers, open the scripts in the Sources panel, right click on the line number and select “Add logpoint…”. Input the message including the variables that you want to log in the console.

In Firefox, a similar option is available in the Debugger panel, after you right click on the line number and select “Add log”.

3. Emulate foldable devices

Foldable devices are quite the rage these days. However, your site on a foldable screen may look different than how it looks on a single screen device because of the in-seam separating the two screens. This is a great opportunity to offer an improved UX by designing the site around the constraints of a dual screen by making clever usage of the negative space around the foldable part of the screen. Fortunately, some browsers allow us to emulate a foldable device or a dual screen that can help us design our site around the middle-edge of the screen (the foldable part!).

You can target foldable viewport using CSS media queries. In Chromium browsers, enter the Device Emulation mode, select a foldable device, which will add additional buttons to the toolbar. From the toolbar use the buttons to toggle portrait & landscape, or single-screen and dual-screen mode to view how the site looks like in different mode.

4. Autocomplete styles

Chromium browsers allows you to input declarations by just entering the value, and the DevTools will auto suggest the closest matching property-value pair. For example, we can input bold and DevTools will automatically suggest font-weight: bold as the top choice to select.

In Safari, you can have a typo in your declaration and the web inspector will try to fuzzy match and suggest the closest matching property: value pair.

5. Color formats

All major browser DevTools allows you to toggle the authored color formats by holding the Shift key and click the color preview box to cycle through various color formats like, hex, rgb, hsl, hwb. Alternatively, you can also change the color format in the color picker using the up-down arrow keys.

In Chromium & Safari browsers, you can use the color picker to pick a color from outside the browser window. Safari also lets you change the color format to display-p3. The white line in the demo below shows the edge of sRGB. Everything on its top right is Display-P3 colors not available in sRGB. For fallback, right click on the color box, and select “Clamp to sRGB” to convert to the closest available color in the sRGB space.

6. Capture High-res screenshot

Sometimes you may use a browser extension or a third party service or a node.js library to take a high resolution screenshot of a website, if you don’t have access to a higher resolution device. With DevTools, you have the ability to take a high resolution screenshot of either a full page, or a viewport right inside the browser without needing additional tools.

In Chromium browsers:

1. In DevTools, click the Toggle device toolbar icon (Cmd+Shift+M or Ctrl+Shift+M) to enter the responsive design mode.
2. In the device toolbar, click More options (⋮) > Add device pixel ratio. In the action bar at the top of the viewport, select a DPR value from the new DPR drop-down menu. Default is 2, but you can bump it upto 3!
3. Click More options > select Capture screenshot for viewport or Capture full size screenshot for the entire page.

In Firefox,

1. Open the Console panel, run the command :screenshot --dpr 3 to take a high definition screenshot of the page with the device pixel ratio set to 3.
2. To capture a full page screenshot, just add --fullpage to the end and --screenshot .header to capture a screenshot of a node that can be identified by a selector.

7. Inspect Event streams

If your web app receives a stream of events from the server, dispatched using Server-Sent Events, then you would need the ability to inspect the incoming streams in the DevTools. SSE behaves a bit differently than the traditional request-response paradigm, hence, you will only see one request in the Network panel.

In Chromium browsers, you can still inspect the incoming streams by opening the request, and navigate to the EventStream tab. Additionally, the EventStream tab also captures events sent by the server through XHR & Fetch. Similar to the Network panel, you can also filter streams with regex or clear the entries in the table.

8. View and Copy style changes

DevTools lets you easily tweak styles on a page and see the output live. But identifying all the modified styles and copying them back to the editor is tedious. If you ever find yourself in a situation, where you are constantly switching back and forth between your editor and the devtools to copy the style changes, there’s an easier way to see what was changed, and copy the changes to your editor.

In Firefox:

1. In the Rules pane, apply changes to the CSS declarations, and then open the Changes tab to see the diff of all the styles changed. Click “Copy All Changes” button to copy the modified styles, with previous declaration automatically commented.

In Safari:

1. In the Styles pane, apply changes to the CSS declarations, and then click on the Changes pane to see the diff.

9. Live expressions

If you are frequently entering the same JavaScript expression into the Console, you can simplify the workflow using the Live Expressions. Live Expressions works like the Watch feature from the debugger, that evaluates the expression in real-time as you interact with the web page.

In Chromium browsers, click the eye icon in the Console to create a Live Expression. The Live Expression text box appears. Type your expression in the text box, and press Enter.

Live Expressions are pinned to the top of the Console. You can add multiple live expressions. It even allows multi-line expressions if you press Shift+Enter.

10. Debug horizontal scrollbars

Unwanted horizontal scrollbars is one of the most annoying issues to debug in frontend development, especially identifying the element that caused the overflow. Firefox and Polypane offers some unique ways to identify such elements on the page.

In the Firefox’s Inspector panel, elements that have scrollbars are identified with the scroll badge. Click the badge to highlight the elements that caused the container to have scrollbars, which are indicated with the overflow badge.

Polypane, a browser based on Chromium automatically detects containers with horizontal scrollbars indicated by the overflow icon (**↔**). Clicking on the icon will activate the layout debugging tool which will highlight the element causing the overflow in red.

For more such insightful tips and tricks for the browser DevTools, watch out this space and the following resources curated by the web community:

• DevTools Tips (Patrick Brosset): A curated collection of helpful cross-browser DevTools tips and tricks.
• Dev Tips (Umar Hansa): DevTools tips sent to your inbox!