Lecture Notes: Monitoring Network Traffic with Chrome Dev Tools

Introduction

• Focus on using Chrome Dev Tools to monitor network traffic.
• Understanding requests made by your webpage, including JavaScript and DHTML requests.

Web Page Setup

• Example includes:
  • HTML, CSS, and JavaScript.
  • Fetch requests.
  • External CSS for fonts from Google APIs.

JavaScript Fetch Requests

• Several fetch calls for JSON:
  • 1 GET request.
  • 1 POST request.
  • 1 PATCH request.
• Image requested from Pixum website.

Accessing Chrome Dev Tools

• Use keyboard shortcuts:
  • Command-Option-I (Mac) or Ctrl-Shift-I (Windows).
• Navigate to the Network tab.
• Utilize filtering options to manage visibility of requests.

Types of Requests

• HTML: The starting point for browser requests.
• Fetch/XmlHttpRequests: From JavaScript, not browser auto requests.
• JavaScript Files: Including those from Chrome extensions.
• CSS Files: External (e.g., Google Fonts) and internal.
• Images: Data URLs and standard URLs.
• Fonts: Requested via CSS files.
• Other Types:
  • Media, WebSockets, WebAssemblies, JSON, etc.
  • Preflight (CORS requests).

Analyzing Headers

• Request Headers: Set by browser/JavaScript.
• Response Headers: Returned from server.
• Can include status codes, access control headers.

Performance Monitoring

• Request Initiator Chain: Tracks how requests lead to other requests.
• Waterfall View: Visual timeline of request sequence and delays.
• Throttling: Simulate slower networks to test load times.
  • Examples include simulating 3G connections.
• Disabling Cache: To mimic first-time page load conditions.

Additional Features

• Grouping Requests: By origin or sequential loading.
• Large Rows Option: Provides detailed request information.
• Preserve Log: Maintains logs across page reloads.
• Capturing Screenshots: To visualize load sequence.

Practical Tips

• Regularly use throttling, disabling cache, and preserving logs.
• Filter requests to diagnose issues with specific resources like CSS or fonts.

Conclusion

• Chrome Dev Tools Network tab is essential for performance debugging.
• Use features like headers analysis, waterfall, and filtering to monitor and improve webpage requests.
• Open for questions and further discussions.