Posted on

My favourite button in Chrome DevTools: Pretty print!


Click to enlarge

A very practical option in Chrome DevTools is to show minified JavaScript files in their unminified, human-readable version. After opening up DevTools (STRG or APPLE +ALT + I), go to “Sources”, select the JavaScript File you wish to inspect. If it’s minified, DevTools will offer you the “Pretty print” (or “Format”) Button at the bottom below the code window, which looks like two curly brackets. Et voilà – the code will be displayed in an easier to read format!

Posted on

Potentially upcoming feature for Google Chrome: Color Contrast Debugger

Screenshot of a code editor window with some PHP code visible

A potentially upcoming feature could making testing website accessibility even easier in the future: Google Chrome Canary offers the possibility to enable the experimental Color Contrast Debugger feature:
https://a11ywins.tumblr.com/post/167324368213/google-chromes-color-contrast-debugger

Simply clicking on the element reveals information about the contrast levels between background and foreground color and if they fulfill the requirements of WCAG 2.0 Level AA (expandable to show the compatibility with Level AAA).