Гид по технологиям

Как использовать Inspect Element на Mac: быстро и безопасно

• 6 min read • Технологии • Обновлено 07 Apr 2026
Как использовать Inspect Element на Mac
Как использовать Inspect Element на Mac

Человек использует ноутбук за столом, на экране виден код страницы

Введение

Inspect Element (инструмент разработчика, инспектор) — встроенная функция браузеров, которая показывает структуру страницы: DOM (HTML), каскадные таблицы стилей (CSS) и выполняемый JavaScript. Это интерактивный инструмент: вы можете просматривать, тестировать и временно изменять содержимое и стили страницы прямо в вашем браузере.

Определение в 1 строке: Inspect Element — инструмент для просмотра и временной правки кода страницы в браузере.

Зачем использовать Inspect Element

  • Быстрая отладка верстки и стилей.
  • Проверка адаптивного отображения и медиазапросов.
  • Временное изменение текста/шрифтов для удобного чтения.
  • Тестирование изменений перед их переносом в репозиторий.
  • Обучение: наглядный разбор того, как собраны страницы.

Важно: изменения видны только у вас в текущем браузере и не меняют сайт на сервере.

Как открыть Inspect Element на любом браузере macOS

Инструмент разработчика открыт в Safari для Mac

Общий порядок действий для большинства браузеров (Chrome, Firefox, Edge и др.):

  1. Откройте страницу, которую хотите исследовать.
  2. Кликните правой кнопкой мыши (Control‑клик) по элементу и выберите «Inspect» или «Inspect Element». Альтернативно используйте сочетание клавиш ⌘+Shift+C для выбора элемента или ⌘+Option+I для открытия инспектора.
    Вариант выбора «Inspect» в Google Chrome для Mac
  3. Откроется панель инструментов разработчика: вкладка Elements/Inspector показывает DOM и стили; Console — сообщения и ошибки JavaScript; Network — сетевые запросы и ресурсы.
  4. Закрыть панель можно кликом по значку «X» в окне инспектора или теми же сочетаниями клавиш.
    Кнопка закрытия инспектора видна в Firefox для Mac

Как включить Inspect Element в Safari

Safari по умолчанию скрывает меню «Разработка»; чтобы включить инспектор:

  1. Откройте Safari → Настройки (или ⌘+,).
  2. Перейдите на вкладку «Дополнительно».
  3. Отметьте «Показывать меню «Разработка» в строке меню».

Вкладка Дополнительно в настройках Safari с активированным меню «Разработка»

После этого в верхней строке меню появится «Разработка»; инспектор станет доступен и через контекстное меню.

Что видно и что можно править в инспекторе

  • HTML/DOM: структура, атрибуты, текст. Можно редактировать узлы, добавлять или удалять элементы.
  • CSS: правила стилей, их приоритеты и источники (файлы, inline, теги