A Modern Front-End Workflow

Render Conf 2017

A video of this talk is available on YouTube

Thanks to

Springer Nature (Company) We're hiring!

What I like...

Twitter: @umaar

Dev Tips: DevTools gifs in your inbox

140 tips posted so far!

umaar.com/dev-tips

🎊 New Project 🎊

Modern DevTools

moderndevtools.com

Why this talk?

  • Move past console.log!
  • Understand the state of DevTools in 2017
  • More efficient development & debugging

What will we cover?

  • 🚀Performance
  • 🔎Accessibility
  • 🆕What's new in DevTools

Let's start...

Performance 🚀

github.com/umaar/dev-tips/issues/27

  • FPS Meter
  • Paint Profiler
  • Paint Flashing
  • Timeline Recorder
  • JavaScript Source Code Profiling
  • Network Timing Breakdown
  • Console Timing
  • Filmstrip recording
  • perf/audits
  • Scroll Bottlenecks
  • JavaScript Heap Snapshots
  • CPU Profiler
  • Performance Audits
  • Layers Panel
  • Layer Border Outlines

Console Violations

Example violations

  • Forced reflow is a likely performance bottleneck.
  • Idle callback execution extended beyond deadline by 100ms
  • Long JavaScript handler took 100ms
  • Not optimized" JavaScript profiler bailout

Timeline Flow 📈

Hello online viewer. This part of the talk was a live demo. You can still see the feature here

perf/audits   🕵️

github.com/perfs/audits

googleChrome/discovery   🔮

github.com/googleChrome/discovery

Accessibility   🔎

Accessibility Inspection

Without an extension...

Say hi to the

Accessibility Inspector

What's new in DevTools 🆕

CSS Variable Support

Object Previews

Smart Console 💡

Docking Support 🔼 🔽

Server Timing ⏲

Code Coverage

Continue to Location 🔀

Lighthouse 🏠

Keeping it in the browser and the terminal 💻

Hello online viewer. This part of the talk was a live demo. You can still see the feature here

Coding with Persistence 2.0

Hello online viewer. This part of the talk was a live demo. You can still see the feature here

General Recap ♻

  • Use Timeline Flow to understand event relationships
  • Accessibility Inspection - Check your pages!
  • Locate unnecessarily loaded code with coverage tooling
  • Code in the browser with Persistence 2.0

Thank you