• Skip to main content

Rafal Tomal

Learn Design and Create Better Websites

  • About
  • Courses
  • Tools
  • Tips
  • Blog
  • Contact
  • Work With Me →

← More Design Tips

Hidden features in Chrome Developer Tools

posted on March 16, 2018

TweetFacebookLinkedInPin

Since the Firebug plugin came out for Firefox, I have simply fallen in love with code inspectors. Google did an excellent job in Chrome by making it incredibly useful without overloading it with features.

It’s still powerful because a lot of its features are hidden. Here’s something I discovered a while ago, and I don’t even know how long it’s been there.

Go to your Developer Tools, and turn on the little device toolbar icon in the corner:

Hey, ok, it’s nothing new. It’s just the mobile preview of your site. But here’s a trick. Click the three dots in the upper right corner to see this hidden menu:

From here you can turn on media queries, rulers, and even device mockups which is pretty cool:

I also love the “Capture screenshot” and “Capture full-size screenshot” options which allowed me to remove some extra plugins I used for that.

tags: code

Previous tip: Mindful plugin for Chrome
Next tip: Provide easy choices

Don't Miss Future Design Tips

Join 20k+ people who love good design. Get my best tips, resources, and strategies to elevate your design skills and grow your business.

© Copyright 2008 - 2025 Rafal Tomal.

Affiliate Program . Privacy Policy . Cookie Policy . License .

Follow me on Twitter, Dribbble, and Instagram.

DISCLOSURE: I may be an affiliate for products that I recommend. If you purchase those items through my links I will earn a commission. You will not pay more when buying a product through my link. It helps me to continue to offer you lots of free stuff. Thank you, in advance for your support!