Categories

Как использовать Инструмент исследования Google Chrome

Ammy Brown Октябрь 10, 2016
Rating: 5.0. From 2 votes.
Please wait...

Из этого туториала Вы узнаете, как работать с Инструментом исследования Google Chrome.

Наверное, Вы уже знаете о FireBug, плагине для Mozilla Firefox. Один из наших видео-туториалов покажет, как работать с FireBug. Из этого туториала Вы узнаете, как работать с подобным расширением для Google Chrome.

Для того чтобы использовать Инструмент исследования Google Chrome, следуйте таким инструкциям:

  1. Из меню Chrome:

    • Выберите кнопку меню Chrome в верхнем углу;

    • Выберите Больше инструментов (More Tools) > Инструменты (Tools) > Инструменты разработчика (Developer Tools): How_to_use_Google_Chrome_Web_Inspector_1

  2. Нажмите правой кнопкой мышки на элемент, который Вы хотите исследовать и выберите Исследовать (Inspect):

    How_to_use_Google_Chrome_Web_Inspector_2
  3. Используйте горячие клавиши: Ctrl+Shift+I (или Cmd+Opt+I для Mac). В качестве альтернативы, Вы можете нажать на F12 на клавиатуре.

В этом инструменте есть несколько доступных настроек:

Редактирование стилей CSS

Вкладка Элемент (Element) позволяет редактировать CSS в живом режиме. Это обозначает то, что Вы можете предварительно посмотреть изменения, которые Вы вносите в CSS вашего сайта, перед тем как вносить изменения напрямую на вашем сайте.

Здесь Вы можете увидеть, какие стили закреплены за определёнными элементами вашего сайта.

  1. Откройте ваш Инструмент разработчика Chrome, используя один из методов, описанных ранее.

  2. В правой стороне панели Вы увидите стили CSS сайта. Здесь Вы можете редактировать код CSS, для того чтобы узнать, как они будут отображаться на вашем сайте.

    How_to_use_Google_Chrome_Web_Inspector_3

    Обратите внимание! Изменения, внесённые в инструменте разработчика, не будут сохранены. Вы можете только узнать, как такие изменения повлияют на ваш сайт. Для того чтобы сохранить изменения, внесите изменения в файлы .HTML и .CSS.

Исследование разметки HTML

Для того чтобы получить доступ к коду HTML в вашем браузере, откройте ваш инструмент разработчика Google Chrome в меню браузера, или используя инструмент исследования элементов.

В левом широком разделе, Вы увидите код HTML, используемый на вашей странице.

Выбрав определённый элемент вашего сайта, Вы увидите соответствующий код HTML, выделенный в браузере. В качестве альтернативы, Вы можете нажать на элемент HTML напрямую в Инспекторе, и элемент будет выделен на странице.

How_to_use_Google_Chrome_Web_Inspector_4

Работа с Консолью

Консоль поможет найти баги на вашей странице. Для того чтобы открыть страницу Консоли:

  1. Используйте сочетание клавиш CRTL+Shift+J для Windows (или Cmd+Opt+J для Mac).

  2. Или нажмите на кнопку Консоль (Console) в ранее открытом инструменте разработчика.

Когда Консоль открыта, Вы увидите ошибки, которые отображаются на вашем сайте.

How_to_use_Google_Chrome_Web_Inspector_5

Этот инструмент очень полезен, если у Вас какие-то проблемы с сайтом. Консоль отобразит все ошибки сайта и некоторые подсказки, как их устранить.

Вы можете также использовать вкладку Сеть, для того чтобы увидеть файлы, которые вызывают ошибки. Ошибки отмечены красным.

Для того чтобы узнать больше о консоли Google Chrome, Вы можете ознакомиться со стандартным сайтом Google Chrome.

Использование функции Эмулятора устройств Google Chrome

Эта функция поможет Вам проверить адаптивность сайта, эмулируя разные размеры экрана и разрешения.

Для того чтобы получить доступ к этой функции, убедитесь, что ваш инструмент разработчика открыт. Нажмите на кнопку Перетягиваемая панель инструментов устройства (Toggle Device Toolbar)(или используйте сочетание клавиш CTRL+Shift+M):

How_to_use_Google_Chrome_Web_Inspector_6

Включив этот функционал, Вы можете выбрать мобильное устройство, на котором Вам нужно узнать, как выглядит Ваш сайт при определённом разрешении экрана.

Вы можете ознакомиться с нашим видео-туториалом, который покажет, как использовать функцию эмулятора устройств Google Chrome.

Вы можете также ознакомиться с детальным видео-туториалом ниже:

Как использовать Инструмент исследования Google Chrome

Также, ознакомьтесь с нашей коллекцией новых html5 шаблонов для сайтов.

Эта запись была размещена в Инструмены разработчика и помечена как Chrome, developers tools, google chrome, inspect, inspector. Добавьте в закладки постоянную ссылку.

Submit a ticket

Если вы не смогли найти подходящее решение проблемы, пожалуйста воспользуйтесь следующей ссылкой, чтобы отправить запрос команде технической поддержки.
Отправить запросВы получите ответ в течение 24 часов