Chrome Dev Tools – aka Me! – Covered in this talk

View Github Repository Open presentation in a new window

owilliams

See all presentation from owilliams

Chrome Dev Tools – aka Me! – Covered in this talk

0 0

chrome-dev-tools

On Github owilliams / chrome-dev-tools

Chrome Dev Tools

for the inefficiently lazy developer

aka Me!

Owain Williams

Front-End Engineer @ Toushay

Curator @ Ember Weekly

Covered in this talk

  • Quick Tour
  • Tips + Tricks
  • Tools + Resources

NOT Covered in this talk

  • Introduction to developer tools
  • Deep dive into features
  • Firefox Dev Tools - sorry :(
  • IE - because it has shit developer tools!

Let me in!

or right-click of course.

There are a ton more shortcuts btw!

Docking

  • Docked bottom
  • Docked right (widescreens)
  • Undocked Window

Elements

View and edit the loaded web page's DOM and CSS.

  • Drag n Drop Elements
  • $0, $1, $2, ...
  • Force Element State, Colour Picker, etc
  • Event Listeners
  • DOM Breakpoints

Chrome Dev Tools Elements docs

Network

Records detailed information about each network operation in your application.

  • load + DOMContentLoaded events
  • Customize displayed data (right-click)
  • HAR
  • window.performance

Chrome Dev Tools Networks docs

Snippets

Allows you to create, store and run JavaScript within the Sources tab.

Chrome Dev Tools Snippets docs

Console

  • A place to log diagnostic information
  • A shell prompt where you can enter commands and interact with the document

  • Console Settings
  • Console API
  • Commandline API

Chrome Dev Tools Console docs

Console Settings

Chrome Dev Tools Console docs

Console API

Chrome Dev Tools Console API docs

  • console.count('label')
  • CSS Styling - console.log("%cThis will be formatted with large, blue text", "color: blue; font-size: x-large");

Commandline API

Chrome Dev Tools Commandline API docs

  • $ === document.querySelector
  • $$ === document.querySelectorAll
  • document.body vs dir(document.body)
  • monitorEvents(window, "resize");

Sources

Sources

  • Fuzzy Search
  • Pretty Print
  • Local Modifications

Breakpoints

  • Conditional break point
  • Pause on exception
  • Toggle breakpoints

Chrome Dev Tools JS debugging docs

Mobile Emulation

  • Screen Size
  • Geolocation
  • Touch
  • User Agent

Chrome Dev Tools Emulation docs

Profiles

Chrome Dev Tools Profiling docs

Timelines

Chrome Dev Tools Timeline docs

Tools

Resources

Thank You

This mess was thrown together by

Owain Williams

@owz