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