Over the past few months, I’ve gained a greater appreciation for Chrome DevTools and all of the shortcuts it allows me to take. In this post, I’ll be sharing some of my favorite ways that DevTools makes life just a little bit easier for web developers.

Live CSS Changes

Editing CSS directly in the Chrome browser is a great way to save time. At work, I have no easy way of locally testing changes and instead test everything on a development server. This means that whenever I make a change, I have to commit and push the changes to the server and refresh my webpage to view the results. With Chrome DevTools, instead of doing this every time I want to test out a different margin or font size, I can directly edit CSS in the browser and figure out what I want before editing my code.

The CSS tool is especially helpful for flex-box styling, providing an easier way to choose flex properties and visually see how flex is affecting your page. It also is great for creating linear gradients, allowing you to choose a color from a color selector and adding the appropriate RGB or hex code to the CSS.

Testing Different Screen Sizes

DevTools also provides an easy way to check how your site looks on different screens. You can adjust the screen size responsively or select different device options. This is super helpful when designing a responsive webpage, allowing you to preview what the site looks like on mobile, tablet, and unnecessarily large screens. (Side note: Although this is a powerful tool, it can be misleading. Even in this mode, the browser does not change. I’ve run into issues where the ‘mobile’ version of a site works perfectly in Chrome using DevTools but not on Chrome iOS, as Chrome on iOS is essentially Safari in disguise.)

JavaScript in the Console

With DevTools, the console is for more than just logging all of your debugging messages. You can type JavaScript directly into the console! This has helped me debug many a scope issue. I use the JavaScript in the console primarily to check the values of different variables at any time. It is also useful for calling functions directly in the console. (Fun fact: Chrome console helped me discover that JavaScript shockingly does not have a method to round to a specific decimal place.)

Viewing Requests

Using DevTools, you can view details about requests sent from your browser. I find this helpful when debugging failed requests. You can easily see status codes, headers, and where the request was started from. I often use this feature to check what parameters are sent and to view received responses.

Thanks for reading my post this week and please leave a comment if there are any DevTools you find helpful that I didn’t mention!