Откройте инструменты разработчика Chrome.

Есть много способов открыть Chrome DevTools. Выберите свой любимый способ из этого подробного справочника.

Вы можете получить доступ к DevTools с помощью пользовательского интерфейса Chrome или клавиатуры:

Кроме того, узнайте, как автоматически открывать DevTools для каждой новой вкладки .

Откройте DevTools из меню Chrome.

Если вы предпочитаете пользовательский интерфейс, вы можете получить доступ к DevTools из раскрывающихся меню в Chrome.

Откройте панель «Элементы», чтобы проверить DOM или CSS.

Чтобы проверить, щелкните правой кнопкой мыши элемент на странице и выберите «Проверить» .

Параметр «Проверить» в раскрывающемся меню Chrome.

DevTools открывает панель «Элементы» и выбирает элемент в дереве DOM. На панели «Стили» вы можете увидеть правила CSS, примененные к выбранному элементу.

Элемент, выбранный на панели «Элементы».

Откройте последнюю панель, которую вы использовали, из главного меню Chrome.

Чтобы открыть последнюю панель DevTools, нажмите кнопку Трехточечное меню. кнопку справа от адресной строки и выберите «Дополнительные инструменты» > «Инструменты разработчика» .

Параметр «Инструменты разработчика» выбран в трехточечном меню.

Альтернативно вы можете открыть последнюю панель с помощью ярлыка. Дополнительную информацию смотрите в следующем разделе.

Открывайте панели с помощью ярлыков: «Элементы», «Консоль» или последнюю панель.

Если вы предпочитаете клавиатуру, нажмите сочетание клавиш в Chrome в зависимости от вашей операционной системы:

ОС Элементы Консоль Ваша последняя панель
Windows или Linux Ctrl + Shift + С Ctrl + Shift + J F12
Ctrl + Shift + Я
Мак Cmd + Опция + С Cmd + Опция + J Фн + Ф12
Cmd + Опция + Я

Вот простой способ запомнить сочетания клавиш:

  • C означает CSS.
  • J для JavaScript.
  • Я обозначаю ваш выбор.

Ярлык C открывает панель «Элементы» в Осмотрите. режим инспектора. В этом режиме отображаются полезные всплывающие подсказки при наведении курсора на элементы на странице. Вы также можете щелкнуть любой элемент, чтобы просмотреть его CSS на панели «Элементы» > «Стили» .

Панель «Элементы» в режиме инспектора с подсказкой.

Полный список сочетаний клавиш DevTools см. в разделе «Сочетания клавиш» .

Автоматически открывать DevTools на каждой новой вкладке

Запустите Chrome из командной строки и передайте флаг --auto-open-devtools-for-tabs :

  1. Закройте любой запущенный экземпляр Chrome.

  2. Запустите ваш любимый терминал или приложение командной строки.

  3. В зависимости от вашей операционной системы выполните следующую команду:

  • МакОС:

    open -a "Google Chrome" --args --auto-open-devtools-for-tabs
    
  • Окна:

    start chrome --auto-open-devtools-for-tabs
    
  • Линукс:

    google-chrome --auto-open-devtools-for-tabs
    

DevTools будет автоматически открываться для каждой новой вкладки, пока вы не закроете Chrome.

Что дальше?

Затем посмотрите следующее видео, чтобы узнать некоторые полезные сочетания клавиш и настройки для более быстрой навигации по DevTools.

Чтобы получить более практический опыт обучения, посмотрите , как настроить DevTools .