Inspect Network Activity - Chrome DevTools 101

Channel:
Chrome for Developers
Subscribers:
791,000
Published on ● Video Link: https://www.youtube.com/watch?v=e1gAyQuIFQo


Duration: 9:00
298,876 views
3,153

Learn how to use the most popular Chrome DevTools features related to inspecting network activity, including:

1:05 - View a chronological log of all network activity
3:26 - Show or hide columns in the Network Log
3:46 - Throttle network activity to simulate mobile experiences
4:46 - Inspect individual network resources in depth
5:23 - Search HTTP headers and response bodies
6:05 - Filter out resources you don't care about
7:51 - Block network requests

Links mentioned in the video:

Optimize Site Speed tutorial: http://bit.ly/2LemRYa
Demo link: http://bit.ly/2OOSya5
Network panel filtering keywords: http://bit.ly/2YR85un
Network panel reference: http://bit.ly/2IbIB5b

Subscribe to the Chrome Developers channel for more episodes → http://bit.ly/ChromeDevs1



Other Videos By Chrome for Developers


2019-04-22Using the Fetch API - Progressive Web App Training
2019-04-22Advanced promises - Progressive Web App Training
2019-04-22Intro to Promises (incl async/await) - Progressive Web App Training
2019-04-22Tools for building Progressive Web Apps: Workbox - Progressive Web App Training
2019-04-19Chrome 74 - What’s New in DevTools
2019-04-16#AskChrome Live: Implementing Performance Budgets (April 16, 2019)
2019-04-16Changing web standards - HTTP 203
2019-04-10Totally Tooling Tips: Ta ta for now
2019-04-09Why Build Progressive Web Apps: Start fast, stay fast
2019-04-08Introduction to Service Worker - Progressive Web App Training
2019-04-04Inspect Network Activity - Chrome DevTools 101
2019-04-03CSS Standardization - The State of the Web
2019-04-02Solving Clickjacking - HTTP 203
2019-04-01But… why HTTP 203?
2019-03-25Why Build Progressive Web Apps: Track offline, or it didn't happen
2019-03-25Your development cycle - Progressive Web App Training
2019-03-19Loop Tiling - HTTP 203
2019-03-13Desktop Progressive Web Apps: An Introduction
2019-03-12New in Chrome 73: Desktop PWAs, Signed HTTP Exchanges and Constructable Style Sheets
2019-03-11When should you use a PWA? - Progressive Web App Training
2019-03-11Why Build Progressive Web Apps: PWAs for iOS


Tags:
Chrome
Developers
Google
Web
google chrome
chrome devtools
google chrome devtools
google chrome developer tools
developer
chrome developer
web development
chrome developer tools
chrome developers
chrome extension developers
Chrome DevTools
Devtools
web developers
inspect networkd activity
chrome dev tools 101
Chrome Web developers
GDS: Yes;