How to Use Google Chrome Web Developer Tools

Done are the days when the only programming and testing tools found within a browser allowed you to view a page's source code and nothing more. Modern web browsers let you take a deep dive into things like the advanced debugging JavaScript snippets, inspecting and editing DOM elements, watch real-time network sources as your app or page loads to identify bottlenecks, analyzing your CSS, monitoring your code to ensure it is not utilizing too much memory and much more.

Developer tools allow you to edit and debug your website or application code, audit individual components to expose performance issues, simulate different device screens including those running Android or iOS, and perform several other useful functions.

  1. Click on Chrome's main menu button, marked with three horizontal lines and located in the upper right-hand corner of the browser.
  2. When the drop-down menu appears, hover your mouse cursor over the More tools option.
  3. A sub-menu should now appear. Select the option labeled Developer tools. You can also use the following keyboard shortcut in place of this menu item: Chrome OS/Windows (CTRL+SHIFT+I), Mac OS X (ALT(OPTION)+COMMAND+I)
  4. The Chrome Developer Tools interface should now be displayed, as shown in this example screenshot. Depending on your version of Chrome, the initial layout that you see may be slightly different from the one presented here. The main hub of the developer tools, typically located on either the bottom or right-hand side of the screen, contains the following tabs.

    Elements: Provides the ability to inspect CSS and HTML code as well as edit CSS on-the-fly, seeing the effects of your changes in real time.


    Console: Chrome's JavaScript console allows for direct command entry as well as diagnostic debugging.


    Sources: Lets you debug JavaScript code via a powerful graphical interface.


    Network: Categorizes and displays detailed information about each related operation on the active application or page, including complete request and response headers as well as advanced timing metrics.

    
Timeline: Allows for in-depth analysis of every activity that takes place within the browser as soon as a page or app load request is initiated.
  5. In addition to these sections, you can also access the following tools via the >> icon, located to the right of the Timeline tab.

    Profile: Broken down into CPU profiler and Heap profiler sections, provides comprehensive memory usage and overall execution time of the active application or page.

    Security: Highlights certificate problems and other security-related issues with the active page or application.


    Resources: This is where you can inspect cookies, local storage, app cache, and other local data sources used by the current Web page or application.


    Audits: Offers ways to optimize a page or application's load time and general performance.
  6. Device Mode allows you to view the active page in a simulator which renders it almost exactly as it would appear on one of over a dozen devices, including several well-known Android and iOS models such as the iPad, iPhone, and Samsung Galaxy. You are also given the ability to emulate custom screen resolutions to fit your particular development or testing needs. To toggle Device Mode on and off, select the mobile phone icon located directly to the left of the Elements tab.
  7. You can also customize the look and feel of your developer tools by first clicking on the menu button represented by three vertically-placed dots and located on the far right-hand side of the aforementioned tabs. From within this drop-down menu, you can reposition the dock, show or hide different tools as well as launch more advanced items such as a device inspector. You'll find that the dev tools interface itself is highly customizable via the settings found in this section.