DevTools

Что такое DevTools?

DevTools (Developer Tools) - это набор инструментов разработчика, встроенный в современные веб-браузеры. Он позволяет анализировать структуру веб-страниц, отлаживать JavaScript, просматривать сетевые запросы и многое другое.

Как открыть DevTools

  • В Chrome и Firefox: нажмите F12 или Ctrl+Shift+I (Cmd+Option+I на Mac)
  • В Safari: включите меню разработчика в настройках, затем выберите Разработка > Показать инструменты веб-инспектора

Основные панели DevTools

1. Elements (Элементы)

Здесь вы можете просматривать и редактировать HTML и CSS страницы.

Как использовать:

  1. Откройте DevTools и перейдите на вкладку "Elements".
  2. Наведите курсор на элемент страницы, и он подсветится в панели Elements.
  3. Щелкните на элемент, чтобы увидеть и отредактировать его CSS-стили.

2. Console (Консоль)

Консоль показывает ошибки JavaScript и позволяет выполнять JavaScript-код.

Как использовать:

  1. Перейдите на вкладку "Console".
  2. Введите JavaScript-код и нажмите Enter для его выполнения.
  3. Здесь также отображаются ошибки и предупреждения.

3. Network (Сеть)

Эта панель показывает все сетевые запросы, сделанные страницей.

Как использовать:

  1. Откройте вкладку "Network".
  2. Обновите страницу, чтобы увидеть все загруженные ресурсы.
  3. Щелкните на запрос, чтобы увидеть подробную информацию о нем.

4. Application (Приложение)

Здесь можно просматривать и управлять хранилищами данных браузера.

Как использовать:

  1. Перейдите на вкладку "Application".
  2. В левом меню выберите нужное хранилище (например, Local Storage).
  3. Просматривайте и редактируйте сохраненные данные.

Полезные функции

  • Мобильный вид: Используйте кнопку Toggle Device Toolbar, чтобы увидеть, как страница выглядит на мобильных устройствах.
  • Очистка кэша: Нажмите правой кнопкой мыши на кнопку обновления страницы и выберите "Очистить кэш и выполнить жесткую перезагрузку".
  • Снимки экрана: В Chrome вы можете делать снимки всей страницы с помощью Ctrl+Shift+P, затем введите "screenshot".

Заключение

DevTools - незаменимый инструмент для тестировщиков веб-приложений. Он позволяет анализировать структуру страниц, отслеживать сетевые запросы, находить ошибки JavaScript и многое другое. Регулярная практика работы с DevTools пригодится вам всегда, даже в решении повседневных задач.