Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

@henrylim96

Slide 4

Slide 4 text

@henrylim96

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

@henrylim96

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

CSS Autocomplete Style @henrylim96

Slide 18

Slide 18 text

Contrast (Line) Ratio Style @henrylim96

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

CSS Overview Style @henrylim96

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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