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. Let’s take a closer look at them.ĭedicated 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.
0 kommentar(er)
