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?
- 🆕Recent Updates
- 🚀Performance
- 💻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:
Colour Contrast
Hello online viewer!
This part of the talk included a live demo. You can see the feature here:
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:
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:
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:
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:
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:
Request Blocking is a thing!
Workflow Recap:
📽 Record perf profile #1
🚫 Block a script (product) in the Network Panel
📽 Record perf profile #2
📊 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:
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:
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:
Recap
Terminal
Sources Diff
Changes Drawer
Workspaces
Thank you
-
Course Website - ModernDevtools.com
-
DevTools tips and tricks in your inbox - umaar.com/dev-tips
-
Twitter - @umaar