Где можно увидеть получаемые ресурсы в браузере?

Question

claude-haiku-4.5 · Accepted Answer

## Где можно увидеть получаемые ресурсы в браузере

### Основной способ: DevTools Network вкладка

Самый стандартный способ — открыть **DevTools** (F12 на Windows/Linux, Cmd+Option+I на macOS) и перейти на вкладку **Network**. Там видны все HTTP запросы.

```
Shortcuts:
- F12 (Windows/Linux/Chrome) открыть DevTools
- Cmd+Option+I (macOS Chrome) открыть DevTools
- F12 (Firefox) открыть DevTools
- Cmd+Option+U (Safari) View Source, но нужно включить Developer Menu
```

### Network вкладка — основной инструмент

В Network вкладке видны:

**Таблица запросов с колонками:**
- **Name** — имя файла/URL
- **Status** — HTTP статус (200, 404, 500 и т.д.)
- **Type** — тип ресурса (document, stylesheet, image, script, xhr, fetch и т.д.)
- **Initiator** — что инициировало запрос
- **Size** — размер ответа (размер после сжатия / оригинальный размер)
- **Time** — время передачи

```javascript
// Пример что видишь в Network:
// URL: https://api.example.com/users
// Status: 200 OK
// Type: fetch (или xhr для старых запросов)
// Size: 2.5 KB / 8.3 KB (сжато / оригинальный)
// Time: 145 ms
```

### Как использовать Network вкладку

**Шаг 1: Открыть DevTools**
```
F12 или Ctrl+Shift+I (Windows)
Cmd+Option+I (macOS)
Ctrl+Shift+I (Linux)
```

**Шаг 2: Перейти на Network вкладку**
- Видишь несколько вкладок вверху: Elements, Console, Sources, Network и т.д.
- Нажимаешь **Network**

**Шаг 3: Перезагрузить страницу**
- Нажимаешь F5 или Cmd+R
- Network таблица заполняется запросами

**Шаг 4: Анализировать запросы**
- Смотришь список всех файлов
- Нажимаешь на любой, чтобы увидеть детали
- Видишь Headers, Preview, Response и т.д.

### Фильтрация ресурсов

В Network вкладке есть фильтры для поиска нужных ресурсов:

```
Фильтры (слева от таблицы):
- All (все запросы)
- Fetch/XHR (AJAX запросы)
- JS (JavaScript файлы)
- CSS (стили)
- Img (изображения)
- Media (видео/аудио)
- Font (шрифты)
- Document (HTML страницы)
- Manifest (Web App Manifests)
- WS (WebSocket)
```

**Поиск:** Нажми Ctrl+F (Cmd+F) чтобы найти конкретный ресурс по названию.

### Детальная информация о каждом запросе

Нажимаешь на запрос и видишь вкладки:

**Headers:**
```
Request Headers:
- GET /api/users HTTP/1.1
- Host: api.example.com
- Authorization: Bearer token123
- Content-Type: application/json

Response Headers:
- HTTP/1.1 200 OK
- Content-Type: application/json
- Content-Length: 2500
- Cache-Control: max-age=3600
```

**Response:**
```json
{
  "id": 1,
  "name": "Alice",
  "email": "alice@example.com"
}
```

**Preview:**
- Визуальный предпросмотр ответа (красиво отформатировано)

**Timing:**
- Queueing: время в очереди
- DNS: время DNS резолвинга
- Initial Connection: TCP handshake
- SSL/TLS: шифрование (для HTTPS)
- Request sent: время отправки запроса
- Waiting: время ожидания ответа от сервера
- Content Download: время скачивания ответа

### Программный способ: Performance API

```javascript
// Получить все запрошенные ресурсы программно
const resources = performance.getEntriesByType('resource');

resources.forEach(resource => {
  console.log('Ресурс:', resource.name);
  console.log('Размер:', resource.transferSize, 'bytes');
  console.log('Время:', resource.duration, 'ms');
  console.log('Тип:', resource.initiatorType);
  console.log('---');
});

// Пример вывода:
// Ресурс: https://api.example.com/users
// Размер: 2500 bytes
// Время: 145 ms
// Тип: fetch
```

### Console способ: получить все запросы

