Консоль разработчика – незаменимый инструмент веб-мастера (часть 1)
Консоль разработчика – один из самых необходимых инструментов для веб-мастеров и дизайнеров всех уровней. Сегодня мы решили немного поговорить о ней. Выясним, почему она действительно незаменима и раскроем несколько полезных секретов.
В качестве примера мы будем использовать самый популярный мировой браузер Google Chrome. Однако аналогичные инструменты с примерно похожим функционалом существуют во всех крупных браузерах. Стоит сразу понять, что тема очень обширная, и уложить все в одну статью попросту не получится.
Знакомимся с консолью разработчика
Давайте для примера возьмем нашу любимую поисковую систему Google (надеемся, они не обидятся). Запустим наш Chrome и в поисковике наберем фразу «консоль разработчика» просто для примера. Теперь запустим наш инструмент. Сделать это довольно просто:
- нажатием клавиши F12;
- нажатием сочетания клавиш Ctrl + Shift + I;
- через контекстное меню, вызванное нажатием правой кнопки мыши -> Просмотреть код;
- найдя в меню самого браузера пункт Дополнительные инструменты -> Инструменты разработчика.
Настроить внешний вид вы можете под себя или под конкретную задачу. Рядом с закрывающим значком в правом верхнем углу консоли разработчика есть меню, при нажатии на которое можно найти вариант расположения инструмента.
Сама консоль разработчика состоит из 9 основных вкладок. Давайте начнем их рассматривать.
Первая вкладка носит название «Elements». Разработчики не зря поместили ее на первое место, поскольку многие веб-мастера пользуются ей чаще остальных. Как понятно из названия, с ее помощью можно исследовать все HTML элементы с CSS свойствами на странице.
На панели слева можно увидеть все элементы, а в правой части расположены используемые стили. Очень полезной функцией является возможность правки элементов и их свойств непосредственно в консоли разработчика в режиме онлайн. На исходные файлы ваше творчество не оказывает никакого влияния, а после перезагрузки страницы все вернется на круги своя.
Если вам необходимо выбрать определенный элемент на странице, нет смысла прокручивать все дерево вниз в поисках нужного фрагмента. Если вы заметили, в левом верхнем углу консоли разработчика есть две иконки – одна со стрелочкой, другая с мобильным телефоном. Нажав первую, вы как раз и активируете режим выбора конкретного элемента на странице. Вторая иконка отвечает за переключение полноэкранного режима в эмуляцию работы на различных устройствах – совершенно незаменимая вещь.
Давайте опробуем консоль разработчика в деле. Выберем один из пунктов поиска в google и попробуем изменить его цвет. Как мы видим, существует возможность изменить свойства как всего класса, так и отдельного элемента. При этом, если пролистать свойства вниз, то можно увидеть все, которые наследует элемент. Здесь же находится возможность посмотреть стили при использовании псевдоклассов (таких, как hover).
Консоль разработчика .Полезные функции вкладки Elements
Давайте посмотрим полезные секреты, которые можно использовать при работе с элементами. Для примера воспользуемся известным ресурсом Instagram и откроем страницу самой социальной сети. Также надеемся, что они не обидчивые. Откроем любой пост с изображением.
Instagram не позволяет просто так скачивать фотографии со своего ресурса. Мы же все-таки попробуем это сделать. Открываем консоль разработчика, выбираем элемент с фотографией. Раскрываем элемент div, в который обернуто изображение…и находим несколько ссылок. Нас интересует последняя. Двойное нажатие на нее открывает возможность редактирования.
Далее все просто. Копируем ссылку, открываем ее в новом окне и наслаждаемся эффектом. Изображение открыто в новой вкладке, и мы запросто можем сохранить его себе на компьютер.
Понятно, что рассмотреть все возможности консоли разработчика в одной статье попросту невозможно. Поэтому мы решили преподнести весь материал в нескольких статьях. Впереди еще больше интересного. Расскажем про поиск ошибок, покажем несколько интересных трюков. Скучно точно не будет.