A Simple Guide To Chrome DevTools

Chrome DevTools is a set of web development tools built-in to the Chrome browser to help test and debug web sites, evaluate performance and/or look at the source code of any website.

This blog will list all the options available in the Chrome DevTools and give a brief description and link to usage examples.

Open Chrome DevTools and Shortcuts
To open the Chrome DevTools, you can either select the menu on the top right hover over tools and select developer tools or press the F12 key for Windows or cmd+option+I for Mac. There are many keyboard shortcuts for Chrome DevTools .

The following is a reference Guide to Chrome DevTools Option Menu from the order of left to right.

Inspect Element Mode Button (magnifying glass button)
By clicking on this button, it enables element inspection by clicking on an object in the page itself.
 

Emulator Button (mobile icon button)
Emulates how your website looks like on devices for development

• This is a relatively new feature that was on Google Canary (Alpha version of chrome browser)
• To emulate click on the Emulator button and select the device you would like Chrome to emulate. Note: you may have to refresh the page in order for Chrome to display the html in the select emulated device.

Elements Panel
Gives a split view of HTML elements on the left and three style options on the right Styles/Computed/Event Listeners on the right(defaults to Styles view). Everything on the right reflects the selected DOM element on the left side.

• HTML view allows you to inspect elements of the DOM
  • You can edit the HTML by double clicking
  • Add an attribute by right clicking and select ‘add attribute’ to a the DOM element
  • Clicking the triangles to view more/less of parent elements
• Styles view ( first tab on the right) displays the style rules of the selected element in the HTML view. In the styles view, you can:
  • Modify styles in the selected DOM/HTML element by adding new styles or changing the current styles
  • Enable/disable styles by hovering over and check/uncheck the check boxes
  • Change the state of an element such as hover states that allow you to inspect the state of that element by selecting ‘toggle element state’ button.
• Computed style pane, next to the Styles pane which shows you the final css values of a selected element.
  • You are able to view the css box model(width, height, padding, margin, border etc)  representation of the element by hovering over each section
• Event Listeners pane, next to the Computed style pane, list all the event listers the selected element has.

Network Panel
Reports network interactions of website with detailed information of each interaction. This Network Panel is a good way to evaluate network performance.

By refreshing the page with the Network Panel you can view see the page populate with a list of all the network traffic. Each item will have the following information:

• Name (path of of resource)
• Method (http request action)
• Status codes (ie. 404, 200, 304)
• Type (file type)
• Initiator (what file initiated this request and links you to the source)
• Size (of file)
  • transparent part tells us when the resource request started to when it started to load information to us
  • the solid part indicates when our resource started and finish downloading the resource
• Time (latency of this resource)
• Timeline (color coded by type)
  • html = blue
  • Js = orange
  • css = green
  • images = purple

A good way to optimize network performance is to have least amount of request possible. If your web application has links to multiple files, the browser will request each one individually which will slow down your network performance. To remedy this, you can put all your JavaScript files into one file and minify all the extra white spaces. If they are links to online JavaScript files you can use Closure Compiler, an online tool by Google to combine and minify multiple JavaScript files and gives you a link you can link your files to. You can also combine and minify your CSS with CSSMinifier.

Sources Panel
Displays a list of all sources on the left column. You can modify your HTML, CSS and JavaScript and save the changes. The Sources panel also doubles as a Javascript debugger tool with the debugger menu on the right side column.

