Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Building a Better Website with Chrome DevTools

Building a Better Website with Chrome DevTools

Henry Lim

July 18, 2020
Tweet

More Decks by Henry Lim

Other Decks in Technology

Transcript

  1. Half screen photo slide if text is necessary Henry Lim

    ‍ ✈ @henrylim96 Google Developer Expert, Web Technologies ❤ PWA, DevTools, Fugu, Firebase, T-Rex
  2. Remote Debugging chrome://inspect/#devices • Remotely debug web content on an

    Android device. • Now it works with Facebook In-app browser! General @henrylim96
  3. 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
  4. 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
  5. 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
  6. Modern CSS Color Syntax • Color picker now produces modern

    CSS color syntax, as opposed to the legacy comma-based syntax. Style @henrylim96
  7. 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
  8. 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
  9. 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
  10. 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
  11. VisBug • Web design debug tool (Chrome Extension) • DevTools

    for designer! • Try it out: visbug.web.app Style @henrylim96
  12. Local Overrides • Use Local Overrides to override files loaded

    from network with your own ones for testing execution flows. JavaScript @henrylim96
  13. 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
  14. 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
  15. 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
  16. Sensors • Override sensors: - Geolocation - Timezone - Locale

    - Orientation - Touch JavaScript @henrylim96
  17. 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
  18. JavaScript Simulate Dual Screen Mode • Use Dual Screen Mode

    to simulate foldable devices like Galaxy Fold or Surface Duo. @henrylim96
  19. 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
  20. 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
  21. 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
  22. 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
  23. 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