A Modern

Front-End Workflow

  • 📖 Loads of content at   sitepen.com/blog
  • 👐 Open Source:   Dojo 2 / Intern / dgrid!
  • 🌐 Remote Friendly

A bit about me

Twitter: @umaar

Dev Tips: DevTools gifs in your inbox

🎊 +160 tips posted so far! 🎊

umaar.com/dev-tips

ModernDevTools.com

A Premium Video Course 📹

What will we cover?


  1. 🆕Recent Updates

  2. 🚀Performance

  3. 💻Development Workflow

What you need to know

  • Use Canary
  • Experimental
  • Live demos + media

Let's start

Recent Updates 🆕

Elements Panel

📸 Page Screenshots

  • Element
  • Viewport
  • Page
  • Cmd + Click

Hello online viewer!

This part of the talk included a live demo. You can see the feature here:

umaar.com/dev-tips/151-screenshot-capture/

Colour Contrast

Hello online viewer!

This part of the talk included a live demo. You can see the feature here:

umaar.com/dev-tips/70-contrast-ratio/

CSS Grid Highlighting

Console Panel

Smart Console 💡

Top-level await


url = 'http://numbersapi.com/5/math';
await fetch(url)

Hello online viewer!

This part of the talk included a live demo. You can see the feature here:

https://twitter.com/umaar/status/897408737694109697

Cleaner Logs with Log Management


console.context('Third Party')

Hello online viewer!

This part of the talk included a live demo. You can see the feature here:

https://umaar.com/dev-tips/153-log-management/

Identify Unused CSS & JS

Code Coverage - unused.css

Hello online viewer!

This part of the talk included a live demo. You can see the feature here:

https://umaar.com/dev-tips/121-css-coverage/

Code Coverage Features
  • 👁   Visualise your unused CSS & JS
  • ♻   Real-time updates

Bookmarklets Revamped

DevTools Snippets

Performance 🚀

Was traditionally all in the network

But

Heavy frontend?

Then say hello to

👋 Render Performance 👋

  • Scrolling smoothness
  • Animation FPS
  • Size of the DOM
  • CSS Complexity
  • Time to interactive
  • Speed of visual progress
  • User input response Times
  • JavaScript parse time
  • JavaScript execution time
  • JavaScript heap size

Fortunately, we have

Tooling

  • FPS Meter
  • Paint Profiler
  • Paint Flashing
  • Timeline Recorder
  • JavaScript Source Code Profiling
  • Network Timing Breakdown
  • Console Timing
  • Filmstrip Recording
  • Scroll Bottlenecks
  • JavaScript Heap Snapshots
  • JavaScript Allocations
  • CPU Profiler
  • Timeline History
  • Paint Indicators
  • Memory Profiler
  • Layers Panel

These tools can turn something

qualitative  👌


Into something

quantitative  🔢

🐢🐢   "It feels sluggish"   🐢🐢

DevTools can help you

quantify

the performance of your webpage

Page Smoothness

With the FPS Meter

JavaScript Execution Cost

Line Level Profiling with three.js

Hello online viewer!

This part of the talk included a live demo. You can see the feature here:

https://umaar.com/dev-tips/99-line-level-profiling/

Breaking Rules

Console Violations

DevTools Audits

Find out:

  • Why the audit is important?
  • How to pass the audit
  • How the audit is implemented

Shareable Audits

Hello online viewer!

This part of the talk included a live demo. To see the feature, navigate here:

https://www.webpagetest.org/result/170530_0F_V3N/

And click on 'Lighthouse PWA Score'

Performance Updates

A 2️⃣ Minute Performance Workflow

Quantify damage from third-party scripts

Hello online viewer!

This part of the talk included a live demo. To see the feature, check out the video at 🕥 21 minutes and 49 seconds:

https://vimeo.com/235431630

Request Blocking is a thing!

Workflow Recap:

  1. 📽   Record perf profile #1

  2. 🚫   Block a script (product) in the Network Panel

  3. 📽   Record perf profile #2

  4. 📊   Compare recording #1 with #2

Find Third Party Scripts

Product Badges

Performance Monitor 🆕

Hello online viewer!

This part of the talk included a live demo. You can see the feature here:

umaar.com/dev-tips/155-performance-monitor/

Performance Monitor - Why?

  • Quicker + simpler introduction to render performance
  • Capture metrics throughout your complete website usage
  • Drill down into only what you care about - remove the noise

Development

Workflows

  💻

Animations

  • Animation Recorder
  • Animation Inspector
  • Modify Animation Timing

Hello online viewer!

This part of the talk included a live demo. To see the feature, check out the video at 🕥 30 minutes and 17 seconds:

https://vimeo.com/235431630

Authoring

With the combined power of:

  • Terminal
  • Sources Diff
  • Changes Drawer
  • Workspaces

Hello online viewer!

This part of the talk included a live demo. You can see the feature here:

moderndevtools.com/lessons/12

Recap

Terminal

Sources Diff

Changes Drawer

Workspaces

Thank you