• Edit and save source files by right clicking and select “save as” option or use the keyboard shortcut ctrl+s for windows and cmd+s for mac.
• JS debugger options contain:
  • Continue button:
    • runs code until we encounter another breakpoint.
  • Step over button:
    • Steps through code one line at a time to see how each line affects variables through the execution. If a line calls another function, the debugger will not jump into the code, but will instead step over it so the it will remain on the current function.
  • Step into button:
    • Steps through code one line at a time to see how each line affects variables through the execution, a function call will cause the debugger jump into to the first line in the functions.
  • Step out button:
    • Jump out of current function back to its caller/parent function
  • Toggle breakpoints button:
    • Enable/disable breakpoints
  • Pause on caught/uncaught exceptions button:
    • One click enables pause on exception button (including try/catch block which are caught exceptions). Next time we run code it will pause on errors and we can hover over objects for details such as what object a variable is holding on the current loop click on stack trace on the list on right side of sources panel.
    • If a js file most likely a library is minified you can press the pretty print button to check out your code in a readable manner
    • To pause on uncaught exceptions click for 2nd time pause button

Timeline Panel
Allows you in real time to see how many frames per second it takes to run scripts, render sources and paint them to the browser. This panel is a great tool for performance profiling by recording the activity as you run/interact with a web page.

• Frames view option gives detail Frames per second rendering events of your page
• Color coded by (loading:blue scripting:yellow rendering:purple painting:green)
• If a frame has a low frame rate you can go to the profile panel to pinpoint the JS that maybe slowing the frame rate

The Timeline panel is a very powerful tool for checking for performance issues. For more details information about this panel go to Performance profiling with the Timeline, the official Chrome DevTools documentation.

Profile Panel
This panel profile the execution time and memory usage of a web app or page. You can record and compare profiles to help you understand where resources are being spent, and helps you to optimize your code.

• Collect Javascript CPU Profile
  • Records Javascript activity to show execution time
• Take Heap Snapshot
  • Records a snapshot profile to show memory distribution in JavaScript object and DOM elements.
• Record Heap Allocations
  • Record JavaScript object allocations over time and identify memory leaks

There are a few different links to official documentation these are the ones I found:

Profiles Panel
Profiling JavaScript Performance
 

Resources Panel
Lets you inspect resources loaded to the page. You can interact with Frames(This lets you see the resource loaded for the page), HTML5 Databases, Local Storage, Cookies, and Application Cache. The Google documentation page for the Resources panel gives you some demo exercises you can follow along to learn more about this panel. In addition to the official documentation, the blog from TechRepublic is also a good read.

Audits Panel
Gives you the option to audit current state of a web page or reload page for speed giving you the status of each category(ie. browser caching). HTML5ROCKS’ Auditing Your Web App For Speed gives a good explanation a step by step instructions on how to use and evaluate the results.

• In addition to the Audits Panel, you can use Chrome’s Page Speed Extension. This adds a new panel to your Chrome DevTools and runs a speed test and gives a report on explanations and optimization suggestions.

Console Panel
The Console panel is basically a log and command line interface that allows you to run any Javascript commands. You can also access the panel from the drawer view by using the “esc” key shortcut.

Show Drawer Button (hamburger menu with right angle bracket icon)
Pulls up a slide up panel over the chrome DevTools main panels to all you to have access to the items in the Drawer and the panels at the same time. It is good for accessing the console and elements window at the same time.

• Can be accessed by pressing the “ESC” key shortcut.

• Gives a pane with tabs( console, search, emulation, and rendering )
• Console tab
  • active when main console panel isn’t selected
• Search tab
  • A search box for source files. Good for looking for JavaScript code and corresponding CSS and HTML code at the same time.
• Emulation (same as the clicking the emulator button)
• Rendering
  • Options to show detail views of objects that the browser renders for the page

Settings Button (gear icon)
Advance property settings for when Chrome DevTools is active

• You can select the option to disable cache while DevTools is open.
• Disable/Enable Javascript, source indentation, autocompletion, bracket matching etc.
• Lists many shortcuts and links to the full list of Chrome DevTools Shortcuts

Undock to Separate Window Button (2 rectangles icon)
Toggle DevTools to and from a separate window.
 

If you like to learn more about Chrome DevTools, I suggest going through Discover DevTools’ video tutorials and exercises. And also go to Chrome DevTools documentation for full detail explanation.