update git

docs/browser/05-dev-tools.md

@@ -2,4 +2,101 @@
 sidebar_position: 5
 ---
 
-# Browser Dev-tools
+# Dev-tools
+Источник: DeepSeek
+
+DevTools (Инструменты разработчика) — это встроенный в браузер набор инструментов, предназначенный для отладки, анализа и оптимизации веб-страниц. Они предоставляют разработчикам возможность исследовать HTML, CSS, JavaScript, сетевые запросы, производительность и многое другое.
+
+## Зачем нужны DevTools?
+1. **Отладка кода:**
+   - Поиск и исправление ошибок в HTML, CSS и JavaScript.
+   - Возможность пошагового выполнения кода и анализа переменных.
+2. **Анализ и изменение DOM и CSS:**
+   - Просмотр и редактирование структуры HTML и стилей в реальном времени.
+   - Тестирование изменений без необходимости обновления страницы.
+3. **Оптимизация производительности:**
+   - Анализ скорости загрузки страницы.
+   - Поиск узких мест в производительности (например, медленные скрипты или ресурсы).
+4. **Работа с сетью:**
+   - Мониторинг сетевых запросов (HTTP, HTTPS, WebSocket).
+   - Анализ времени загрузки ресурсов и их размера.
+5. **Тестирование адаптивности:**
+   - Проверка отображения страницы на разных устройствах и разрешениях экрана.
+6. **Работа с JavaScript:**
+   - Отладка скриптов, просмотр стека вызовов и значений переменных.
+   - Профилирование кода для поиска узких мест.
+7. **Анализ безопасности:**
+   - Проверка сертификатов, политик безопасности (CORS, CSP) и других аспектов.
+8. **Работа с хранилищами:**
+   - Просмотр и редактирование данных в _LocalStorage_, _SessionStorage_, _Cookies_, _IndexedDB_.
+
+
+## Основные инструменты DevTools:
+1. **Инспектор элементов (Elements):**
+   - Позволяет просматривать и редактировать HTML и CSS.
+   - Можно изменять стили, добавлять или удалять элементы, видеть применяемые стили и их источники.
+2. **Консоль (Console):**
+   - Показывает ошибки, предупреждения и логи JavaScript.
+   - Позволяет выполнять JavaScript-код прямо в браузере.
+3. **Отладчик (Sources):**
+   - Позволяет отлаживать JavaScript-код: ставить точки останова, пошагово выполнять код, анализировать переменные.
+4. **Сеть (Network):**
+   - Показывает все сетевые запросы (HTML, CSS, JS, изображения, API и т.д.).
+   - Включает информацию о времени загрузки, размере ресурсов, статусе запросов.
+5. **Производительность (Performance):**
+   - Анализирует производительность страницы: время загрузки, выполнение скриптов, отрисовка.
+   - Помогает находить узкие места, которые замедляют работу страницы.
+6. **Память (Memory):**
+   - Позволяет анализировать использование памяти JavaScript.
+   - Помогает находить утечки памяти.
+7. **Приложение (Application):**
+   - Позволяет работать с хранилищами данных: LocalStorage, SessionStorage, Cookies, IndexedDB.
+   - Также показывает кеш и сервис-воркеры.
+8. **Безопасность (Security):**
+   - Показывает информацию о сертификатах, политиках безопасности (CORS, CSP) и других аспектах.
+9. **Адаптивный дизайн (Responsive Design Mode):**
+   - Позволяет тестировать отображение страницы на разных устройствах и разрешениях экрана.
+10. **Lighthouse:**
+    - Инструмент для аудита веб-страниц. Проверяет производительность, доступность, SEO и другие параметры.
+
+## Как открыть DevTools?
+- **Горячие клавиши:**
+  - Windows/Linux: `Ctrl + Shift + I` или `F12`.
+  - Mac: `Cmd + Option + I`.
+- **Контекстное меню:**
+  - Щелкните правой кнопкой мыши на странице и выберите "Исследовать элемент" (Inspect).
+
+## Пример использования DevTools:
+1. **Изменение стилей:**
+   - Откройте вкладку **Elements**.
+   - Выберите элемент на странице и измените его стили в правой панели.
+2. **Отладка JavaScript:**
+   - Откройте вкладку **Sources**.
+   - Найдите нужный JavaScript-файл, поставьте точку останова и запустите отладку.
+3. **Анализ сетевых запросов:**
+   - Откройте вкладку **Network**.
+   - Перезагрузите страницу и посмотрите, какие ресурсы загружаются и сколько времени это занимает.
+4. **Тестирование адаптивности:**
+   - Включите режим адаптивного дизайна (иконка с телефоном/планшетом).
+   - Выберите устройство или введите собственное разрешение.
+5. **Аудит страницы:**
+   - Откройте вкладку **Lighthouse**.
+   - Запустите аудит и получите рекомендации по улучшению производительности, SEO и доступности.
+
+## Преимущества DevTools:
+1. **Быстрое тестирование и отладка:**
+   - Позволяет вносить изменения и сразу видеть результат.
+2. **Глубокий анализ:**
+   - Предоставляет детальную информацию о работе страницы.
+3. **Интеграция с браузером:**
+   - Не требует установки дополнительных программ.
+4. **Поддержка современных стандартов:**
+   - Постоянно обновляется и поддерживает новые технологии.
+
+## Недостатки DevTools:
+1. **Сложность для новичков:**
+   - Может быть сложно разобраться во всех функциях.
+2. **Ограниченная поддержка в старых браузерах:**
+   - Некоторые функции могут отсутствовать в устаревших версиях браузеров.
+
+**DevTools** — это незаменимый инструмент для веб-разработчиков, который помогает создавать, отлаживать и оптимизировать веб-страницы.