> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getlimelight.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Network requests

### Visual Request Timeline

Get a complete view of every network request your app makes:

* **Interactive timeline** with zoom and pan controls
* **Real-time updates** as requests complete
* **Advanced filtering** by method, status, URL, or GraphQL operations
* **Request timing visualization** to spot slow endpoints instantly

<Frame>
  <img className="block dark:hidden" src="https://mintcdn.com/limelight/zo12IJdbCI5UlqWl/images/ll-network-table-page-light.png?fit=max&auto=format&n=zo12IJdbCI5UlqWl&q=85&s=7999d3cfc7ff6cb85267076275f45a5c" alt="Network request interface" width="2560" height="1408" data-path="images/ll-network-table-page-light.png" />

  <img className="hidden dark:block" src="https://mintcdn.com/limelight/zo12IJdbCI5UlqWl/images/ll-network-table-page.png?fit=max&auto=format&n=zo12IJdbCI5UlqWl&q=85&s=ac4d8852eeaf9a580b5315dc1c444665" alt="Network request interface" width="2559" height="1409" data-path="images/ll-network-table-page.png" />
</Frame>

### Deep Request Analysis

Click any request to see:

* Full request and response headers
* Request/response body with **interactive JSON viewer**
* Method, URL, status code, and timing metrics
* Request/response size tracking
* **Syntax highlighting** for different data types

### Interactive JSON Viewer

Navigate complex API responses effortlessly:

* **Expand/collapse** nested objects and arrays
* **Syntax highlighting** (strings, numbers, booleans, null)
* **Clickable URLs** automatically detected and linked
* **Copy functionality** at any level
* **Deep nesting support** with visual indentation
* **Light/dark mode** aware

<Frame>
  <img className="block dark:hidden" src="https://mintcdn.com/limelight/zo12IJdbCI5UlqWl/images/ll-network-timeline-page-light.png?fit=max&auto=format&n=zo12IJdbCI5UlqWl&q=85&s=e6604e7d4f4289dbefdeec75fa7cd0f1" alt="Network request interface" width="2559" height="1409" data-path="images/ll-network-timeline-page-light.png" />

  <img className="hidden dark:block" src="https://mintcdn.com/limelight/zo12IJdbCI5UlqWl/images/ll-network-timeline-page.png?fit=max&auto=format&n=zo12IJdbCI5UlqWl&q=85&s=f42b58590fc03b127f904725e4e37fda" alt="Network request interface" width="2560" height="1408" data-path="images/ll-network-timeline-page.png" />
</Frame>

***

## GraphQL-First Debugging

Limelight is the only React Native debugger built specifically for GraphQL. Here's what makes it special:

### Automatic GraphQL Detection

No configuration needed. Limelight automatically:

* **Detects GraphQL requests** from any client (Apollo, urql, Relay, plain fetch)
* **Extracts and parses** queries, mutations, and subscriptions
* **Works with any GraphQL server** and client library

### Query Complexity Analysis

Understand the performance impact of every GraphQL operation:

<Card title="Complexity Scoring" icon="gauge">
  Real-time analysis based on query depth, field count, and fragment usage
</Card>

**Severity Levels:**

| Score   | Level     | Indicator | What It Means                              |
| ------- | --------- | --------- | ------------------------------------------ |
| \< 50   | Low       | 🟢 Green  | Simple query, fast execution expected      |
| 50-150  | Medium    | 🟡 Yellow | Moderate complexity, watch for performance |
| 150-300 | High      | 🟠 Orange | Complex query, may impact performance      |
| 300+    | Very High | 🔴 Red    | Very complex query, likely slow            |

**Actionable Recommendations:**

Limelight automatically warns you about:

* **Deep nesting** (depth > 4 levels)
* **Large field counts** (> 100 fields selected)
* **Fragment overuse** (> 10 fragments in one query)

### Beautiful GraphQL Formatting

Every GraphQL request is formatted for easy reading:

**Operation Display:**

* Operation name prominently displayed
* Separated sections for query, variables, and response
* Individual **copy buttons** for each section

**Syntax Highlighting:**

* Full GraphQL syntax highlighting with color-coded:
  * Keywords (`query`, `mutation`, `fragment`)
  * Type names and field names
  * Variables and directives
  * String values, numbers, and booleans
* Preserves formatting with proper indentation
* Theme-aware (light/dark mode)

**Variables Viewer:**

* Interactive JSON display for variables
* Expand/collapse complex variable structures
* Separate copy functionality

### GraphQL Error Handling

When GraphQL errors occur, Limelight makes them crystal clear:

* **Extracts GraphQL errors** from response body
* **Beautiful error cards** showing:
  * Error message prominence
  * Field path where error occurred
  * Line and column numbers
  * Error codes and extensions
* **Multiple error support** with individual cards
* **Expandable details** for complex errors

***