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.
Open the Chrome DevTools to get started:
- Keyboard Shortcut: Command + Option + I
- Clicking View – Developer – Developer Tools
- Right click on any part of the page you want to customize and select Inspect
Four reasons Chrome DevTools are great for responsive web design
- Great general debugging tools for any website.
- Emulate real devices with Device Mode.
- Responsive Toolbar with active Media Queries.
- Remote debugging for real devices.
1. The 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:
- Quickly select any DOM element on the page to view the HTML and related styles.
- Modify CSS declarations and immediately see the changes being made on the website.
- Resize the Inspector window to see the viewport size. This is great for finding the exact page width a layout breaks down and quickly add a new media query.
- Use the color picker to select colors from your existing theme.
- Long press on the Refresh button to quickly clear cache when debugging. Note that this only works when you have the DevTools open
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.
2. 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:
- You can change the type of mobile device.
- You can show or hide the device frame. I like to debug without the device frame and take screenshots with the device frame.
- You can emulate toolbars that limit the viewport such as the on-screen keyboard when a user selects a form input.
- The “device” geolocation can be overridden as if the mobile device was actually… mobile. This feature is a must have when working on any geolocation-enabled feature for your website.
- Another great sensor to customize while in Device Mode is network throttling. This forces the browser network connection to mimic that of a typical cellular data network. How quickly does your web app respond under normal network conditions?
3. 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:
4. 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:
- Navigate to chrome://inspect/#devices.
- From the three dot menu in DevTools – More Tools – Remote Devices
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.
- DevTools documentation from Google.
- Chrome DevTools course from Codeschool.
- Android remote debugging from Google.
Get this Guide as a PDF
Subscribe to the Apps by John Newsletter. I will send you a PDF of this guide and send announcements of future guides!