• Authoring workflow
  • Mobile development
  • Performance

Remy Sharp on never leaving the DevTools

Introducing WOrkspaces

Workspaces

  • Edit entire folder (C++, PHP, Markdown)
  • Styles pane changes persist
  • Edit anywhere and changes are kept
  • Full undo/redo
  • Maintain your context

Sass styles

Demo

DevTools support for Sass

  • Full traceability of selectors, properties, variables
  • Contributed V3 sourcemap support in Sass core
  • Automatic reload of stylesheet

DevTools is my editor

DevTools is my editor

  • Style as I type
  • Persist to disk
  • JS re-evaluated on the fly
  • Breakpoint debug where you author

Taking it mobile

Before: ADB wrestling

Can I develop localhost:8080?

  • Easy, no command-line setup (beta)
  • See all connected devices in about:inspect
  • Same feature set of desktop on mobile
  • DevTools extension support
  • Port forwarding

Performance

Use Timeline for the overall picture

Dig deeper into perf tooling at #io13

JS Profiling Flamechart

Canvas Profiling Experiment

5 Key Performance Features

#1: Continuous repaint mode

#2: FPS meter & memory consumption

#3: Show paint rects & layer borders

#4: Object allocation tracking

#4: Layout thrashing details

Try it out today.

Refreshed DevTools documentation

Everything I showed is in Chrome Canary

Thank you!