{
    "version" : "https://jsonfeed.org/version/1",
    "content" : "news",
    "type" : "single",
    "title" : "Mobile Development and Testing with Chrome Developer Tools |Digital.gov",
    "description": "Mobile Development and Testing with Chrome Developer Tools",
    "home_page_url" : "/preview/gsa/digitalgov.gov/bc-archive-content-3/","feed_url" : "/preview/gsa/digitalgov.gov/bc-archive-content-3/2016/11/21/mobile-development-and-testing-with-chrome-devtools/index.json","item" : [
    {"title" :"Mobile Development and Testing with Chrome Developer Tools","summary" : "Around Q3, I was looking for way to test the HTML and CSS of an online application that was to be public-facing. At first, my office’s plan was to connect mobile devices to the network owned by federal employees on a volunteer basis for testing.","date" : "2016-11-21T12:00:19-04:00","date_modified" : "2025-01-27T19:42:55-05:00","authors" : {"angela-smithers" : "Angela Y. Smithers"},"topics" : {
        
            "design" : "Design",
            "mobile" : "Mobile",
            "software-engineering" : "Software engineering"
            },"branch" : "bc-archive-content-3",
      "filename" :"2016-11-21-mobile-development-and-testing-with-chrome-devtools.md",
      
      "filepath" :"news/2016/11/2016-11-21-mobile-development-and-testing-with-chrome-devtools.md",
      "filepathURL" :"https://github.com/GSA/digitalgov.gov/blob/bc-archive-content-3/content/news/2016/11/2016-11-21-mobile-development-and-testing-with-chrome-devtools.md",
      "editpathURL" :"https://github.com/GSA/digitalgov.gov/edit/bc-archive-content-3/content/news/2016/11/2016-11-21-mobile-development-and-testing-with-chrome-devtools.md","slug" : "mobile-development-and-testing-with-chrome-devtools","url" : "/preview/gsa/digitalgov.gov/bc-archive-content-3/2016/11/21/mobile-development-and-testing-with-chrome-devtools/","content" :"\u003cp\u003eAround Q3, I was looking for way to test the HTML and CSS of an online application that was to be public-facing. At first, my office’s plan was to connect mobile devices to the network owned by federal employees on a volunteer basis for testing. All of a sudden, a new policy came down that stated, “devices that were not purchased by the agency could not be connected to the network. If we needed a device(s) to be on the network, we needed to go through the steps to have the device inspected, documented and approved.”\u003c/p\u003e\n\u003cp\u003eI wondered, would this prolong my process? Would volunteers throughout the building be willing to go through this step with me? I also did not feel comfortable with the idea of having the agency purchase devices for testing—what happens in six months or a year when those devices become obsolete? Our web application was to be utilized worldwide; how many devices are “enough” devices?\u003c/p\u003e\n\u003cdiv class=\"image\"\u003e\n  \u003cimg\n    src=\"https://s3.amazonaws.com/digitalgov/_legacy-img/2014/09/600-x-350-Mobile-phone-tablet-pc-notebook-and-computers-Nik_Merkulov-iStock-Thinkstock-478287255.jpg\"\n    alt=\"American flag and global continents on various devices; mobile phone, tablet, desktop computer, notebook\"/\u003e\u003cp\u003eNik_Merkulov/iStock/Thinkstock\u003c/p\u003e\u003c/div\u003e\n\n\n\u003cp\u003eCould we purchase an application or a subscription to an online io to test within my computer? I went to my desk to meditate on this new option because I just didn’t feel at ease. Playing in my Chrome Dev environment I accidently stumbled upon a button. I clicked it out of curiosity and … shazam! Behold – the rendered view completely changed! My CSS completely changed! What was this magic that I had discovered?\u003c/p\u003e\n\u003ch2 id=\"what-is-chromes-mobile-dev-tool\"\u003eWhat Is Chrome’s Mobile Dev Tool?\u003c/h2\u003e\n\u003cp\u003eAlthough not truly magic, \u003ca href=\"https://developer.chrome.com/\"\u003eChrome Developer Tools\u003c/a\u003e (or DevTools) are a set of web authoring and debugging tools built into the Google Chrome web browser. Using the \u003ca href=\"https://developers.google.com/web/tools/chrome-devtools/device-mode/\"\u003eDevice Mode\u003c/a\u003e can be an integral part of the government’s efforts to reach citizens where they are most likely to be reached; on \u003ca href=\"/preview/gsa/digitalgov.gov/bc-archive-content-3/2016/04/26/trends-on-tuesday-smartphone-ownership-reaching-saturation-fueling-media-consumption/\"\u003etheir mobile devices\u003c/a\u003e. Its controls allow you to simulate a wide range of devices, and help you build \u003ca href=\"/preview/gsa/digitalgov.gov/bc-archive-content-3/topics/mobile/\"\u003eresponsive\u003c/a\u003e, \u003ca href=\"/preview/gsa/digitalgov.gov/bc-archive-content-3/topics/mobile/\"\u003emobile-first\u003c/a\u003e web \u003ca href=\"/preview/gsa/digitalgov.gov/bc-archive-content-3/2016/07/13/the-data-briefing-mobile-apps-responsive-web-sites-and-the-mobile-moment/\"\u003eexperiences\u003c/a\u003e. Thankfully, it’s also free.\u003c/p\u003e\n\u003cp\u003eI recently asked members of the \u003ca href=\"/preview/gsa/digitalgov.gov/bc-archive-content-3/communities/\"\u003eMobileGov Community\u003c/a\u003e if anyone else had experience using DevTools for testing mobile device views of a website. Troy Kitch and Robert Aspinall of the \u003ca href=\"http://oceanservice.noaa.gov/\"\u003eNational Ocean Service\u003c/a\u003e (NOS) at \u003ca href=\"http://www.noaa.gov/\"\u003eNational Oceanic and Atmospheric Administration\u003c/a\u003e (NOAA) were among those who responded. Troy said that he uses it often for the NOS website and that “Google’s Developer Tool is a somewhat more convenient tool [than others mentioned], because it also allows you to test style changes on the fly and preview at different sizes before actually changing your style sheets.” Robert added, “It does a great job of imitating fingertip input and disabling hover events (no way to hover on a mobile device). It’s useful when testing our responsive websites.”\u003c/p\u003e\n\u003ch2 id=\"where-to-find-it\"\u003eWhere to Find It\u003c/h2\u003e\n\u003cp\u003eThis is a \u003ca href=\"https://developer.chrome.com/\"\u003eChrome Developer Tool\u003c/a\u003e, so naturally, you will only be able to access it when using the Google Chrome browser. You can access the tool either by using the Chrome menu icon at the top right of your browser window (select Tools, then Developer Tools), or by right-clicking on any space inside the browser window and then selecting ‘Inspect’ from the dropdown menu that appears.\u003c/p\u003e\n\u003cdiv class=\"image\"\u003e\n  \u003cimg\n    src=\"https://s3.amazonaws.com/digitalgov/_legacy-img/2016/11/600-x-375-Chrome-DevTools-Elements-panel.jpg\"\n    alt=\"Chrome DevTools Elements panel.png\"/\u003e\u003cp\u003eGoogle (CC BY 3.0)\u003c/p\u003e\u003c/div\u003e\n\n\n\u003cp\u003eOpen the Device Mode toolbar by left-clicking on the icon that resembles a phone in front of a tablet (see \u003ca href=\"https://developers.google.com/web/tools/chrome-devtools/inspect-styles/shortcuts\"\u003eDevTools Windows and Mac keyboard shortcuts\u003c/a\u003e). It is found in the top left corner of the ‘Inspect’ window.\u003c/p\u003e\n\u003cdiv class=\"image\"\u003e\n  \u003cimg\n    src=\"https://s3.amazonaws.com/digitalgov/_legacy-img/2016/11/600-x-348-40circled-Inspect-and-live-edit-the-HTML-and-CSS-of-a-page-using-the-Chrome-DevTools-device-mode-icon.jpg\"\n    alt=\"Device Mode icon circled in red at top left.\"/\u003e\u003cp\u003eGoogle (CC BY 3.0)\u003c/p\u003e\u003c/div\u003e\n\n\n\u003ch2 id=\"how-to-use-it\"\u003eHow to Use It\u003c/h2\u003e\n\u003cp\u003eThe Viewport Controls that appear at the top of the browser window allow you to choose a device from a single dropdown menu. You can add more devices to that menu by choosing the “Edit” option, then scroll through a list of checkboxes to select or deselect a device. If the device you are familiar with is not in the list, you can ‘Add’ another device. So after you select a device, the snazziest part is being able to toggle that device’s orientation. You bad!\u003c/p\u003e\n\u003cdiv class=\"image\"\u003e\n  \u003cimg\n    src=\"https://s3.amazonaws.com/digitalgov/_legacy-img/2016/11/600-x-227-Chrome-DevTools-Viewport-Controls-device-mode.jpg\"\n    alt=\"Viewport Controls.\"/\u003e\u003cp\u003eGoogle (CC BY 3.0)\u003c/p\u003e\u003c/div\u003e\n\n\n\u003cp\u003eSo there you have it. Hopefully, this has pointed some of us in the direction of a free design/development tool that can help speed \u003ca href=\"/preview/gsa/digitalgov.gov/bc-archive-content-3/resources/mobile-user-experience-guidelines/\"\u003emobile development work\u003c/a\u003e within the government.\u003c/p\u003e\n\u003chr\u003e\n\u003cp\u003e\u003cstrong\u003eDisclaimer\u003c/strong\u003e: All references to specific brands and/or companies are used only for illustrative purposes and do not imply endorsement by the U.S. federal government or any federal government agency.\u003c/p\u003e\n\u003cp\u003e\u003cem\u003eFederal agencies can register their mobile products—mobile websites and native apps—on the \u003ca href=\"https://digital.gov/services/u-s-digital-registry/\"\u003eU.S. Digital Registry\u003c/a\u003e to verify that they’re \u003ca href=\"/preview/gsa/digitalgov.gov/bc-archive-content-3/2015/10/23/is-your-site-mobile-friendly/\"\u003emobile-friendly\u003c/a\u003e, authoritative sources of government information. \u003ca href=\"https://digital.gov/topics/social-media/\"\u003eLearn more\u003c/a\u003e about the Registry and \u003ca href=\"https://touchpoints.app.cloud.gov/registry\"\u003esign up here\u003c/a\u003e.\u003c/em\u003e\u003c/p\u003e\n\u003cp\u003e\u003cem\u003eGot a great idea for a mobile product or service and need help planning or releasing it? Contact the \u003ca href=\"/preview/gsa/digitalgov.gov/bc-archive-content-3/resources/mobile-application-development-program/\"\u003eMobile Application Development Program\u003c/a\u003e. Are you a federal employee interested in how agencies are using mobile technologies and building government-wide solutions? Join the \u003ca href=\"/preview/gsa/digitalgov.gov/bc-archive-content-3/topics/mobile/\"\u003eMobileGov Community of Practice\u003c/a\u003e with your .gov or .mil email address.\u003c/em\u003e\u003c/p\u003e\n"}
  ]
}