Инструменты разработчика

Видеоурок

Этот урок также доступен в видеоформате

Смотреть

Прежде чем начать изучать CSS, необходимо сперва поближе познакомиться с DevTools, или инструментами (панелью) разработчика, которые есть в любом современном браузере и весьма сильно похожи друг на друга. Немного мы уже касались их в ходе уроков по HTML, однако теперь они нужны нам в большей степени. Мы рассмотрим Chrome DevTools. Инструменты других браузеров станут вам понятны после этого интуитивно.

Самый простой способ открыть панель разработчика это кликнуть в любом месте веб страницы правой кнопкой мыши и нажать в контекстном меню «Посмотреть код».

Другой способ это нажатие клавиши F12 или сочетание клавиш Ctrl + Shift + I для Windows. После этого вы увидите панель разработчика снизу\слева\справа\в отдельном окне. Советую изначально привыкать к тому, чтобы панель разработчика у вас была в отдельном окне. Режим отображения можно выбрать там же, нажав на три вертикальные точки в верхней строке интерфеса, с правой стороны.

После того, как вы выбрали режим отдельного окна, вы сможете перетаскивать панель в любое место экрана. При этом она не будет влиять на размер окна браузера, в котором открыта веб страница.

Frontend-разработчики работают обыкновенно на двух, а бывает и на трёх мониторах, один из которых обязательно имеет Full HD разрешение. Это нужно для быстрой работы, а также для удобного просмотра внешнего вида сайта. Текущий разрабатываемый веб сайт они видят в одном мониторе, его код, панель разработчика — в другом. Именно для этого мы открепили панель от веб страницы. Поверьте, это очень удобно, и вы привыкните к этому.

Вверху вы увидите вкладки «Elements», «Console» и пр. На текущем этапе работы нам достаточно лишь первой вкладки «Elements», где будет отображаться дерево всех тегов, а также псевдоэлементы, текстовый контент.

Уже одна эта вкладка и рабочая область с тегами очень могучая. Прямо здесь, в этой области вы можете изменять текстовое содержимое тегов, их атрибутов, даже целые блоки.

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

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

Предположим, что у нас на сайте есть два типа текста, простой (тёмно-синий) и текст уведомлений (тёмно-зелёный). Первый определяется классом simple-text, второй notice-text:

Если мы собирались сделать этот текст уведомлением, но запутались и забыли, то в панели разработчика мы легко сможем добавить этот класс, чтобы проверить, нужен ли нам он вообще. Для этого в той же левой области CSS есть кнопка .cls , позволяющая добавлять любой класс текущему выбранному тегу. Более того, браузер сканирует весь ваш HTML и CSS и сам подсказывает подходящие классы, вам даже не нужно полностью писать их название, чтобы применить стиль и увидеть результат.

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