Duration: 5:34

14,333 views

328

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