{"id":159,"date":"2017-01-08T05:30:55","date_gmt":"2017-01-08T05:30:55","guid":{"rendered":"http:\/\/appsbyjohn.com\/learn\/?p=159"},"modified":"2017-04-30T01:09:48","modified_gmt":"2017-04-30T01:09:48","slug":"4-reasons-chrome-devtools-are-great-for-responsive-web-design","status":"publish","type":"post","link":"https:\/\/appsbyjohn.com\/learn\/4-reasons-chrome-devtools-are-great-for-responsive-web-design\/","title":{"rendered":"4 Reasons Chrome DevTools are great for Responsive Web Design"},"content":{"rendered":"<p><a href=\"#get-guide\">Get this guide as a PDF<\/a><\/p>\n<p>Last week I introduced the basics of <a title=\"Getting Started with Responsive Web Design\" href=\"http:\/\/appsbyjohn.com\/learn\/getting-started-with-responsive-web-design\/\">Getting Started with Responsive Web Design.<\/a> That post introduced 4 practical starting points when upgrading a website to become more mobile friendly. This post dives deeper into the debugging process.<\/p>\n<p><!--more--><\/p>\n<p>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.<\/p>\n<p>Open the Chrome DevTools to get started:<\/p>\n<ul>\n<li>Keyboard Shortcut: Command + Option + I<\/li>\n<li>Clicking View &#8211; Developer &#8211; Developer Tools<\/li>\n<li>Right click on any part of the page you want to customize and select Inspect<\/li>\n<\/ul>\n<h2>Four reasons Chrome DevTools are great for responsive web design<\/h2>\n<ol>\n<li><a href=\"#step1-devtools-general\" title=\"Jump to Step 1 of 4\">Great general debugging tools for any website<\/a>.<\/li>\n<li><a href=\"#step2-device-mode\" title=\"Jump to Step 2 of 4\">Emulate real devices with Device Mode<\/a>.<\/li>\n<li><a href=\"#step3-responsive-toolbar\" title=\"Jump to Step 3 of 4\">Responsive Toolbar with active Media Queries<\/a>.<\/li>\n<li><a href=\"#step4-remote-debugging\" title=\"Jump to Step 4 of 4\">Remote debugging for real devices<\/a>.<\/li>\n<\/ol>\n<h2 id=\"step1-devtools-general\">1. The DevTools are great for debugging any website<\/h2>\n<p>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.<\/p>\n<p><iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/R9X9a_KHz5o?rel=0\" frameborder=\"0\" allowfullscreen><\/iframe><\/p>\n<p>The screencast shows how to perform basic DevTools functions:<\/p>\n<ul>\n<li>Quickly select any DOM element on the page to view the HTML and related styles.<\/li>\n<li>Modify CSS declarations and immediately see the changes being made on the website.<\/li>\n<li>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.<\/li>\n<li>Use the color picker to select colors from your existing theme.<\/li>\n<li>Long press on the Refresh button to quickly clear cache when debugging. Note that this only works when you have the DevTools open<\/li>\n<\/ul>\n<p>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.<\/p>\n<h2 id=\"step2-device-mode\">2. Emulate real devices with Device Mode<\/h2>\n<p>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.<\/p>\n<p><iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/eGMJanIEfLE\" frameborder=\"0\" allowfullscreen><\/iframe><\/p>\n<p>As seen in the video Device Mode does a good job mimicking a real mobile device:<\/p>\n<ul>\n<li>You can change the <b>type<\/b> of mobile device.<\/li>\n<li>You can show or hide the <b>device frame<\/b>. I like to debug without the device frame and take screenshots with the device frame.<\/li>\n<li>You can <b>emulate toolbars<\/b> that limit the viewport such as the on-screen keyboard when a user selects a form input.<\/li>\n<li>The &#8220;device&#8221; <b>geolocation<\/b> can be overridden as if the mobile device was actually&#8230; mobile. This feature is a must have when working on any geolocation-enabled feature for your website.<\/li>\n<li>Another great sensor to customize while in Device Mode is <b>network throttling<\/b>. 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?<\/li>\n<\/ul>\n<h2 id=\"step3-responsive-toolbar\">3. Responsive Toolbar with active Media Queries<\/h2>\n<p>The first option when changing your device type is the catch-all &#8220;Responsive&#8221; Mode. This mode comes with an extra responsive toolbar to quickly change your viewport size to popular sizes.<\/p>\n<p>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 <b>Reveal in Source Code<\/b>. All of these features are shown in the following screencast:<\/p>\n<p><iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/dkOj_GDtlwQ\" frameborder=\"0\" allowfullscreen><\/iframe><\/p>\n<h2 id=\"step4-remote-debugging\">4. Remote Debugging for real devices<\/h2>\n<p>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:<\/p>\n<ul>\n<li>Navigate to chrome:\/\/inspect\/#devices.<\/li>\n<li>From the three dot menu in DevTools &#8211; More Tools &#8211; Remote Devices<\/li>\n<\/ul>\n<p>Remote debugging requires that a real android device with USB Debugging enabled is plugged in to the computer.<\/p>\n<p>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.<\/p>\n<p><iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/LV5iqFIskLU\" frameborder=\"0\" allowfullscreen><\/iframe><\/p>\n<p>Chrome DevTools makes debugging your responsive web design a cinch. I invite any questions or comments through <a href=\"mailto:john@appsbyjohn.com\" title=\"Email John\">Email<\/a> or <a href=\"https:\/\/twitter.com\/appsbyjohn\" title=\"Apps by John on Twitter\">Twitter<\/a>. Below are a few additional resources that I find useful:<\/p>\n<ul>\n<li><a href=\"https:\/\/developers.google.com\/web\/tools\/chrome-devtools\/device-mode\/emulate-mobile-viewports\" title=\"DevTools responsive web design documentation\">DevTools documentation<\/a> from Google.<\/li>\n<li><a href=\"https:\/\/www.codeschool.com\/courses\/discover-devtools\" title=\"Chrome DevTools course\">Chrome DevTools course<\/a> from Codeschool.<\/li>\n<li>Android <a href=\"https:\/\/developers.google.com\/web\/tools\/chrome-devtools\/remote-debugging\/\" title=\"remote debugging\">remote debugging<\/a> from Google.<\/li>\n<\/ul>\n<h2 id=\"get-guide\">Get this Guide as a PDF<\/h2>\n<p>Subscribe to the Apps by John Newsletter. I will send you a PDF of this guide and send announcements of future guides!<\/p>\n<script>(function() {\n\twindow.mc4wp = window.mc4wp || {\n\t\tlisteners: [],\n\t\tforms: {\n\t\t\ton: function(evt, cb) {\n\t\t\t\twindow.mc4wp.listeners.push(\n\t\t\t\t\t{\n\t\t\t\t\t\tevent   : evt,\n\t\t\t\t\t\tcallback: cb\n\t\t\t\t\t}\n\t\t\t\t);\n\t\t\t}\n\t\t}\n\t}\n})();\n<\/script><!-- Mailchimp for WordPress v4.9.17 - https:\/\/wordpress.org\/plugins\/mailchimp-for-wp\/ --><form id=\"mc4wp-form-1\" class=\"mc4wp-form mc4wp-form-261\" method=\"post\" data-id=\"261\" data-name=\"Get Post PDF\" ><div class=\"mc4wp-form-fields\"><p>\r\n\t<label>Email address: <\/label>\r\n\t<input type=\"email\" name=\"EMAIL\" placeholder=\"Your email address\" required \/>\r\n<\/p>\r\n\r\n<p>\r\n    <label>First Name<\/label>\r\n    <input type=\"text\" name=\"FNAME\">\r\n<\/p>\r\n\r\n<p>\r\n    <label>Last Name<\/label>\r\n    <input type=\"text\" name=\"LNAME\">\r\n<\/p>\r\n\r\n\r\n<p>\r\n    <label>Requested Post<\/label>\r\n    <input type=\"text\" name=\"MMERGE3\" value=\"\/learn\/wp-json\/wp\/v2\/posts\/159\">\r\n<\/p>\r\n\r\n<p>\r\n\t<input type=\"submit\" value=\"Subscribe to get PDF\" \/>\r\n<\/p><\/div><label style=\"display: none !important;\">Leave this field empty if you're human: <input type=\"text\" name=\"_mc4wp_honeypot\" value=\"\" tabindex=\"-1\" autocomplete=\"off\" \/><\/label><input type=\"hidden\" name=\"_mc4wp_timestamp\" value=\"1780627963\" \/><input type=\"hidden\" name=\"_mc4wp_form_id\" value=\"261\" \/><input type=\"hidden\" name=\"_mc4wp_form_element_id\" value=\"mc4wp-form-1\" \/><div class=\"mc4wp-response\"><\/div><\/form><!-- \/ Mailchimp for WordPress Plugin -->\n","protected":false},"excerpt":{"rendered":"<p>Get this guide as a PDF 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.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[],"class_list":["post-159","post","type-post","status-publish","format-standard","hentry","category-responsive-web-design"],"_links":{"self":[{"href":"https:\/\/appsbyjohn.com\/learn\/wp-json\/wp\/v2\/posts\/159","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/appsbyjohn.com\/learn\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/appsbyjohn.com\/learn\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/appsbyjohn.com\/learn\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/appsbyjohn.com\/learn\/wp-json\/wp\/v2\/comments?post=159"}],"version-history":[{"count":27,"href":"https:\/\/appsbyjohn.com\/learn\/wp-json\/wp\/v2\/posts\/159\/revisions"}],"predecessor-version":[{"id":292,"href":"https:\/\/appsbyjohn.com\/learn\/wp-json\/wp\/v2\/posts\/159\/revisions\/292"}],"wp:attachment":[{"href":"https:\/\/appsbyjohn.com\/learn\/wp-json\/wp\/v2\/media?parent=159"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/appsbyjohn.com\/learn\/wp-json\/wp\/v2\/categories?post=159"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/appsbyjohn.com\/learn\/wp-json\/wp\/v2\/tags?post=159"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}