( 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.

Shortcat page sourge code