Введение
Google Chrome — это богатый и мощный веб-браузер, впервые открывающий возможности веб-приложений. Google приложил все усилия, чтобы предоставить конечным пользователям очень быстрый, очень стабильный и многофункциональный интерфейс просмотра. Google также позаботился о том, чтобы такие разработчики, как вы, получили отличный опыт работы с Chrome. Инструменты разработчика, входящие в состав Chrome и Safari, позволяют веб-разработчикам и программистам получить глубокий доступ к внутренним компонентам браузера и их веб-приложений.
Инструменты разработчика являются частью проекта Webkit с открытым исходным кодом. Большая часть обсуждения в этой статье относится как к Google Chrome, так и к Safari. Однако снимки экрана были сделаны с использованием Google Chrome 6, поэтому в вашем браузере могут быть небольшие различия.
В этой статье мы проведем обзор инструментов разработчика и укажем на их наиболее популярные и полезные функции. Наша целевая аудитория — веб-разработчики, которые не знали или еще не изучали Инструменты разработчика. Однако мы уверены, что даже если вы опытный веб-разработчик, вы получите пару советов.
Если ваш экземпляр инструментов разработчика не совсем соответствует скриншотам, представленным в этой статье, мы рекомендуем вам обновить его до версии 5, чтобы вы могли следовать инструкциям и получить доступ ко всем функциям, описанным здесь.
Обзор
В целом доступно восемь основных групп инструментов (см. Инструменты разработчика), и их возможности расширяются с каждым выпуском. Chrome 5 теперь предлагает элементы, ресурсы, сценарии, временную шкалу, профили, хранилище, аудит и консоль.
Элементы
Инструмент «Элементы» позволяет вам видеть веб-страницу такой, какой ее видит браузер. То есть, используя инструмент «Элементы», вы можете видеть необработанный HTML, необработанные стили CSS, объектную модель документа и манипулировать ими в режиме реального времени.
Ресурсы
Используйте инструмент «Ресурсы», чтобы узнать, какие компоненты ваша веб-страница или приложение запрашивает у веб-серверов, сколько времени занимают эти запросы и какая пропускная способность требуется. Вы также можете просмотреть заголовки HTTP-запроса и ответа для каждого из ваших ресурсов. Инструмент «Ресурсы» идеально подходит для ускорения загрузки страниц.
Скрипты
Чтобы заглянуть внутрь JavaScript страницы, вы будете использовать инструмент «Сценарии». Здесь вы можете найти список скриптов, необходимых для страницы, а также полнофункциональный отладчик скриптов. Вы даже можете изменить JavaScript на лету!
График
Для расширенного анализа времени и скорости инструмент Timeline предлагает углубленное представление о различных скрытых действиях Chrome. Вы можете узнать, сколько времени требуется браузеру для обработки событий DOM, рендеринга макетов страниц и рисования окна.
Профили
Инструмент «Профили» помогает собирать и анализировать производительность сценариев JavaScript. Например, вы можете узнать, какие функции требуют больше всего времени для выполнения, и сосредоточиться на том, какие именно функции следует оптимизировать.
Хранилище
Современные веб-приложения требуют большей устойчивости, чем просто файлы cookie, а инструмент «Хранилище» помогает отслеживать, запрашивать и отлаживать локальное хранилище браузера. Этот инструмент может отображать и запрашивать данные, хранящиеся в локальных базах данных, локальном хранилище, хранилище сеансов и файлах cookie.
Аудит
Инструмент аудита похож на консультанта по веб-оптимизации, сидящего рядом с вами. Этот инструмент может анализировать страницу по мере ее загрузки и предоставлять предложения и варианты оптимизации для уменьшения времени загрузки страницы и повышения воспринимаемой (и реальной) скорости реагирования.
Консоль
И последнее, но не менее важное: инструменты разработчика предлагают полнофункциональную консоль. Из консоли вы можете ввести произвольный код JavaScript и программно взаимодействовать со своей страницей.
Запуск
Инструменты разработчика легко запустить, находясь в Chrome.
В любой операционной системе вы можете просто щелкнуть правой кнопкой мыши любой элемент на странице и выбрать опцию «Проверить элемент» в контекстном меню. Это откроет инструменты разработчика и перейдет прямо к элементу, на который вы щелкнули.
Чтобы увидеть это в действии, посетите http://www.google.com в браузере Chrome. Щелкните правой кнопкой мыши логотип Google, и вы увидите следующие параметры:
Выбор «Проверить элемент» откроет инструменты разработчика, которые должны выглядеть следующим образом:
Обратите внимание, как инструменты разработчика открылись на вкладке «Элементы» и автоматически перешли к тегу <img> для логотипа Google и выделили его. Это очень полезно, когда вам интересно, какой HTML сгенерировал тот или иной элемент страницы.
Вы также можете открыть Инструменты разработчика с помощью простого сочетания клавиш. В зависимости от вашей операционной системы попробуйте следующее:
- В Windows и Linux нажмите клавиши
Control-Shift-J. - На Mac нажмите клавиши
Command-Option-J.
Наконец, вы можете открыть инструменты из главного меню браузера.
На Mac в строке главного меню приложения выберите «Вид», «Разработчик», «Инструменты разработчика».
На ПК с Windows вам следует использовать меню «Страница» в правом верхнем углу и выбрать «Разработчик», «Инструменты разработчика».
Теперь, когда у вас открыты и готовы инструменты разработчика, давайте начнем с изучения элементов домашней страницы Google.
Элементы
Первая вкладка в инструментах разработчика — «Элементы». Это ваше окно в структуру веб-страницы, представленное так, как ее видит ваш браузер.
Просмотр DOM
Вы часто будете посещать вкладки «Элементы», когда вам нужно определить фрагмент HTML для какого-либо аспекта страницы. Например, вам может быть интересно, имеет ли изображение атрибут HTML id и каково значение этого атрибута.
Вкладка «Элементы» иногда является лучшим способом «просмотреть исходный код» страницы. На вкладке «Элементы» DOM страницы будет красиво отформатирован, легко показывая вам элементы HTML, их происхождение и потомков. Слишком часто страницы, которые вы посещаете, имеют минимизированный или просто уродливый HTML-код, из-за которого трудно понять, как структурирована страница. Вкладка «Элементы» — это решение для просмотра реальной базовой структуры страницы.
Например, ниже приведены выходные данные «просмотра источника» главной страницы Google.
Трудно прочитать приведенный выше исходный код, поскольку он оптимизирован и минимизирован. Формат хорош для клиентов и серверов, но сложен для разработчиков!
Вместо этого, если вы хотите прочитать исходный код страницы, используйте вкладку «Элементы», чтобы просмотреть красиво напечатанную иерархию элементов с выделенным синтаксисом.
Вкладка «Элементы» также позволяет просматривать, взаимодействовать, а иногда даже изменять стили, метрики, свойства и прослушиватели событий для любого элемента на странице.
Просмотр стилей
Каскадная природа CSS делает браузер стилей на вкладке «Элементы» очень полезным. Иногда стили разрушаются сами по себе и появляются непредвиденные визуальные эффекты. Знание того, какое правило стилей браузер применяет к элементу, поможет вам устранить такую проблему.
Если щелкнуть любой элемент на вкладке «Элементы», отобразятся все стили, прикрепленные к этому элементу.
На скриншоте выше вы увидите, что мы можем указать все применяемые атрибуты стиля. Например, заполнение берется непосредственно из атрибута стиля элемента <img> . Однако ширина и высота берутся из соответствующих собственных атрибутов. Интересно, что существуют стили, унаследованные от тега <center> , тега <body> и других.
Приятно видеть отдельные стили и их происхождение, но также очень полезно увидеть окончательный набор стилей после того, как он вычислен и применен к элементу. Вы можете увидеть конечный продукт, выбрав меню «Вычисленный стиль», как показано на скриншоте ниже.
Далее мы кратко рассмотрим другие функции, предоставляемые вкладкой «Элементы». Подробнее об этом мы расскажем в следующих статьях.
Модель коробки
Вы можете увидеть блочную модель в том виде, в котором она применяется к выбранному элементу, выбрав меню «Метрики»:
Свойства элемента
Вы можете увидеть все свойства элемента так, как их видят JavaScript и DOM, выбрав меню «Свойства»:
Слушатели событий
И, наконец, вы даже можете увидеть прослушиватели событий, прикрепленные к элементу или проходящие через него, через меню «Прослушиватели событий»:
Краткое содержание
На вкладке «Элементы» доступно множество функций, и в будущих статьях отдельные меню будут рассмотрены глубже.
Вам следует использовать вкладку «Элементы», если вы хотите увидеть, как страница выглядит в самом браузере. Общие проблемы, такие как «как вычисляется этот стиль?» или «какие HTML-теги создали этот компонент?» на вкладку «Элементы» можно быстро и легко ответить.
Думайте о вкладке «Элементы» как об источнике просмотра Uber и получите очень четкую видимость своей страницы.
После того, как вы изучили страницу, вам может быть интересно, как HTML, CSS и изображения вообще туда попали. Вкладка «Ресурсы», описанная ниже, показывает, как браузер клиента и веб-сервер взаимодействуют для отправки этих ресурсов.
Ресурсы
После того, как ваше приложение заработает, вашим следующим шагом должна стать оптимизация производительности сети и пропускной способности. Вы должны стремиться сделать передачу вашего приложения с сервера на клиент максимально быстрой и эффективной. Ваши пользователи будут благодарны вам за быструю загрузку страниц, вы сэкономите деньги на пропускной способности и ресурсах сервера, а также повысите рейтинг в результатах поиска Google (которые теперь учитывают скорость сайта).
Вкладка «Ресурсы» в инструментах разработчика — это окно во взаимодействие между веб-сервером и клиентским браузером. Вы можете увидеть все ресурсы, запрошенные браузером (это всегда очень удивительно!), время, необходимое для их получения с сервера, и сколько полосы пропускания используется во время передачи.
По иронии судьбы, запуск вкладки «Ресурсы» влияет на производительность загрузки страницы, поэтому по умолчанию она отключена. При первом доступе к этой функции вам необходимо будет включить ее для просматриваемой страницы.
Я рекомендую вам оставить выбранным значение по умолчанию «Включить только для этого сеанса», так как вы не хотите без необходимости подвергаться небольшому снижению производительности. Как только вы нажмете «Включить отслеживание ресурсов», страница перезагрузится, а инструменты разработчика будут отслеживать и отображать ресурсы, отправленные с сервера.
На следующем снимке экрана показаны необходимые и загруженные ресурсы для главной страницы Google.
На этом экране много информации, поэтому давайте разберем ее по частям.
Поведение по умолчанию — показать вам, сколько времени потребовалось для запроса и загрузки всех ресурсов страницы. Прокрутка списка ресурсов может вас удивить, поскольку вы можете не знать, сколько отдельных запросов делает клиент. Большое количество запросов от клиента может серьезно повлиять на производительность. Получение информации о том, что именно требуется, является первым шагом к оптимизации и возможному сокращению ресурсов.
Если вас интересуют только изображения или таблицы стилей, вы можете отфильтровать тип ресурса, используя меню непосредственно под окном основной вкладки.
Вы также узнаете порядок, в котором запрашиваются ресурсы. Используя отображение временной шкалы, вы сможете лучше понять, почему определенные элементы на вашей странице появляются позже, чем другие.
После того как вы получите обзор всех запрошенных ресурсов и того, как они составляют всю временную шкалу запроса, вам нужно будет перейти к отдельным ресурсам.
Если вы заметили, что некоторые ресурсы запрашиваются каждый раз, когда вы заходите на страницу, это признак того, что ваши заголовки кэширования настроены неправильно. Вы можете просмотреть все заголовки ресурса, щелкнув ресурс в левом списке.
Используйте отображение заголовков, чтобы убедиться, что установлен ожидаемый код ответа HTTP и предоставлены соответствующие заголовки. Например, если ресурс редко или никогда не меняется, ваш сервер должен установить заголовок Expires на отдаленное будущее. Это сообщит браузеру, что ресурс не следует запрашивать повторно до этой даты. Это уменьшает количество HTTP-соединений, необходимых для вашей страницы, тем самым ускоряя работу вашего сайта.
Краткое содержание
На вкладке «Ресурсы» есть еще много чего, о чем мы расскажем в следующей статье.
Используйте вкладку «Ресурсы», чтобы получить представление о том, как ваш клиентский браузер взаимодействует с веб-сервером. Используя эту информацию, включая время запроса, размер запроса и порядок запросов, вы можете провести разумную оптимизацию, чтобы снизить нагрузку на сервер, затраты, а также увеличить скорость и улучшить взаимодействие с пользователем.
Скорость очень важна для вашего веб-сайта, ваших пользователей и поисковых систем. Как только вы сократите количество и размер ресурсов и начнете выполнять соответствующие HTTP-разговоры, следующим шагом будет исследование и оптимизация сценариев, выполняющихся на вашей странице. К счастью, вкладка «Сценарии», о которой пойдет речь далее, делает именно это.
Дополнительные ресурсы
Для получения дополнительной информации об инструментах разработчика мы можем порекомендовать следующее:
- Презентационное видео и слайды инструментов разработчика Chrome с конференции Google I/O 2010.
- Учебное пособие по инструментам разработчика Chrome
И, конечно же, следите за обновлениями на html5rocks.com, чтобы увидеть вторую часть этой статьи, а также множество других замечательных материалов по HTML5 и Chrome.