Fun & powerful: Intro to Chrome DevTools #DevToolsTips // TRAIN BRAIN

Fun & powerful: Intro to Chrome DevTools #DevToolsTips

In this video, Jecelyn will walk you through the basics of getting started and tips for Chrome DevTools.
Chapters:
0:00 - Introduction
0:23 - Open Chrome DevTools
0:38 - 6 things to know as a beginner
0:47 - Inspect node - View the DOM elements
0:56 - Elements panel - Edit CSS
1:26 - Device mode - Simulate mobile views
1:38 - Console panel - View logs, errors and warnings
2:14 - Sources panel - Set breakpoints and debug program flow
2:58 - Console panel - Experiment with JavaScript
3:27 - Network panel - Filter network logs
4:17 - Network panel - Throttling network speed
Tips:
2:44 - Tip: Set up workspace to sync edits
3:13 - Tip: Use console shortcuts for quicker commands
3:50 - Tip: Select multiple network request types
4:39 - Tip: Customize DevTools based on your preference
Questions? Tweet to us:
Jecelyn Yeen → https://goo.gle/jecfish
Chrome DevTools → https://goo.gle/chromedevtools
Resources:
Getting started → https://goo.gle/devtools-overview
Open DevTools → https://goo.gle/devtools-open
The 6 features for beginner:
Inspect node → https://goo.gle/devtools-dom
Device mode → https://goo.gle/devtools-device-mode
Elements panel → https://goo.gle/devtools-css-issues
Console panel: https://goo.gle/devtools-console-api
Sources panel → https://goo.gle/devtools-breakpoints
Network panel → https://goo.gle/devtools-network
The extra productivity tips:
Customize DevTools → https://goo.gle/devtools-customize
Setup workspace → https://goo.gle/devtools-workspace
Console shortcuts → https://goo.gle/devtools-console-utils
Watch more DevTools Tips → https://goo.gle/DevToolsTips
Subscribe to Chrome for Developers → https://goo.gle/ChromeDevs
#ChromeForDevelopers #Chrome
Speaker: Jecelyn Yeen |
Products Mentioned: Chrome |

Chrome for Developers

Making the web more awesome....

ScrollSpy animations with just CSS thanks to Scroll-Driven Animations

Recreate Cover Flow using only CSS thanks to Scroll-Driven Animations

Outro | Unleash the power of Scroll-Driven Animations (10/10)

Scroll Velocity Detection | Unleash the power of Scroll-Driven Animations (9/10)

Animate 3D models and more on scroll | Unleash the power of Scroll-Driven Animations (8/10)

Animate elements in different directions | Unleash the power of Scroll-Driven Animations (7/10)

Add Scroll Shadows to a Scroll Container | Unleash the power of Scroll-Driven Animations (6/10)

Core Concepts: Timeline Lookup and Named TLs | Unleash the power of Scroll-Driven Animations (5/10)

Core Concepts: Timeline Ranges Demystified | Unleash the power of Scroll-Driven Animations (4/10)

Core Concepts: view() and ViewTimeline | Unleash the power of Scroll-Driven Animations (3/10)

Core Concepts: scroll() and ScrollTimeline | Unleash the power of Scroll-Driven Animations (2/10)

Introduction | Unleash the power of Scroll-Driven Animations (1/10)

Websocket Stream API

Optimizing INP: A deep dive

From asm.js to Wasm with Emscripten creator Alon Zakai

Override and mock network responses #DevToolsTips

The Looper Mini Web Machine

setHTMLUnsafe and parseHTMLunsafe

Learn Scroll-Driven Animations with this free video course

The Looper Mini Web Machine

New in Chrome 124: setHTMLUnsafe, streams in WebSockets, and more

Deep dive into the Privacy Sandbox APIs for Publishers

How should publishers prepare for the Privacy Sandbox?

Service Worker Routing API

How to find an INP issue with Chrome DevTools

What is Interaction to Next Paint (INP)?

4 ways to capture screenshots in Chrome DevTools #DevTools Tips

light-dark function

Getting started in Chrome DevTools

What’s new in DevTools: Chrome 121-123

New in Chrome 123: light-dark function, Service Worker Routing API, and more!

The Privacy Sandbox & third-party cookie deprecation

Async Clipboard API #shorts

Storage Buckets API #shorts

Multi-origin PWAs & the Scope Extensions API

Fun & powerful: Intro to Chrome DevTools #DevToolsTips

New in Chrome 122: Storage Buckets API, DevTools Performance panel updates, and more!

Speculation Rules API updates #shorts

CapCut brings powerful video editing to the browser

scrollbar-color, scrollbar-width, font-palette #shorts

Debugging speculative navigations for faster page loads #DevToolsTips

color-mix() #shorts

New in Chrome 121: CSS updates, improvements to the Speculation Rules API, and more!

Has() selector #shorts

Container queries #shorts

text-wrap: balance #shorts

Building multiple Progressive Web Apps on the same domain

Progressive Web Apps in multi origin sites

What are Private State Tokens?

Permission policy violation reports #shorts

What is the Protected Audience API?

Privacy Sandbox: Preparing for the end of 3rd-party cookies

What is the Attribution Reporting API?

What are Related Website Sets?

Relative color syntax #CSSWrapped2023

Debugging Fetch Priority #DevToolsTips

What is Storage Access API?

Thinking on ways to solve COMPARE components

CloseWatcher API #shorts

View Transitions #CSSWrapped

What is CHIPS?

Container queries #CSSWrapped

Test your site without third-party cookies

gradient.style #CSSpodcast

Unity brings WebGPU to its web player

text-wrap: balance & pretty #CSSWrapped2023

Audit your site for third-party cookies

What is the Topics API?

scroll-driven animations #CSSWrapped2023

Introducing CSS Wrapped

What are the reasons that prevent bfcache from being used?

Desaturate a color #GUIsnippets

Season 4 wrap! #CSSpodcast

New in Chrome 120: CloseWatcher API, name attribute for details, privacy policy reports, and more!

Why isn't a percentage value working?

What’s new in DevTools: Chrome 119-120

Debugging bfcache, make your page load instantly - DevTools Tips

HTML vs DOM #shorts

Why isn't percentage working here?

Cookies expiration limit updated - New in Chrome 119