If you browse the documentation of the DevTools, you will see that there is a lot of material to read through and that they come with a lot of features. This can be quite overwhelming, but the good news is that you don’t have to read through all this material. On March 21, 2013, the good guys from codeschool.com launched their brand new free course on the DevTools. The cool thing about Code School’s approach to online learning is that they combine video instruction with interactive challenges, which you can do right inside your browser. It is learning by doing without the hassle of having to install anything. In the remainder of this post, I will walk you through the main features of the DevTools without getting too much into detail. The details I leave to Code School’s free DevTool course.
Important Keyboard Shortcuts
- Open DevTools: Ctrl + Shift + I (Win), Alt + Cmd + I (Mac).
- Open DevTools and bring focus to console: Ctrl + Shift + J (Win), Alt + Cmd + J (Mac).
- Toggle inspect element mode: Ctrl + Shift + C (Win), Alt + Cmd + J (Mac), this is equivalent to clicking on the magnifying glass.
This panel gives you a real time view of the loaded web page as the browser sees it. It covers the actual HTML document tree (DOM) and CSS. You can manipulate the page in real time: you can alter, add or remove elements in the DOM, or you can alter, add or remove CSS rules. All changes are temporary and get lost when refreshing the page.
You can open any sources such as HTML or CSS and make versioned changes. You can save any changes to the browser’s storage using Ctrl + S (Win) or Cmd + S (Mac). You have access to the version history and you can revert to previous versions or revert all changes. When you are happy with your changes, you can save the source anywhere on your drive.
This panel helps you analyze how fast the browser loads resources, i.e. how long it takes to send them from the server to the browser. When debugging network performance, you need to ensure that caching is disabled. You can do this in Settings → General or on a case by case basis executing a forced reload with Shift + F5 (Win) or Shift + Cmd + R (Mac). An even better option is Chrome’s incognito mode. Use Ctrl + Shift + N (Win) or Cmd + Shift + N (Mac) to activate incognito mode. This deactivates all plugins (which might interfere with the network analysis) and forces reloads without caching. You can then check latency and loading times displayed as waterfall for different types of resources and you can see when the DOMContent event and Load events are fired.
This panel comes with three views: Events, Frames and Memory. All three make use of the same principle: you press the record button to start recording, do something with the web page and press the record button again to stop recording. Then you can analyze the actions you have recorded:
- The Events View gives a detailed account of what the browser did and how long it took. This is one giant waterfall diagram with a lot of granular information. But it is not really clear to me what exactly is the added value of this view.
- The Frame View helps identifying potential bottlenecks that make the webpage slow. Such bottlenecks could be caused by loading, rendering, scripting or painting. This view requires that you understand the basic principles of how the browser renders dynamic elements of your web page. I recommend you watch this talk from Google IO 2012 to get a grasp of the concept of frames. Basically, the browser tries to maintain a frame rate of 60 frames per second to ensure smooth rendering. The potential bottlenecks I mentioned before can influence the frame rate negatively. The frame view allows you to identify frames that take more time to be processed than what is required to maintain 60 frames per second. You can then see what type of processing was done in a suspicious frame and continue profiling in the Profiles Panel.
- The Memory View shows the memory consumption of the web page. This can help you figure out whether the page causes a memory leak. In order to investigate the root cause of a memory leak, you need to switch over to the Profiles Panel and take heap snapshots.
- CSS Selector Profile: this profile helps you narrowing down CSS rules that cause painting take longer.
While the first few panels are straight forward, the Timeline and Profile Panels go deep into the subtleties of client-side web application development. Since this blog post is meant as a teaser for the DevTools, I recommend reading the following articles to delve deeper the Timeline and Profile Panels:
- Improving Web App Performance With the Chrome DevTools Timeline and Profiles
- DevTools: Visually Re-engineering CSS For Faster Paint Times
- Profiling CSS for fun and profit. Optimization notes.
Harvesting the Low Hanging Fruit
In case your mind is now buzzing because of all the information in this article and you are not sure how to optimize your web pages, there is some good news for you. There is a nice way to harvest the low hanging fruit of website optimization without having to delve into all the DevTool complexities. Install Google’s PageSpeed extension to do a fully automated analysis of page loading behavior. This extension adds the PageSpeed Panel to the DevTools, which suggests easy to implement prioritized improvements for any web page.
DevTools have evolved into a sophisticated toolbox for analyzing web pages from various angles. They bring a similar level of comfort to front-end development as if you were working on the back-end with your favorite IDEs. Eventually, DevTools will make it easier for developers in small projects to switch back and forth between back-end and front-end development, simply because they can use transfer their coding skills more easily using a similar approach and similar tools. As mentioned further up, I strongly recommend you take the free DevTools course on codeschool.com to delve deeper.
If you feel like you need more detailed information on the DevTools, check out the Google Developer YouTube channel. You will find a series of videos from The Breakpoint series, in which Paul Irish and Addy Osmani show off more DevTools features. I link the first 6 episodes below:
- The Breakpoint Ep. 1: Chrome DevTools with Addy Osmani and Paul Lewis
- The Breakpoint Ep. 2: Chrome DevTools with Paul Irish and Addy Osmani
- The Breakpoint Ep 3: The Sourcemap Spectacular with Paul Irish and Addy Osmani
- The Breakpoint Ep. 4 —The Tour De Timeline
- Breakpoint Episode 5: DevTools Grab bag
- The Breakpoint Ep. 6: Accelerating Load Time, Run Time, and JS tooling
EoP → Join the discussion and comment below or on Twitter @jawab_blog.
This post has been published under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License (attribution: link to http://wp.me/p2F29Z-7F).