Overview

• Mobile Devices
• Enhance Productivity
• Use the Console

Overview

• Inspect Elements
• SASS Life-editing
• Debug JavaScript

Overview

• Analyse Network Traffic
• Analyse Page Speed
• Profile JavaScript
• Debug Memory Leaks

Overview

• Inspect Resources
• Run automated audits
• Extending DevTools
• Hack it & Contribute

Mobile Devices

Emulate Mobile Devices

Remote debug devices

Enhance Productivity

• Get used to keyboard shortcuts...
  ...and use them!
• Explore settings
  Disable cache, add folder to workspace, show colors as authored, enable user agent styles...

Use the keyboard

• ⌘⌥I - toggle dev tools
  J to focus directly on console
• ⎋ - toggle Console drawer
• use ⌘+0/-/+ to zoom
• Enable ⌘ + 1-9 shortcut to switch panels
• ⌘O - open any loaded file anytime
• ⌘⇧F - search for text in loaded files anytime
  C to open in inspection element mode
• Full list in Settings -> Shortcuts

The Console

Console Overview

• Get the max out of the panel
  Preserve logs, filters, frame selector
• Don't forget the settings
  Log XHR requests, show timestamps...

console.log

• Supports string substitution

  console.log("%s has %d points", "Sam", 100);

  Also %c for css styles and %o / %O for Node/javascript representation
• Use the siblings for easy filtering:
  warn(), error(), info(), debug()
• Advanced usages
  Grouping with

  group('logging')

  ,

  console.log('Getting data from DB', logging)

  ,

  groupEnd()

  Get a call stack of your execution point with

  console.trace()

  Log timing with

  time('logging')

  ,

  timeEnd('logging')

  Show on the timeline panel when your script is executed with

  console.timeStamp('my-script')

Devtools Command Line

• $(...) - return first element
• $$(...) - return all elements
• $x(...) - resolve xpath
• $_ - return last result
• Inspect your data

  table([{ firstName: "John", lastName: "Smith" },{firstName:"Jane",lastName:"Doe"}]);

  keys(object)

  ,

  values(object)

Element references

• use $0 to access the currently selected element
• use $1-$4 to access the previous four
• Combine with other inspection commands

  inspect($0)

  ,

  dir($0)

  ,

  copy($0)

Monitor events and functions

(un)monitor(TI.app.init)

debug(TI.app.init)

(un)monitorEvents(window, ["resize", “scroll"])

getEventListeners($0)

And much more

• clear() the command line window
  Or ⌘K
• Commandline API documentation

Inspect Elements

Style Panel

• Never type again!
  Color picker, easing function editor, control animation speed
• Be lazy, or accurate, or both...
  Use arrow-keys and modifiers to increment/decrement numeric properties ⌥ ±0.1
  ⇧ ±10
  ⇧⇞ ±100
• Use pseudo-classes
  :hover, do not underestimate :focus and :active for touch devices
• It still doesn't work!!!
  Give a look to the computed styles! Or add your style to the stylesheet you want

Other features

• Use your mouse
  Rearrange, add pseudo-class, copy css or xpath, scroll into view, break on ...
• Event Listeners and Properties Panel
  Inspect all listeners registered, includes listeners reached through bubbling Check the javascript representation of elements

Extensions

• Angular Scope Inspector
• jQuery Audit

Sources

• ⌘O or ⌘P to open any file from anywhere
• ⌘⌥F from anywhere to find stuff in any files
• ⌘⇧O to find methods/selectors within that file
• use pretty-print {} button to reformat compacted files

Life-editing SASS files in 7 steps

1. Compass 1.0 + SASS 3.4
2. Add

   {sourcemap => true}

   in config.rb
3. Remove hashes in Assetic
4. Enable css source maps in DevTools
5. Add folder to workspace
6. Map files to network
7. Compass watch

Content Scripts / Snippets

• Save javascript snippets
• With internal history

Debug JavaScript

• Break the points
  debugger; XHR, DOM, Conditional
• Analyse your code
  Scope variables, spys, evaluate
• Go in depth
  Call stack, async debugging

Async Debugging

Analyse Network traffic

• check cacheing strategy
  Cache-Control, ETag, Last-Modified
• analyse connection re-use
  Connection Id, Keep-Alive
• verify transmission standard (HTTP/Chunked/SPDY)
  Content-Encoding, Content-Length, Protocol
• measure impact
  Time, Size
• find the cause
  Initiator

Waterfall view

• look for stalled requests
• find dns lookups and initial connections
• watch for overly long TTFB and download times

Filter

• hide data urls
• filter by...
  • status-code
  • set-cookie-name/value
  • has-response-header

and more

• copy headers
• copy as curl
• replay XHR
• save as HAR

Analyse Page Speed

• analyse execution order
• layout thrashing
• optimise animations

Timeline

great tool for performance and execution analysis

• 3 async layers
  • Network
  • Javascript
  • Layout, Paint & Compositing
• look for gaps and blockers
• add markers via console.timeStamp()

Events View

shows in-depth view of what happens when

• activate 'Causes'
• activate 'Paint' to see snapshots of painted areas
• grouped events illustrate causalities
• grey cpu load bars at top
• forced layouts marked by warning triangles
• pay attention to Aggregated Time, Total Time & Self Time

Flame Chart View

visual execution overview

• use WASD keys to navigate
• forced layouts marked by red corners
• look for horizontally large strips

Frames View

shows animation frames

• use for Paint/Compositing optimisation
• look for large frames and events that exceed frames

Memory View

spot memory leaks

• use trashcan icon to force GC cycles
• look for increasing memory base line after GC cycles
• look for increase in listeners, DOM nodes and JS objects

Profile JavaScript

• create from JS

  console.profile();
  ...
  console.profileEnd();   

• visualize JS execution by time
  Chart
• find most time consuming methods
  Heavy (Bottom up)
• drill down through execution tree
  Tree (Bottom up)

Debug Memory Leaks

• identify in Timeline
• debug in Heap Profiler

Identify memory leaks in Timeline

• activate Memory view
• execute suspicious action(s)
• execute steps to rewind to original state
• hit trashcan button to force GC cycle
• repeat at least 5 times

Steady growth of lows after GC cycles indicate memory leaks.

Create Heap Profile

• open incognito Window
• select Record Heap Allocations and hit start
• execute actions and repeat at least 5 times
• and/or force GC cycles in between
• hit stop

Analyse Heap Profile

• blue lines are leftover objects
• use timeline to narrow to a section
• use Summary or Containment view to analyse objects
• use Retainers view to trace open references

Run automated audits

• use Web Page Performance audits

Custom audits

• enable chrome://flags - Experimental Extension APIs
• follow the documentation