4 Reasons Chrome DevTools are Great for Responsive Web Design

Last week I introduced the basics of Getting Started with Responsive Web Design. That post introduced 4 practical starting points when upgrading a website to become more mobile friendly. This post dives deeper into the debugging process.

Any web designer spends a lot of time coding in a text editor and debugging in a web browser. I prefer using Google Chrome to debug my web applications, primarily because of DevTools. Instead of constantly jumping back and forth between the editor and the browser to optimize and test code, I prefer debugging with DevTools directly inside of Google Chrome. The DevTools save even more time for testing your code on mobile devices. Instead of constantly tweaking, publishing, and viewing these changes on a mobile device you can debug on a mobile device right inside of Chrome.

Four Reasons Chrome DevTools are Great for Responsive Web Design

DevTools are great for debugging any website

The Google Chrome DevTools are great for general debug. You can test them out on any website. This screencast shows a few quick tips for getting started.

The screencast shows how to perform basic DevTools functions:

That was a brief introduction in getting starting with the Chrome DevTools. As you can see the ability to live edit DOM elements and styles makes debugging in the browser attractive.

Emulate Real Devices with Device Mode

Turning on device mode in DevTools allows you to preview your design on a variety of popular mobile devices. Chrome mimics the viewport size, screen resolution, touch events and user agent to match that of your selected device. The following screencast covers some of the best features available in Device Mode.

As seen in the video Device Mode does a good job mimicking a real mobile device:

Responsive Toolbar with Active Media Queries

The first option when changing your device type is the catch-all “Responsive” Mode. This mode comes with an extra responsive toolbar to quickly change your viewport size to popular sizes.

Even more helpful than viewing popular breakpoints is the option to show existing media queries defined in your styles. DevTools detects media queries and displays a custom toolbar with any existing breakpoints you have defined. To view the exact media query definitions in your source code, right click on the Media Queries toolbar and select Reveal in Source Code. All of these features are shown in the following screencast:

Remote Debugging for Real Devices

At some point when working on a mobile friendly design we should test on real mobile devices. Chrome Device Inspector allows access to the full suite of DevTools while inspecting a website running on a real device. There are two ways to access the Device Inspector:

Remote debugging requires that a real android device with USB Debugging enabled is plugged in to the computer.

One nice feature of Remote Debugging is screencast mode. The mobile device screen is emulated inside of Chrome on your computer. Check out this video to see Remote Debugging in action.

Chrome DevTools makes debugging your responsive web design a cinch. I invite any questions or comments through Email or Twitter. Below are a few additional resources that I find useful:

About The Author

John MacAdam is a Professional Engineer and Mobile Software Developer from Columbus, Ohio. John builds websites & apps to help people reach more mobile users. You can learn more on appsbyjohn.com or connect with him on Twitter or LinkedIn.

Professional transportation engineer, web designer, and mobile app developer from Columbus, Ohio.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store