While inspecting an element, you might want to change its attributes, e.g.

Toggle the HTML mode (all modern browsers) Instead of clicking on an Inspect icon and then focusing on the element you’d like to debug, you can toggle Inspect Element Mode with Cmd/Ctrl + Shift + C. Toggle Inspect Element Mode (all modern browsers) In Firefox, you can jump to Settings with F1. In Chrome, you can click on the gear icon in the right upper corner or use Shift + ?. Usually there are plenty of obscure tools and features hidden in the “Settings” panel - from emulated devices to network throttling profiles and experiments. Opening DevTools Settings (all modern browsers)

If you need to quickly access any DevTools feature, the Command Menu is a quick way to get there - for general drawers, hidden menus or specific features. Cmd/Ctrl + P opens a drawer with all available files used on the current page. Cmd/Ctrl + Shift + P opens a quick autocomplete search for panels, drawers and all the features within DevTools. Instead, it’s worth remembering just a couple of useful global keyboard shortcuts - they will help you jump to specific features faster.īeing probably one of the most well-known ones, this command actually has two features. However, there is no need to memorize the place where they are placed. It probably goes without saying that we do our best to keep each profile clean and uncluttered - that goes for browser extensions as well as browser bookmarks, cookies and cache.Īdmittedly, with the sheer amount of features available in DevTools, it’s not very surprising that some of them are quite difficult to find between tabs, panels, gear icons and dots. So if needed, we can get right to performance debugging or accessibility auditing without any hassle for searching the right extensions. The actual convenience comes from the simple arrangement that each of the profiles has specific extensions, bookmarklets and browser settings all set and ready to go. We usually use this profile to test our heaviest pages to experience the worst possible customer experiences.ĭepending on the task at hand, we can jump to one of the dedicated profiles. No throttling in use.Ī profile for a reader on a slow, throttled connection (slow 3G), low memory, poor CPU, with 10 most popular browser extensions on. It will contain a few popular extensions, common web development extensions, ad-blockers, tab management, Google Docs offline, LastPass, VPN, Browserstack, Grammarly etc. Always goes well with 4 × CPU throttling and Network throttling (Slow 3G).īased on the data we have from our analytics, that’s a profile that is close enough to the one that many of our readers (wonderful people like you) will have. Accessibility Insights, aXe and a11y.css, along with a few other accessibility linters and color vision simulator.Ī profile with a few experimental settings for profiling turned on, as well as an option to automatically open DevTools for every new window, along with a custom diagnostics CSS for quick auditing and profiling.Ī clean profile without extensions, with a few special bookmarks for auditing with Lighthouse, RequestMap, a performance diagnostics CSS and a few performance-related links to keep in mind (e.g. ( Large preview)Ī clean browser profile that includes various tools for checking accessibility, e.g. Dedicated browser profiles for accessibility testing, debugging, performance audits and checking the experience for happy and unhappy customers. We usually work with at least 5 user profiles, each with its own extensions, bookmarks, bookmarklets and features turned on or off. When it comes to profiling a website for performance, or tracking a particular accessibility issue, we’ve been creating separate browser profiles for each task for a while now. We’ll focus on the ones that we use frequently on SmashingMag, and some of the little techniques and strategies that help us fix pesky bugs and write better code.

We’ll look into all modern browsers (Chrome, Firefox, Edge, Safari) and look into the useful tools that they provide to us, web developers. In this article, let’s dive into some of the useful and obscure features in DevTools. Still, DevTools has plenty of obscure gems and undiscovered treasures, living on the remote fringes of hidden tabs and experimental settings. Over the years, it has become a tool for debugging, profiling, auditing and even prototyping - all living within the same interface, and always just a keyboard shortcut away. Out of all the tools available at our fingertips these days, DevTools is probably one of the most advanced ones. In this article, Vitaly reviews useful features and shortcuts for debugging in Chrome, Firefox, Edge and Safari. DevTools is very advanced and helpful, but can also be very intimidating and overwhelming.

Html inspector close