Who am I?

  • I'm a front-end web developer working at Shazam
  • We're hiring for many engineering-based roles.
  • "There is cake in the kitchen"
  • GDE gde badge

cake in office

Elements panel

Inspecting the DOM

Elements panel

  • Viewing font! information in the computed pane 
        span {
      font-family: 'Lily Script One', Arial, Cursive;
    }
  • Force element state indicators
  • Pseudo elements as their own nodes
  • Cmd + Click for Selectors, properties and their values
  • Inspect Shadow DOM

Resources

Persistent storage

Resources panel

  • Cookies (clear them if needed)
  • Application Cache (is a douchebag)
  • Local & Session storage
  • Web SQL & IndexedDB

Sources panel

Code editing

Sources panel

Layers panel

Layer promotion

Layers panel

What is a layer?

  • A portion of the page uploaded to the GPU for compositing.
  • Reasons include:
    • 3D/perspective CSS properties
    • Certain video/canvas elements
    • A few more which can change at any time

Layers panel continued

How to use the Layers panel

  • Currently an experimental feature.
  • I should be promoted to a layer.
  • Element dimensions, memory estimates, reasons for compositing and more.
  • Show composited layer borders

Extra bits

A few extra bits and pieces to quickly touch upon:

  • Flamecharts
  • Timeline panel
  • New column headers in the network panel
  • getEventListeners(document.body)

Before & after reaction of discovering new DevTools features

Before

Before discovery

After

After discovery

Elements panel: recap

elements recap 1

Elements panel: recap

elements recap 2

Resources panel: recap

Resources recap 1

Sources panel: recap

Create and edit new files

Sources panel: recap

Commented out styles: toggled off in Styles & persisted to disk

Sources panel: recap

Pretty print minified CSS and JavaScript

Sources panel: recap

Sources recap 1

Layers panel: recap

Layers panel panel: recap

Layers panel recap 1

Layers panel: recap

Grooveshark example
Goodbye

Thank you.