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 → Chrome DevTools → Resources: Getting started → Open DevTools → The 6 features for beginner: Inspect node → Device mode → Elements panel → Console panel: Sources panel → Network panel → The extra productivity tips: Customize DevTools → Setup workspace → Console shortcuts → Watch more DevTools Tips → Subscribe to Chrome for Developers → #ChromeForDevelopers #Chrome Speaker: Jecelyn Yeen | Products Mentioned: Chrome |