Henry Lim GDE Web Technologies @henrylim96 Building a Better Website with Chrome DevTools

Half screen photo slide if text is necessary Henry Lim ‍ ✈ @henrylim96 Google Developer Expert, Web Technologies ❤ PWA, DevTools, Fugu, Firebase, T-Rex

@henrylim96

@henrylim96

@henrylim96 Photo by Saad Salim on Unsplash ~300k LOC JS ~18k LOC CSS

@henrylim96 Photo by Mario Caruso on Unsplash Browser DevTools CDP Chrome DevTools Protocol

@henrylim96

Enable DevTools Experiments Flags chrome://flags/#enable-devtools-experiments General @henrylim96

Remote Debugging chrome://inspect/#devices ● Remotely debug web content on an Android device. ● Now it works with Facebook In-app browser! General @henrylim96

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

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

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

Modern CSS Color Syntax ● Color picker now produces modern CSS color syntax, as opposed to the legacy comma-based syntax. Style @henrylim96

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

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

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

CSS Autocomplete Style @henrylim96

Contrast (Line) Ratio Style @henrylim96

(Keyboard shortcut) Hide the currently-selected element ● Select any element, then click on “H”. Style @henrylim96

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

CSS Overview Style @henrylim96

VisBug ● Web design debug tool (Chrome Extension) ● DevTools for designer! ● Try it out: visbug.web.app Style @henrylim96

Logging ● console.log() ● console.table() ● console.trace() ● console.error() ● And more ... JavaScript @henrylim96

Local Overrides ● Use Local Overrides to override files loaded from network with your own ones for testing execution flows. JavaScript @henrylim96

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

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

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

Sensors ● Override sensors: - Geolocation - Timezone - Locale - Orientation - Touch JavaScript @henrylim96

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

JavaScript Simulate Dual Screen Mode ● Use Dual Screen Mode to simulate foldable devices like Galaxy Fold or Surface Duo. @henrylim96

Performance Panel & JavaScript Benchmark developers.google.com/web/tools/ chrome-devtools/evaluate-performance @henrylim96 Performance

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

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

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

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

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

Thank You! Follow me on Twitter: @henrylim96 Thanks @kaycebasques, @argyleink, @mathias and @nimODota.