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

Для разработчиков важно знать и понимать как использовать браузерные стредства разработки. В этом уроке я представлю ознакомлю вас с Chrome Developer Tools. Вам необходимо освоить основы, начиная с разметки и стилизации веб-страницы.

Заметка для уже использующих вебинструменты.: Целью этого урока является базовое ознакомление с инструментами разработчика Chrome. Если вы используете другие браузерные вебинстументы, такие как Firebug в Firefox или средства разработки в IE, то многое из этой информации будет для вас знакомым.

Вступление

Инструменты разработки позволяют вам инспектировать всё что только можно на странице. Например вы можете:

  • просматривать элементы соответствующие определённому HTML коду (например, какой-нибудь заголовок)
  • получить общий CSS используемый на странице и какой CSS применяется к элементу
  • модифицировать CSS в реальном времени и визуально увидеть ваши изменения в браузере
  • увидеть HTTP запросы производимые браузером
  • запускать JavaScript код в середине содержимого страницы
  • определять узкие места в производительности и производить её измерение
  • изменять ресурсы оффлайн, чтобы понять какие данные, что запрашивает страница, хранятся локально

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

Обратите внимание: в этом уроке используется версия Canary Chrome. Таким образом, некоторые функции из этой статьи могут отсутствовать в Хроме.

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

просмотр панели diagram
  1. Закрыть инструменты разработчика
  2. Кнопка выбора различных инструментальных панелей (в данный момент выбрана панель Elements).
  3. Пользовательский инструмент установленный 3ей стороной (PageSpeed).
  4. Смена вывода инструментов разработчика.
  5. Показывает консоль (раскажу о ней в другом уроке).
  6. Выбор элемента в инструменте простым нажатием на него на странице.
  7. Ошибки JavaScript на странице.
  8. Открытие оверлея настроек.

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

Панель Elements

Панель Elements показывает разметку страницы точно так же как и рендерится она в браузере. Любое изменение сделанное с DOM через JavaScript отражаенся на элементах найденных в этой панели.

Давайте ознакомимся с этой панелью. Взляните не скрин, цифрами отмечены части панели Elements, которые поясню ниже:

  1. Элементы, как они рендерятся всередине документа.
  2. Стрелка показывает, что элемент имеет наследников. Позиция стрелки показывает сложен элемент или разложен.
  3. Простые хлебные крошки начинаются с элемента документ (<html/>) и заканчиваются текущим выбранным элементом. При наведении на каждую "крошку" подсвечивается соответствующий элемент в окне браузера
  4. Передвигаемый разделитель для разделения элементов списка вывода стилистической информации
  5. Панели, которые содержат стилистическую (и другую) инфу.
  6. Computed Styles показывает инфу о стилях, вычисленную браузером для выбранного элементы.
  7. Показывает вам унаследованные стили от браузера по-умолчанию и примененные к текущему элементу
  8. Показывает стили пользователя, такие как: стили полученные от соответствующего странице файла styles.css, стилей добавленных чарез JavaScript и стилей добавленных через инструменты разработчика
  9. Кнопка “New style rule”. Она создаёт новое правило стиля для выбранного элемента.
  10. Toggle Element State позволяет вам запускать состояния инициируемые пользователем, такие как :hover (при наведении пользователем курсором мышки на что-либо, :active и другие. Изображение показывате кнопку в её “on” состоянии, обычно она в "off".
  11. Раздел font section выводит только шрифты, которые должен загрузить браузер.
  12. Позволяет вам установить предпочитаемый формат для значений цвета. Вы можете оставить (“as authored”), изменить в hex, RGB и даже в HSL.
  13. Визуализация коробки элемента учитывая отступ, границу.

Дополнительная информация

  • Что: Панель Элементов позволяет просмотр и редактирование элементов и стилей.
  • Где: Это первая панель. К ней также можно получить доступ по правому клику на странице и выбрать Inspect element.
  • Почему Существует множество вариантов применения. Можно изменять DOM удалением нода или добавлением нового. Разметка на стороне, панель элементов позволяет увидеть применяемые стили к определённому ноду. Также вы можете добавить или поменять стили или создать новые правила и добавить их к вашим стилям.

Изменение DOM

Изменение DOM всередине панели Elements довольно-таки понятный процесс. Для удаления нода, кликните на нем правым кликом и выберите Delete node. Очевидно, что удаление родительского нода удалит его наследников. Полезное: Вы также можете нажать кнопку Del на клавиатуре для удаления выбраного нода.

Смена типа элемента возможна при двойном нажатии на имени элемента. Например: p-тег параграфа. При смене элемента из одного в другой тим автоматически изменяет открывающий и закрывающий теги.

переименование элемента
Просмотр ресурсов страницы необходим для отладки

Добавить атрибуты можно правым кликом на элементе и выбрав Add attribute. Курсор немедленно расположится в нужном месте и вы можете начать добавлять к элементу необходимые атрибуты, например: class="title". Нажатие кнопки tab расположит курсор на следующей позиции атрибута.

Редактирование атрибутов схоже с добавлением. Найдите атрибут для редактирования и двойныи щелчком измените его имя или значение.

Редактирование сырого HTML можно сделать правым щелчком на элементе и выбрать Edit as HTML.

Нахождение элементов

Инструменты разработчика имеют в распоряжении полезные техники для нахождения элементов в документе. При наведении на элементы в панели Elements начинает подсвечиваться соответствующий элемент на странице.

наведение на элементы панели для выявления их на странице

Иногда искомые элементы бывают не видны, тогда спасает функция Прокрутить для обзора Scroll into view - её можно найти всередине контекст-меню.

прокрутка для вывода элемента для просмотра

Инструменты разработчика имеют функцию поиска. При фокусе на панели инструментов разработчика нажмите Control + f, чтобы открыть окно поиска. Либо в маках Command+Option+f ( ?? + f ) Это простое окно поиска.

Просмотр информации о стилях

Прежде чем мы перейдём к панели стилей (справа) от вкладки Elements, мы можем получить некоторую информацию о стилях прямо от элемента, если в стилях для него указаны поля, отступы и границе. При наведении на один из этих элементов даёт нам такую прямоугольную модель:

результат наведения на элемент

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

Давайте перейдём на панель Elements вкладка “Metrics”.

панель metrics

Она позволяет вам смотреть глубже и выяснять почему элемент рендерится именно так. Также это отличный инструмент для обучения; если вы ещё не видели CSS Box Model, тогда диаграма Metrics - это отличный визуальный помощник.

Панель Metrics позволяет просматривать габариты элементов, поля, границы и отступы. Обратите внимание как вы можете подсвечивать отдельные куски для визуального отображения в браузере. Диаграма Metrics также выдаёт пиксельные размеры для каждой части элемента, например правило стиля padding: 10px 5px (10px снизу и сверху, 5px справа и слева) покажут точные измерения для каждой стороны элемента.

Установка стилевой информации

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

Убедитесь, что панель Styles открыта и щелкните чуть правее фигурной скобки. Вы увидите, что курсор автоматически расположит себя так, что можно сразу написать параметр для стиля. Введите имя параметра, нажмите tab, чтобы передвинуть курсор на следующую позицию и введите значение. Я собираюсь добавить такой CSS:

border: 1px solid green

При наборе названия параметра, Chrome выдаёт подсказку и можно использовать автозаполнение. Нажатие tab выбирает близжайшее соответсвтие напечатаному и передвигает курсор на место значения. При нажатии правой стрелки курсор останется на мете параметра но заполнится близжайшим соответствующим значением напечатаному.

Автозаполнение также работает и с параметрами. Например, комбинация “pos” *tab* “fi” *tab* создаст параметр стилей position: fixed. При вводе пикселей/процентов, например 15% или 10px, можно увеличивать или уменьшать эти значения используя стрелки вверх-вниз. Для увеличения на 10 используйте шифт+стрелка вверх.

Смена значений цвета возможна после его ввода и щелчке на цветном квадратике слева от значения - появится це the small, colored square to the left of the value to bring up the color picker tool. You can also toggle between color value formats by shift+clicking the small colored square.

вы можете создать новое правило стилей нажав на иконку + в панели стилей. Разметка имеющая вид:

<h1 id="something">Hello</h1>

Сгенерируется:

#something { }

Разметка вида:

<h1 class="some-class">Hello</h1>

Автоматически сегенерирует следующее:

.some-class { }

Разметка вида:

<h1>Hello</h1>

Сгенерирует:

.h1 { }

Разметка вида:

<h1 class="class1 class2 class3">Hi there</h1>

Автоматически сегенерирует следующее:

.class1.class2.class3 { }

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


Панель ресурсов

Панель Resources показывает какой ресурс использует страница. Давайте взглянем на то, как это происходит.

  1. Кнопка активации панели Resources.
  2. Панель категории, которая показывает различные типы ресурсов для инспектирования. Заголовок ресурса (такой как “Frames” или “Session Storage”) может показывать ошибку возле себя. Это значит, что есть больше информации и при щелчке на заголовок выведется эта информация. Эта панель может менять размер, поэтому можете сделать её больше.
  3. Страницы ресурсов, включая шрифты, изображения, JS, CSS и сама страница могут здесь отображаться. Эсли страница использует различные фреймы, то тогда каждый фрейм выводится в отдельном каталоге всредине родиетльского “Frames” каталога. Это полезно для понимания отношений между фреймом и его ресурсами.
  4. Если веб SQL базы данных используются на странице, то это выведет их содержимое.
  5. Так же как и веб SQL, IndexedDB показывает содержимое IndexedDB базы данных.
  6. Выводит пары ключ/значение хранимые в localStorage.
  7. Выводит пары ключ/значение хранимые в sessionStorage.
  8. Выводит список кукиз созданных доменом.
  9. Выводит объекты кешированные согласно манифеста кеша. Эта секция содержит много полезной информации. Например, такой ресурс как JS библиотека покажет путь к ресурсу, его размер и тип файла.
  10. Выводит детали о выбранном ресурсе в левой панели.

Дополнительная информация

Инструменты разработчика also has a search feature.

  • Что: Панель ресурсов показывает ресурсы, ассоциированные со страницей.
  • Где: Вторая панель прямо после панели Elements и перед панелью Network.
  • Почему: Просмотр ресурсов страницы необходим для отладки. Вы должно быть заинтересуетесь тем, какую информацию хранят вебсайты в localStorage, кукиз или другой механизм хранения данных. Дополнительно, обычные ресурсы, такие как localStorage могут быть изменены через инструменты разработчика.

Просмотр содержимого отдельного фрейма

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

просмотр множества фреймов
Можно сохранить ресурс на свой компьютер

Каждый фрейм размещается в своей папке. Каждая папка содержит объекты своей страницы и можно щёлкать на каждой странице, чтобы вывести её содержимое. Просмотр содержимого HTML страницы полезно, но можно пробраться ещё глубже в страницу и просмотреть её ресурсы. JS, CSS, изображения и даже шрифты могут просматриаться! Объекты, содержащие код выводятся в просмотрщике кода, который идёт в комлекте с подсветкой синтаксиса и нумерацией строк.

Шрифты

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

просмотр шрифта страницы

The font scales so that it can fit within the resource content area; therefore, resizing the resource content area also resizes the asset!

Изображения

Очевидно, что здесь мы обсудим просмотр изображений.

Изображения всередине панели ресурсов

Инструменты разработчика показывают изображения в области содержимого, и изображения масштабируется согласно области содержимого. Изображения с прозрачностью (такое как представленое выше) показываются с шахматкой-бекграундом, для лёгкого его просмотра. Другой полезной информацией, такой как размеры в пикселях, размеры файла, MIME тип - выводятся после изображения.

Скрипты

При нажатии на JS файл выводится его содержимое и более ничего.

JavaScript который загрузила страница

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

Стили

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

Стили из инструментов разработчика Chrome

Как и в случае с JavaScript файлами у вас немного возможностей с CSS объектами.

Ресурсы, которые не смогли загрузиться

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

Ненайденный ресурс

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

Сохранение и просмотр Ресурсов

Каждый ресурс имеет контекст меню; при правом щелчке на ресурсе возникает меню, схожее на это:

контекст меню для объектов

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

Куки

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

просмотр куки на странице

Здесь мы видим:

  • Name - название куки. Например здесь название "remember_checked" с значением 1. Оно показывает состояние отметил ли пользователь чекбокс "Remember me".
  • Value - значение куки. Для куки с именем "_twitter_sess" показано длинный закодированный ИД сессии для значения.
  • Domain - домен куки. .twitter.com позволяет любые субдомены на twitter.com.
  • Path - как и в домене, поле пути показывает действительные пути. "/" разрешено для всех путей.
  • Expires - дата когда браузер удалит куки.
  • Size - размер куки в байтах.
  • HTTP - принудительный доступ к куки только через HTTP протокол. Это упреждает доступ кук через JavaScript и помогает боротся с кражей кук через кроссайскриптинг.
  • Secure - заставляет браузер обмениваться данными куки только через кодированное соединение, такое как HTTPS

Вы можете удалить куки правым щелчком на куки и выбрать Delete из контекстного меню.

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

Локальное хранилище

Хранение и просмотр ключ/значение пар localStorage очень просто. Давайте используем существующий сайт как пример. Следующее изображение показывает просмотр локального хранилища у Kitchen Sink Example App сделанного на основе фреймворка для мобильных приложений Sencha Touch.

просмотр локального хранилища

При первом просмотре страницы браузер делает запрос на CSS файл. Обновление страницы происходит очень быстро потому что Sencha хранит CSS в локальном хранилище. Приложение kitchen sink имеет некоторые интересные ключ/значение пары. Например, один ключ выглядит вот так:

3a867610-670a-11e1-a90e-4318029d18bb-http://dev.sencha.com/deploy/touch/examples/production/kitchensink/resources/css/app.css

Значение для этого ключа начинается с:

/*45e6f4ffe818855b26f3dcbfc156025eca58e4f5*/code,pre,pre *{font-family:Menlo,Monaco,Courier,monospace}

Steve Souders написал про хранение объектов в локальном хранилище (англ.); это интересное и замечательное использование локального хранилища, которое может улучшить быстродействие сайта особенно на мобильных устройствах.

Кеш приложения

Кеш приложения сообщает браузеру какие ресурсы он должен кешировать и категория Application Cache позволяет просматривать что было закешировано.

просмотр кеша приложения в панели ресурсов

Здесь есть три колонки которые показывают:

  • Resource - полный путь к ресурсу. Расширения файлов - обычно объекты и хтмл файлы. Один из ресурсов - это файл-манифест!
  • Type - может отличаться. Тип "Manifest" - это уникальный тип файла, который есть только у манифеста. Другой тип - explicit: ресурсы, которые явно определены в манифесте. Тип fallback показывает ресурс, который действует как резерв для другого ресурса. Тип Master - это ресурс, который запускает кеш самой страницы.
  • Size - размер ресурса в килобайтах или байтах.

Скоро продолжение

Во второй части рассмотрим ещё панели и сосредоточимся немного на быстродействии для улучшения пользовательского впечатления (так я перевёл UX :)

Оригинал статья Chrome Dev Tools: Markup and Style

Даю ещё пару видео:

Новость. Курс Инструменты разработчика Хром! Кроме этого открылась замечательная школа Инструментов разработчика Хром, в которой можно всё это изучить, от вас нужно лишь знание английского языка.