Chrome Developer tools they are a comprehensive toolkit for developers, built directly into the Chrome browser. The tools let you edit web pages in real time, diagnose problems more quickly, and build better websites faster. Here are 6 new updates that will make your coding even more efficient.

1.    Access to the full page accessibility tree

This new view of the accessibility tree makes it easier to get an overview of how your web content is exposed to assistive technology, such as screen readers. Simply enable the full-page accessibility tree using the checkbox in dev tools and it’s ready to use. This tool allows you to quickly identify and fix accessibility issues in the codebase, before it reaches accessibility audits in QA. A big time saver when building websites!

2.    New properties Pane filter

Searching for properties can be a mammoth task. So this new filter is a huge time saver. Simply type the property into the text box, enable the "show all" checkbox and you will see the properties you need instantly, saving significant search time.

3.    Clearer view of code changes

In the changes tab, a new view allows you to see your code changes presented in a much clearer format. Previously the code was displayed in one single line, making it difficult to trace the changes of minified source code in a file. However, this new view allows you to see the code on multiple lines, making it easier to the debug the code.

4.    Support row-reverse and column-reverse in the Flexbox editor

The flexbox editor is an extremely useful tool. It gives you a visual representation of how changes to flexbox CSS property will affect the layout. The new update has added in some useful visual representations of the impact on the element when the row-reverse or the column-reverse flexbox property is applied in code. This eliminates any uncertainty and makes CSS coding a quicker process.

5.    Show rulers on hover command

Previously if you wanted to find out the width and height of an element you had to click the pointer icon in the top left, then click on the specific element to retrieve the dimensions.
This update has made it much easier to measure the width and height of an element.  By enabling the ruler, when you open the command menu, you can see at a glance the measurements for any element you hover over.

6.     Lighthouse 9 in the Lighthouse panel

Lighthouse is an open source, automated tool that can be used to audit web pages. It is a really useful tool used to measure performance, accessibility, progressive web apps, SEO and more. In this latest Chrome dev tools update, Lighthouse now lists all the elements that share the same ID. As unique ID’s must be used on focusable elements to ensure they are visible to assistive technologies, such as screen readers, spotting any duplicated IDs on a given page is a valuable addition to the toolkit!

Keeping up to date with the latest chrome dev tools is essential. The latest updates have helped significantly improve our coding efficiency and debugging accuracy, ultimately saving both time and money.

Need help building your next website?