Building a Better Website with Chrome DevTools

1. Henry Lim GDE Web Technologies @henrylim96 Building a Better Website with Chrome DevTools
2. Half screen photo slide if text is necessary Henry Lim ‍ ✈ @henrylim96 Google Developer Expert, Web Technologies ❤ PWA, DevTools, Fugu, Firebase, T-Rex
3. @henrylim96
4. @henrylim96
5. @henrylim96 Photo by Saad Salim on Unsplash ~300k LOC JS ~18k LOC CSS
6. @henrylim96 Photo by Mario Caruso on Unsplash Browser DevTools CDP Chrome DevTools Protocol
7. @henrylim96
8. Enable DevTools Experiments Flags chrome://flags/#enable-devtools-experiments General @henrylim96
9. Remote Debugging chrome://inspect/#devices • Remotely debug web content on an Android device. • Now it works with Facebook In-app browser! General @henrylim96
10. Command Menu • Use Cmd + Shift + P in DevTools to open up the command menu. • You can use the arrow keys or the mouse to make a selection in the menu. • The menu consists of commonly used DevTools functions. General @henrylim96
11. Inspect Element Tooltip • Quick glance at the computed styling of elements as you do not need to click on each element to reveal the tooltip Style @henrylim96
12. Change color format • You can toggle between RGBA, HSL, and hexadecimal formatting by pressing Shift + Click on the color block. • Tips: You also can set default color syntax format from the DevTools settings. Style @henrylim96
13. Modern CSS Color Syntax • Color picker now produces modern CSS color syntax, as opposed to the legacy comma-based syntax. Style @henrylim96
14. Computed Panel • View only the CSS that's actually applied to an element. • Use it to check what is the rendered font (and the source of the font: Network resources / Local file) Style @henrylim96
15. Animations Panel • Inspect and modify animations with the Animation Inspector. • Slowwwwwww down the animation. • Modify timing, delay, duration or keyframe offsets of an animation group. • Limitation: Bezier editing and keyframe editing are currently not supported. Style @henrylim96
16. Taking Screenshot • How to take screenshot like a pro! • Screenshot options: - Capture screenshot - Capture selected portion - Capture node - Capture full size / full page Style @henrylim96
17. CSS Autocomplete Style @henrylim96
18. Contrast (Line) Ratio Style @henrylim96
19. (Keyboard shortcut) Hide the currently-selected element • Select any element, then click on “H”. Style @henrylim96
20. Image preview for background-image • Hover over a background-image value in the Styles pane to see a preview of the image in a tooltip. Style @henrylim96
21. CSS Overview Style @henrylim96
22. VisBug • Web design debug tool (Chrome Extension) • DevTools for designer! • Try it out: visbug.web.app Style @henrylim96
23. Logging • console.log() • console.table() • console.trace() • console.error() • And more ... JavaScript @henrylim96
24. Local Overrides • Use Local Overrides to override files loaded from network with your own ones for testing execution flows. JavaScript @henrylim96
25. HAR Import & Export • Share network logs with colleagues more easily with the Export All As HAR With Content and Import HAR File Import buttons JavaScript @henrylim96
26. Network Conditions • Now you can set a custom User-Agent string through the Network Conditions tab. • The User-Agent string affects the User-Agent HTTP header attached to network resources, and also the value of navigator.userAgent. JavaScript @henrylim96
27. Server Timing • Visualize backend performance with Server Timing. • A better way to visualize TTFB (Time to first byte) • Learn more: bit.ly/server-timing JavaScript @henrylim96
28. Sensors • Override sensors: - Geolocation - Timezone - Locale - Orientation - Touch JavaScript @henrylim96
29. Emulated Devices • Use Device Mode to approximate how your page looks and performs on a mobile device. • Device Mode is the name for the loose collection of features in Chrome DevTools that help you simulate mobile devices. • IE9 User Agent: Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.0; Trident/5.0; Trident/5.0) JavaScript @henrylim96
30. JavaScript Simulate Dual Screen Mode • Use Dual Screen Mode to simulate foldable devices like Galaxy Fold or Surface Duo. @henrylim96
31. Performance Panel & JavaScript Benchmark developers.google.com/web/tools/ chrome-devtools/evaluate-performance @henrylim96 Performance
32. Coverage • The Coverage tab in Chrome DevTools can help you find unused JavaScript and CSS code. • Removing unused code can speed up your page load and save your mobile users cellular data. @henrylim96 Performance
33. Rendering & Analyzing Runtime Performance • Show website rendering informations • Plots website FPS and GPU memory • Analyze page painting • Emulate CSS media / Dark Theme / Reduce Motion • [NEW!] Emulate vision deficiencies @henrylim96 Performance
34. Lighthouse • /ˈlʌɪthaʊs/ • A tower or other structure containing a beacon light to warn or guide ships at sea. • It’s also an automated tool for improving the quality of web pages. • You can run it against any web page, public or requiring authentication. It has audits for performance, accessibility, progressive web apps, SEO and more. • Use it in: DevTools, Chrome Extension, Firefox Add-ons, CLI, Node Module • Lighthouse 6.0.0 is now available in the latest version of Chrome Canary. @henrylim96 Performance
35. CSS Grid Tooling • Available now in Chrome Canary 85.0.4176.0 • Enable it from the Experiments Settings: Enable new CSS Grid debugging features @henrylim96
36. Useful Resources Slide Deck bit.ly/devtools-gdgsl Chrome DevTools Documentation devtools.chrome.com What’s New in Chrome DevTools bit.ly/37oDzwq Chrome Developers Twitter twitter.com/ChromiumDev Chrome DevTools Twitter twitter.com/ChromeDevTools Report Bug crbug.com Contribute to Chrome DevTools github.com/ChromeDevTools/devtools-frontend Contribute to Chrome DevTools Protocol bit.ly/2QJOCds @henrylim96
37. Thank You! Follow me on Twitter: @henrylim96 Thanks @kaycebasques, @argyleink, @mathias and @nimODota.