Store as global variable
To do so, right click on an object in the console and press “store as global variable” . This stores the object as a global variable called
Alt + Up / Alt + Down
When debugging CSS, you can select a property and use the up/down keys to tweak it’s value. By default, the arrow keys adjust values by +/-
1. However, by holding the
alt key, you can use the arrow keys to adjust values finely in steps of
0.1, which is particularly useful when working with fractional values.
Conversely, you can hold
shift to adjust values in steps of
Preserve log is a checkbox that lets you persist logs between page refreshes. This is useful when debugging website issues that require you to refresh the page, since all console output is otherwise cleared. When this option is enabled, a new type of “Navigation” log appears in the console to show page refreshes or navigation events to different pages.
Hold shift during selection mode
In part one of this series, I discussed selection mode, which is activated by pressing the icon in the upper-left corner of the DOM inspector. This lets you visually select elements on the page to inspect by hovering over them with your mouse.
I recently learned that by holding shift, you can go “through” the topmost element in a stack, and select deeper elements. This is helpful for complicated sections of DOM, or a page with some type of overlay that covers other elements.
Network + Log Filters
When debugging an app that has a lot of network requests or console logs, it can be useful to filter for particular types of events. Chrome has a filtering language that supports many different properties, as well as operators like
* to do wildcard matches.
If you type “-”, Chrome will expose a typeahead that shows the various properties you can filter for. You can also toggle on “regex” mode to do a regex match on the data shown in each row.
Bonus: Dark Theme
Chrome comes with a built-in dark theme for the dev tools. You can enable it by clicking the three dots icon in the upper right of the dev tools pane, clicking “settings”, and then toggling the theme.
I sometimes find this easier on my eyes, and, obviously, it looks much cooler 🙂
Debugging issues in production
The Chrome dev tools only work if you’re running your app on your own machine. If you’re interested in understanding bugs and performance issues that users see in production, try LogRocket.
LogRocket is a front-end logging tool that lets you replay problems as if they happened in your own browser. Instead of guessing why errors happen, or asking users for screenshots and log dumps, LogRocket lets you replay the session to quickly understand what went wrong. It works perfectly with any app, regardless of framework, and has plugins to log additional context from React, Angular, and Vue.js.
LogRocket instruments your app to record console logs, network requests/responses with headers + bodies, browser metadata, Redux actions/state, and performance timings. It also records the HTML and CSS on the page, recreating pixel-perfect videos of even the most complex single-page apps.
You can check out LogRocket here.
LogRocket helps you understand problems affecting your users, so that you can get back to building great software.
- Part 1 of this series, with more helpful tips: https://blog.logrocket.com/making-the-most-of-the-chrome-developer-tools-8cac9a206979#.hhqcm2lq7