Debug on dev notes

Hidden gems of the Chrome DevTools, Part 2: CSS tools

Fri, 25 Jun 2021 23:59:01 +0000

In the last article on the series we looked into some features on the Chrome Console API. This time we’ll see some of the tools Chrome has to offer when working with CSS and layouts.

Inspect layout

Chrome developer tools include handy tools for inspecting and debugging grid and flexbox layouts. When we open Chrome developer tools on the Elements tab, you’ll find a Layout tab right next to Styles and Computed. Under Layout we will see a listing of all the grids and all the flexbox layouts on the current page.

Hidden gems of the Chrome DevTools, Part 2: CSS tools

Mon, 21 Jun 2021 09:33:01 +0000

Accessibility features

accesibility tab

debugger

Experimental

font editor in styles
CSS overview
flex box debugging
accessibility tree

Hidden gems of the Chrome DevTools, Part 1: The Console API

Sat, 03 Apr 2021 09:33:01 +0000

Debugging, or finding the reason why your code doesn’t work, is one of the most important skills a software developer needs. If you can debug effectively, you’ll catch problems faster and even gain a better understanding of how things work under the hood.

In frontend development, we have a variety of tools available to debug our code. We can use a debugger to step through our code, we can log values to the browser console and we can use the DevTools of our browser.