Work faster, make your users happier

FelDev
FelDev
Aug 12 · 5 min read
Photo by 童 彤 on Unsplash

1. Slow Network and Slow Device Simulator

Just because a website is blazing fast on your monstrous gaming PC with its 10GB/second download speed doesn’t mean it’s fast for most users. Old phones relying on laggy connections are still trending.

Open the performance tab and click the gear icon in the upper-right corner to show the slow network simulation and CPU throttling options.

The Gear Icon is called “Capture Settings” by the way.
The Gear Icon is called “Capture Settings” by the way.
Play with those bad boys when you have a JavaScript-heavy and/or bandwidth-hungry page

2. The Color Selector

Click the little square representing a color to pop up the color selector.

Console screenshot pointing where to click.
Console screenshot pointing where to click.
Console screenshot showing the color selector.
Console screenshot showing the color selector.

While the color selector is enabled, you can hover your web page and use a color picker to get the color of that exact pixel right there!

If you don’t see the color picker, click “Toggle color picker.”

The little square you clicked to pop up the color selector has yet another trick up its sleeve: Shift+click it to change the color format.

Have I changed your life yet?


3. Audits

If you never took the time to test your website through Chrome’s built-in Audit tool, you’re missing out. In about a minute, you will get valuable insight into performance, SEO, security, and more.

Try to beat that score, kid.

4. Pretty Print

Trying to look at minified source code? Hit that {} button!

The button is called “Pretty Print”
The button is called “Pretty Print”

5. Quick File Switcher

You don’t have to open the source tab if you know your file name.

  • Just hit cmd/ctrl + p
  • Type your file name
  • Hammer down your enter key

Note that adding a “>” will change your quick file switcher into a quick command menu (cmd/ctrl + shift + p takes you right there, too).


6. Responsive Mode

CSS can become tricky, borderline hellish. But once again, the almighty Developer Console tool can be handy.

Toggle the Device Toolbar with ctrl/cmd+shift+M or you can …

The button is called “Toggle device toolbar”
The button is called “Toggle device toolbar”
… click that.

For most people most of the time, just looking at their website through different screen sizes and orientations is all they need.

You can add/remove devices by clicking on “Edit…”

But take a look at the other drop-down called More Options (represented by three vertical dots) and you could find tools you didn’t know you needed.

Showing the “more options” menu
Showing the “more options” menu

7. Screenshots

Noticed the “Capture screenshot” in that last image?

What’s really cool about it is that you can take a full-size screenshot, meaning the whole page is saved in your screenshot, not just what’s visible now.

You don’t need to be in responsive mode to take a screenshot. Use the quick command menu (shift+cmd/ctrl+p) and type “screenshot.”


8. Extensions

You can install extensions to the Chrome Developer Console. A lot of frameworks have their own extension to ease development with their technologies (Vue, Angular, React, etc.). Here is a list of Featured DevTools Extensions.

You can even go ahead and create your own if you have a spare five minutes.


9. Coverage

A good way to optimize your client-side code is to ship less client-side code. Coverage is all about helping you discover unused CSS and JS.

Open the coverage tab with the command menu ctrl/cmd+shift+p, Show Coverage.

You use the coverage tab by recording what’s going on.

The button is called “instrument coverage”
The button is called “instrument coverage”
The red dot indicates you are recording.

Reload your page while recording, and you’ll start getting insights.

Screenshot of the coverage tool.
Screenshot of the coverage tool.

Obviously, red means unused and green means used. If you click on a file, it will open with the same color-coding logic.

Note that code not being used on page load is not necessarily code not being used at all! Use your page’s functionalities while recording, and you will most probably see a higher percentage of code being used.


10. Keeping Up With New Features

Chrome’s dev tools are constantly updated. Thankfully, Google makes it easy to keep up with their “What’s New in DevTools” video series. Every time a new major Chrome version is released, a new video is released. I highly recommend watching those as they come out — developer tools should let you know when they do.


Bonus

You might have noticed my developer tools has a dark theme. Dark theme is a good theme. Enable it by clicking the three vertical dots next to the x ➔ Preferences ➔ Appearance ➔ Theme.

Or use the command menu I’ve constantly mentioned!

I hope you learned a thing or two!

Better Programming

Advice for programmers.

FelDev

Written by

FelDev

Web Developer writing about the web.

Better Programming

Advice for programmers.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade