Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Workflow
Webdesign

Ускоряем процесс разработки при помощи инструментов разработчика Chrome

by
Length:LongLanguages:

Russian (Pусский) translation by AlexBioJS (you can also view the original English article)

В этом руководстве мы будем рассматривать инструменты разработчика Chrome, а именно то, как они могут помочь вам ускорить написание кода HTML/CSS. Также мы рассмотрим некоторые другие доступные инструменты разработчика.


Введение

Chrome быстро стал популярен среди веб-дизайнеров и пользователей из-за своей скорости, удобства использования и поддержки ранних экспериментальных возможностей вроде свойств CSS3. На конференции I/O, проводимой Google, 2012 года было объявлено, что теперь аудитория Chrome составляет более 310 миллионов активных пользователей, что почти вдвое больше 160 миллионов пользователей, чем хвастались в предыдущем году.

Google Chrome впервые появился 2 сентября 2008 года. Он был выпущен в качестве бета-версии (* предварительная версия программного продукта, выпущенная для бета-тестирования (предварительное тестирование аппаратных и программных изделий избранными пользователями с целью выявления недостатков и возможного усовершенствования). Здесь и далее примеч. пер.) для Microsoft Windows XP и более поздних версий; к 2009 году Google выпустил бета-версии как для OS X, так и для Linux. О выходе Google Chrome 5.0 было объявлено 25 мая 2010 года. Это ознаменовало первую стабильную версию, которая поддерживается всеми тремя платформами.

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

Google описывает инструменты разработчика Chrome следующим образом:

Инструменты разработчика, поставляемые в составе Chrome и доступные в нем, позволяют веб-разработчикам и программистам получить доступ к внутренним частям браузера или их приложения. Инструменты разработчика разработаны главным образом на основе веб-инспектора WebKit, части проекта с открытым исходным кодом WebKit.

В действительности инструменты разработчика Chrome являются веб-приложением, написанным на HTML, JavaScript и CSS. Оно запускается во время выполнения кода JavaScript. После этого мы можем повзаимодействовать и поэкспериментировать с веб-страницами.

В этом руководстве мы будем рассматривать именно то, как инструменты разработчика могут помочь вам ускорить написание кода HTML/CSS. Руководство будет предназначено для дизайнеров, у которых не обязательно должен быть опыт работы с инструментами разработчика Chrome, однако я уверен, что даже если вы с ними знакомы, то тоже подчерпнете что-то полезное для себя по ходу работы с руководством.


Начало работы

Для начала вам необходимо будет открыть Chrome и перейти на выбранную вами страницу. Получить доступ к инструментам разработчика можно одним из трех способов. Вы можете нажать при помощи правой кнопки мыши по вашей веб-странице и выбрать пункт меню "Inspect Element", вы можете нажать кнопку с иконкой зубчиков шестеренки (* или с иконкой гаечного ключа) вверху справа Chrome и выбрать "Tools > Developer Tools" (* Дополнительные инструменты > Инструменты разработчика). Третий способ заключается в использовании набора "горячих" клавиш (* клавиша быстрого выбора команд (без обращения к меню); одиночная клавиша либо комбинация клавиш на клавиатуре, нажатие которых соответствует выбору пункта меню или запуску определённой команды), который нам предоставил Chrome:

В случае использования Windows и Linux нажмите

  • комбинацию клавиш Control - Shift - I, чтобы открыть инструменты разработчика;
  • Control - Shift - J, чтобы открыть инструменты разработчика и перейти в панель Console;
  • Control - Shift - C, чтобы открыть инструменты разработчика в режиме 'Инспектирование элемента';

В случае использования macOS нажмите

  • комбинацию клавиш ⌥⌘I (Command (* управляющая клавиша) – Option (* вариантная клавиша; клавиша выбора опции) - I), чтобы открыть инструменты разработчика;
  • ⌥⌘J (Command - Option - J), чтобы открыть инструменты разработчика и перейти в панель Console;
  • ^⌘C (Control - Option - C), чтобы открыть инструменты разработчика в режиме 'Инспектирование элемента'.
Open Chrome Developer Tools
На изображении выше показано контекстное меню, появляющееся при нажатии при помощи правой кнопки мыши по веб-странице в Chrome.

Инструменты для работы с HTML-кодом: панель Elements (* Элементы)

Если вы веб-дизайнер, то будете проводить довольно много времени в разделе 'Elements' приложения. При помощи него вы можете ознакомиться со всем, что находится в объектной модели документа (DOM, для краткости).

Если вы веб-дизайнер, то будете проводить довольно много времени в разделе 'Elements' приложения. При помощи него вы можете ознакомиться со всем, что находится в объектной модели документа (DOM, для краткости). Выбрав инструмент с небольшой иконкой 'увеличительного стекла' (* которая исчезла, начиная с версии Chrome 32; в данный момент (2019 год) иконка инструмента для инспектирования элемента располагается в верхнем левом углу), расположенный в нижнем левом углу инспектора, вы запросто можете выбрать DOM-узел непосредственно на веб-странице (* на экране), которую просматриваете, и он будет выделен (* в дереве элементов). За счет этого вы можете сэкономить кучу времени в случае, если вам нужно быстро узнать имя или тип атрибута элемента на вашей странице.

Chrome's inspect element
При помощи редактора вы можете быстро и легко найти элементы и их соответствующие классы или ID CSS.

Вы можете отредактировать HTML-код DOM-узлов, дважды нажав по ним при помощи мыши. После этого вы можете изменять характеристики тегов вроде значений, ID и классов или даже тип HTML-тега.

При нажатии при помощи правой кнопки мыши по узлу, появится контекстное меню, при помощи которого вы можете скопировать HTML-код для него или совсем его удалить. Также вы можете скопировать XPath (* XML Path Language; в этом языке используются формулы маршрутов для выбора узлов или их наборов) выбранного узла. XPath – язык запросов для выбора узлов из документа. Он может оказаться полезным при использовании технологий вроде YQL (* Yahoo Query Language – язык запросов Yahoo; SQL-подобный язык, при помощи которого вы можете запрашивать, фильтровать и объединять данные с веб-сервисов).

Также вы можете перетаскивать HTML-элементы по странице. Для этого выберите узел и перетащите его куда-то в дереве. Затем это изменение будет отображено на инспектируемой вами странице.

Chrome's inspect element contect menu

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

Еще одна небольшая полезная возможность панели Еlements предоставляется на случай, когда вы работаете с изображениями. Просто переместите курсор поверх тега для добавления изображения, и появится всплывающее окошко, в котором отображаются изображение, размер представленного на экране изображения (* построенного рендерером браузера) и изначальный размер изображения. Размер представленного на экране изображения иногда может превышать изначальный размер изображения, что может происходить из-за добавления например границ или полей.

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


Инструменты для работы с CSS-кодом: визуализатор стилей

(* визуализатор – средство визуализации (и просмотра) объектов (напр., при отладке программ)). Инструменты разработчика Chrome очень помогают при отладке CSS-кода. Иногда работа стилей CSS может нарушаться, в результате чего появляются нежелательные визуальные эффекты. За счет возможности проверки того, какие стилевые правила применяются к элементу браузером, мы можем докопаться до сути проблемы и исправить ошибку.

В разделе 'Computed style' (* который называется 'Сomputed' в 2019 году; вычисленный стиль; содержит стиль элемента, который устанавливает браузер на основании собственного стиля, учета наследования и добавленных свойств) вы можете увидеть, какие стилевые правила применяются движком рендеринга браузера к выбранному элементу. В нем представлен конечный набор стилевых правил, применяемых к веб-странице. Нажав по стрелке слева от определенного вычисленного стиля, вы можете понять, откуда он происходит. Так что, если вы не можете понять, почему фон того элемента div все время черный или почему шрифт того текста не жирный, то взгляните в раздел, где указывается вычисленный стиль, и вы сможете понять точку зрения браузера.


Styles и Matched CSS Rules

Разделы 'Styles' и 'Matched CSS Rules' (* в 2019 этот раздел представлен без заголовка 'Мatched CSS Rules'; раздел, в котором представлены стилевые свойства для определенного селектора, назначенного для элемента) работают подобно друг другу. Они оба позволяют вам добавлять, удалять и изменять CSS-правила для какого-нибудь элемента. При помощи панели 'element.style' вы можете добавлять свойства для того определенного элемента независимо от имеющегося у него класса или ID; рассматривайте их в качестве встроенных стилей (* те, что задаются при помощи атрибута style). Это отличается от того, что происходит в разделе 'Matched CSS Rules', поскольку вносимые вами в нем изменения в стилевые правила отобразятся на любом другом элементе с тем же классом или ID.

Иногда вы можете заметить, что стилевое свойство правила перечеркнут. Это происходит обычно из-за того, что он был перезаписан другим свойством из другого правила. Для того чтобы понять, почему он был перезаписан, вы можете воспользоваться разделом 'Computed style', как было упомянуто ранее.

Все больше дизайнеров, с которыми я общался недавно, отходят от подхода, при котором дизайн для конкретного сайта разрабатывается в пакете программного обеспечения для редактирования вроде Photoshop и Fireworks, и переходят к использования подхода, согласно которому дизайн разрабатывается в браузере. Этот новый подход позволяет вам взглянуть на вашу работу с точки зрения браузера.

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

При этом подходе вам предоставляется полезная возможность, которая заключается в том, как вы можете выбирать цвета. За счет нажатия кнопки с иконкой шестеренки в верхнем правом углу панели 'Styles' (* которой уже нет в 2019 году), у вас появляется возможность переключать различные режимы цветового воспроизведения (* в 2019 вы можете выбрать этот режим непосредственно в цветоподборщике или нажав небольшую кнопку с иконкой палитры цветов при нажатой клавише Shift). Они следующие:

  • Hex (* при этом используются шестнадцатеричные числа) – то есть #000000
  • RGB – то есть rgb(0,0,0)
  • HSL (* hue-saturation-lightness – тон–насыщенность–яркость) – то есть hsl(0, 0%, 0%)

Если, например, вы используете черный цвет, а затем просматриваете текущую веб-страницу и замечаете, что он немного темноват с эстетической точки зрения, которой вы придерживаетесь, то вы можете просто нажать небольшую кнопку с иконкой палитры цветов рядом со значением свойства, и в результате откроется цветоподборщик, при помощи которого затем вы можете немного уменьшить яркость черного цвета. Это оказывается очень полезным при разработке дизайна на ходу (* в процессе работы).

Chrome's dev tools color picker
С помощью цветоподборщика Chrome вы можете легко экспериментировать с вашим дизайном в режиме реального времени.

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

В верхнем правом углу панели 'Styles' рядом с кнопкой с иконкой шестеренки располагается небольшая кнопка с иконкой отмеченной области (* охватывающей выделенные объекты или части изображения; в 2019 году ее нет, а имеется кнопка с текстом ':hov'). Нажав ее, мы можем переключать различные состояния элемента. Они следующие:

  • :active
  • :hover
  • :focus
  • :visited

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

Chrome's dev tools inspect state
На изображении выше показаны различные состояния, которые вы можете выбрать.

Редактирование в режиме реального времени и история изменений

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

Также вы можете сохранить вашу таблицу стилей, выдвинув боковую панель. Если вы нажмете при помощи правой кнопки мыши по ее имени, то откроется новое контекстное меню, при помощи которого вы можете открыть выбранную вами таблицу стилей в браузере и сохранить ее. При этом здорово то, что выбрав 'Local Modifications...', вы можете увидеть полную историю всех внесенных вами изменений. Так что, если вы напортачили с кодом и хотите вернуться к изменениям, внесенным десять минут назад, то Chrome придет вам на помощь.

Chrome's dev tools local modification
После этого вы можете сохранить вашу отредактированную таблицу непосредственно в инструментах разработчика. Также при помощи вышеупомянутого меню вы можете ознакомиться с историей недавно внесенных вами изменений.

Размеры

В упомянутой ранее боковой панели вкладки 'Elements' имеется панель с размерами элемента. При помощи этой панели вы можете просматривать значения и вносить изменения в компоненты блочной модели текущего элемента. Она предоставляет вам визуальное представление этих компонентов, среди которых:

  • margin
  • padding
  • border
  • position

Заключение

Инструменты разработчика Chrome принадлежат к одним из наиболее полезных инструментов для ускорения моего процесса написания HTML/CSS-кода для веб-дизайна.

Конечно же, их можно использовать для множества других целей, например для анализирования времени загрузки страницы и производительности скриптов. Также имеются другие инструменты, которые предоставляют подобные возможности, вроде Firebug для Firefox. В последней версии Firefox также имеются некоторые полезные инструменты, которые еще не были реализованы в Chrome, хотя, будем надеяться, что скоро будут. Среди них инструмент для просмотра объемного изображения страницы. С его помощью вы можете ознакомиться с трехмерным представлением веб-сайта, которое вы можете вращать и ориентировать. Благодаря этому вы можете легко визуализировать наследование элементов вашей страницы. Также они добавили "отзывчивый режим, при котором веб-сайт помещается во фрейм, размер которого вы можете изменять, чтобы увидеть, как ваш сайт будет выглядеть в различных контрольных точках (* переломные/контрольные точки медиа-запросов, контрольные точки CSS; такие значения ширины области просмотра, при которых дизайн сайта существенно меняется).

Я вовсе не утверждаю, что инструменты разработчика Chrome – лучшие из всех доступных. В моем случае, это единственные инструменты, которые я когда-либо использовал, и я понимаю, как много времени они сэкономили мне при разработке. Поэтому я хотел поделиться с вами некоторыми выводами, к которым я пришел, и надеюсь, что они также помогут вам сэкономить немного времени.


Ссылки на посты и ресурсы для дальнейшего изучения темы:

  • Adobe Shadow. Теперь вы можете использовать инспектор Chrome на вашем настольном компьютере для устранения неполадок на мобильных устройствах вроде iPhone. Подобно тому, как это происходит в случае его использования на настольных компьютерах, любые вносимые вами изменения будут отображаться в режиме реального времени на вашем устройстве.
  • Chrome DevTools Autosave. Это дополнение Chrome позволяет вам вносить изменения в локальные CSS- и JavaScript-файлы непосредственно в самих инструментах разработчика. Вносимые вами в браузере изменения автоматически сохраняются в их соответствующих файлах.
  • Chrome Developer Tools Evolution. Видео с конференции I/O (* проводимой Google) 2012 года на тему последних новинок в инструментах разработчика.
  • Advertisement
    Advertisement
    Looking for something to help kick start your next project?
    Envato Market has a range of items for sale to help get you started.