devtools.md

Chrome Developer Tools at I/O 2016

About the I/O presentation and demo app

The Chrome DevTools team gave this presentation at Google I/O 2016.

The code for the exact demo app used in their presentation apparently isn't public, but was based on the progressive web app CodeLabs demo, the code for which is here, in the 'final' directory.

Progressive web apps have a responsive design and define a manifest.json, which gives URLs for launcher icons and the start URL for the app. With the manifest.json in place, users can add the web app to their device home screen and launch it directly. Another common feature of progressive web apps is their use of service workers to cache resources, which allows them to load quickly, cut down on network use, and potentially work offline.

Device emulation

Now has in its settings menu options to add device frame and to take a screenshot with the device frame. Can also test network throttling.

Also in the settings menu is the option to show media queries, which will show flexbox break points.

In the I/O presentation, Paul Bakaus demos this by adding the following to the CSS file:

/* Added media query */
@media (min-width: 1015px) {
    .main {
        display: flex;
        align-items: flex-start;
        flex-wrap: wrap;
        align-content: flex-start;
    }
    
    .card {
        flex: 1 1 auto;
        max-width: calc(50% - 32px);
    }
}

Only the break points in use for the current device frame are highlighted, as can be seen by resizing the window. Alternate-click on a media query bar to get option to go to where it is defined in the code.

CSS variables

Can use the color palette picker to change colors directly in CSS. Has option for predefined palettes, including Material Design.

Demo adds following CSS variables:

  --header-color: #2f1e7e;
  --background-color: #ececec;
  --card-background-color: #fff;
  --card-text-color: #444;
  --card-faded-color: #888;

Add to new class, demoing new feature to add and toggle classes and style rules.

How to find stuff

CMD+shift+P (like in Sublime) brings up a search bar for DevTools features and commands.

Source diffs

To enable this feature, go to chrome://flags, enable developer tools experiments, reload chrome, then under settings -> experiments, enable 'Source diff'.

Quick source panel shows diffs inline next to console. Clicking something in styles also jumps to matching line in the quick source panel. Clicking a color defined by a SASS variable will jump to the variable definition in quick source. An edit to a color in the element styles also updates the SASS variable definition, and all other elements using that color.