```javascript
// Получить все resource запросы
const entries = performance.getEntriesByType('resource');
console.table(entries.map(e => ({
  name: e.name.split('/').pop(),
  type: e.initiatorType,
  size: (e.transferSize / 1024).toFixed(2) + ' KB',
  duration: e.duration.toFixed(0) + ' ms'
})));
```

### Application вкладка (Storage)

В DevTools есть еще вкладка **Application** где видны:

**Local Storage:**
- Данные сохраненные `localStorage.setItem('key', 'value')`

```javascript
localStorage.setItem('userToken', 'abc123');
// Видно в DevTools -> Application -> Local Storage -> https://example.com
```

**Session Storage:**
- Временные данные `sessionStorage.setItem()`

**Cookies:**
- Все cookies для домена

**Service Workers:**
- Регистрация Service Workers

**Cache Storage:**
- Кеш для Service Workers

**Indexed DB:**
- Большие объемы данных

### Sources вкладка

В Sources можно видеть:
- Исходный код скачанных JavaScript файлов
- Установить breakpoints
- Отладить код

```
Слева в Sources видны все загруженные файлы:
- top (главная страница)
- cdn.example.com
- api.example.com
- localhost:3000
```

### Console способ получить все данные

```javascript
// Собрать всю информацию о загруженных ресурсах
function getLoadedResources() {
  const resources = performance.getEntriesByType('resource');
  const summary = {
    total: resources.length,
    totalSize: 0,
    byType: {},
    slowest: []
  };
  
  resources.forEach(r => {
    summary.totalSize += r.transferSize || 0;
    
    const type = r.initiatorType;
    if (!summary.byType[type]) {
      summary.byType[type] = { count: 0, size: 0 };
    }
    summary.byType[type].count++;
    summary.byType[type].size += r.transferSize || 0;
    
    summary.slowest.push({
      name: r.name.split('/').pop(),
      duration: r.duration
    });
  });
  
  summary.slowest.sort((a, b) => b.duration - a.duration);
  summary.slowest = summary.slowest.slice(0, 5);
  
  return summary;
}

console.log(getLoadedResources());

// Пример результата:
// {
//   total: 45,
//   totalSize: 2500000,
//   byType: {
//     script: { count: 12, size: 1500000 },
//     stylesheet: { count: 3, size: 300000 },
//     image: { count: 30, size: 700000 }
//   },
//   slowest: [
//     { name: 'bundle.js', duration: 245 },
//     { name: 'api/users', duration: 145 }
//   ]
// }
```

### Performance вкладка

Developer Tools -> Performance вкладка показывает:
- Waterfall график всех запросов
- Когда загружается каждый ресурс
- Критический путь загрузки
- Узкие места (bottlenecks)

### Lighthouse (встроенный инструмент)

Developer Tools -> Lighthouse:
- Анализирует производительность
- Показывает какие ресурсы замедляют загрузку
- Дает рекомендации по оптимизации

### Команды для копирования всех запросов

**Экспортировать все запросы как HAR файл:**

```
Network вкладка -> Правый клик на таблице -> Save all as HAR with content
```

Это сохранит все запросы в HAR формате (можно открыть в других инструментах).

### WebSocket запросы

В Network можно также видеть WebSocket соединения:

```
Фильтр: WS
Видны все WebSocket соединения
При клике на них видны все отправленные и полученные сообщения
```

### Итоговый чеклист

1. **Network вкладка** — главный инструмент для просмотра всех ресурсов
2. **Фильтры** — используй для поиска конкретных типов (JS, CSS, API и т.д.)
3. **Headers/Response** — смотри детали каждого запроса
4. **Timing** — анализируй почему запрос долгий
5. **Console API** — `performance.getEntriesByType('resource')` для программного доступа
6. **Performance вкладка** — для анализа порядка загрузки ресурсов
7. **Lighthouse** — для автоматического анализа проблем

Где можно увидеть получаемые ресурсы в браузере?

Комментарии (1)

Где можно увидеть получаемые ресурсы в браузере

Основной способ: DevTools Network вкладка

Network вкладка — основной инструмент

Как использовать Network вкладку

Фильтрация ресурсов

Детальная информация о каждом запросе

Программный способ: Performance API

Console способ: получить все запросы

Application вкладка (Storage)

Sources вкладка

Console способ получить все данные

Performance вкладка

Lighthouse (встроенный инструмент)

Команды для копирования всех запросов

WebSocket запросы

Итоговый чеклист