Network Debugging

When your app is timing out or throwing weird CORS errors, this gives you a structured approach to actually figure out what's happening. It walks you through using Chrome DevTools' network tab properly, understanding that waterfall timeline (DNS, SSL handshake, TTFB, all of it), and systematically debugging common issues like failed requests and SSL problems. The reference guides cover browser tools, common network issues, and debugging techniques. Honestly, most developers just stare at the network tab hoping for insight, but this teaches you to read it like a diagnostic tool. Worth having around when production is slow and you need to know if it's your code, the API, or something in between.

skills.sh installs: 531
GitHub stars: 379
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add aj-geddes/useful-ai-prompts --skill network-debugging --agent claude-code

Installs into .claude/skills of the current project.

Files

Overview

Network debugging identifies connectivity issues, latency problems, and data transmission errors that impact application performance.

When to Use

Slow loading times
Failed requests
Intermittent connectivity
CORS errors
SSL/TLS issues
API communication problems

Quick Start

Minimal working example:

Chrome DevTools Network Tab:

Columns:
  - Name: Request file/endpoint
  - Status: HTTP status code
  - Type: Resource type (xhr, fetch, etc)
  - Initiator: What triggered request
  - Size: Resource size / transferred size
  - Time: Total time to complete
  - Waterfall: Timeline visualization

Timeline Breakdown:
  - Queueing: Waiting in queue
  - DNS: Domain name resolution
  - Initial connection: TCP handshake
  - SSL: SSL/TLS negotiation
  - Request sent: Time to send request
  - Waiting (TTFB): Time to first byte
  - Content Download: Receiving response

---
Network Conditions:

SKILL.md on GitHub