Chrome DevTools tips
Chrome DevTools are a fantastic resource built right in to the most popular browser. There's so much functionality available beyond the basic element inspection, console logs, and network tracing that most developers (or designers) aren't even aware of. Here are some tips and tricks I've found useful.
Automatic contrast issue reporting #
Accessibility and usability go hand in hand. One often overlooked issue is colour contrast. It's important that there's a high enough contrast ratio between your content and its background to ensure legibility. Chrome DevTools have made it easier to verify colour contrast, even checking whether it's WCAG compliant and providing tools to quickly choose alternative colours. This is exposed in the colour picker of the styles panel.
There's another option though that can report issues without you having to go look for them.
Settings > Experiments > Enable automatic contrast issue reporting via the issues panel
Tip from Jecelyn Yeen, Google Developer Advocate in the Chrome DevTools for designers session from Google I/O 2021, at 2m51s to 3m24s.
Keeping track of changes #
While editing content and styles in the DevTools can be very quick and easy, it can be just as easy to forget which changes you have made. Chrome has your back yet again. The Changes tab shows a diff of the local changes you have made in the DevTools.
Customize and control DevTools (overflow menu) > More tools > Changes
Tip from Jecelyn Yeen, Google Developer Advocate in the Chrome DevTools for designers session from Google I/O 2021, at 8m16s to 8m32s.