Статья в процессе перевода

Вступление

Сложность и функционал веб-приложений с каждым днём растёт так же как и Инструменты разработчика Chrome. В этом резюме выступления Пола Айриша (Paul Irish) на Google I/O 2013 Chrome DevTools Revolutions 2013, вы познакомитесь с последними особенностями, которые революционно изменили способ разработки и тестирования веб-приложений.

Если вы не смотрели выступление Пола, то можете сделать это прямо сейчас (выше) или можете сразу перейти к рассмотрению описываемых особенностями:

Рабочие области (Workspaces) позволяют использовать Инструменты разработчика как редактор кода.

  • Если вы используете Sass, то вам понравится возможность редактирования вживую Sass (.scss) файлов внутри DevTools и сразу же видеть результат проведённых изменений на сайте.

  • Удалённая отладка страниц на Chrome для Андроида была возможна в течении некоторого времени, но ADB расширение облегчает соединения с устройствами типа Андроид. Обратные переадресации портов позволяют легко присоединятся устройству к localhost на вашей машине.

  • Производительности уделяется повышенное внимание в веб-приложениях это DevTools имеет несколько новых особенностей для отслеживания узких мест, включая новую Flame Chart визуацию для профилирования ЦПУ несколько новых инструменов для отладки проблем производительности связанных с рендером и использованием памяти.

Эти особенности содержатся в Chrome 28 и теперь доступны через обновление.

Рабочие области (Workspaces)

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

Рисунок ниже показывает пример Рабочих областей в действии. Сайт Calendar был загружен на localhost, в то же время панель Sources показывает локальную файловую систему корневой папки сайта. Все ваши правки файлов в этой папке будут сохранятся на диск. На рисунке ниже некоторые несохранённые изменения были сделаны с файлом Calendar.css, поэтому рядом с названием файла стоит звёздочка.

Нажатие Control+S (Command+S) сохраняет изменения на диск.

Аналогично изменения стилей элемента в панели Elements отображаются в панели Sources и вашем внешнем редакторе. Обратите внимание:

  • DOM изменения в панели Elements не сохраняются. А только изменения стилей в панели Elements будут сохранены.

  • Только стили определённые во внешнем CSS файле могут быть изменены. Изменения элемент, стиля или встроенных стилей не сохранются обратно на диск. Если у вас есть встроенные стили, то они могут быть изменены на панели Sources.

  • Стили, которые вы поменяли на панели Elements сохранются немедленно; вам не нужно нажимать Control+S (Command+S).

Добавление папки рабочих областей

Использование рабочих областей делится на две части: создание содержимого локальной папки доступного для DevTools и отображение этой папки по URL.

Для добавления папки рабочей области:

  • В Инструментах нажмите Settings (Настройки) чтобы открыть Настройки Инструментов

  • Щелкните Workspace.

  • Щелкните Add Folder.

  • Перейдите в папку, которая содержит файлы вашего проекта и щелкните Select.

  • Когда это необходимо - щелкните Allow для предоставления полного доступа Инструментов к папке.

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

Привязка папки к URL

После того, как вы добавите папку рабочей области вы можете привязать её к URL. Когда Хром загружает определённый URL, панель Sources показывает содержимое папки рабочей области вместо содержимого папки сети.

Для привязки папки рабочей области к URL:

  • В панели Sources правым щелчком или Control+щелчёк на файле в папке рабочей области.

  • Выберите Map to Network Resource (Привязать к сетевому ресурсу).

  • Выберите соответствующий сетевой ресурс из загруженной страницы.

  • Перезагрузите станицу в Хроме.

Панель Sources должна показывать теперь только содержимое папки рабочей области, а не содержимое папки локалхоста, как показано ниже.

**Внимание: **Если вы по-прежнему видите ресурсы локалхоста, то обновите страницу в Хроме.

Есть два других способа связать серевую папку с папкой рабочих областей:

  • Правым щелчком (или Control+щелчёк) на сетевом ресурсе и выберите Map to File System Resource.

  • Вручную добавьте связи на вкладке Workspace в диалоге Settings Инструментов.

Sass отладка (эксперимент.)

Sass отладка позволяет вам на лету править Sass (.scss) файлы в панели Sources и просматривать результат без необходимости покидать Инструменты или обновлять страницу. Когда вам нужно проинспектировать элемент, чьи стили задаются Sass-сгенерированным CSS файлом, то панель Elements показывает ссылку к .scss файлу, а не к сгенерированному .css файлу.

По ссылке открывается редактируемый SCSS файлы в панели Sources. Вы можете производить любые изменения с этим файлом.

Когда вы сохраняете изменения в SCSS файл (в Инструментах или где-то ещё), то компилятор Sass регенерирует CSS файлы. Далее Инструмены перезагружает только что сгенерированный файл CSS.

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

Использование Sass отладки

Для использования Sass отладки в Chrome вам нужно иметь предрелизную версию Sass компилятора, единственного, который поддерживает на данный момент генерирование привязки ресурсов.

gem install sass -v ‘>=3.3.0alpha’ –pre Вам также нужно будет разрешить фичу “Sass отладка” в Инструментах разработчика (экспериментальная часть):

  • Откройте about:flags в Chrome.

  • Включите Enable Developer Tools experiments.

  • Перезапустите Chrome.

  • Откройте настройки Инструментов и щелкните Experiments.

  • Включите Support for Sass (или Sass stylesheet debugging, в зависимости от используемой версии браузера).

После того, как Sass установлен, запустите Sass компилятор для просмотра изменений вашего Sass источника файлов и создайте файлы привязки ресурсов для каждлого сгенерированного CSS файла, например:

sass –watch –sourcemap sass/styles.scss:styles.css Если вы используете Compass, обратите внимание, что Compass пока что не поддерживает предрелизную версию Sass, поэтому вы не можете использовать Sass отладку вместе с Compass.

How it works

Для каждого SCSS файла, который он обрабатывает, компилятор Sass генерирует файл привязки ресурсов (.map файл) в дополнение к скомпилированному CSS. Файл привязки ресурсов - это JSON файл, который определяет привязку между .scss файлом и .css файлами. Каждый CSS файл содержит аннотацию, в которой указан URL его файла привязки ресурсов и находящегося в спецкоментарии:

/*# sourceMappingURL= */ Например, выдаёт следующий SCSS файл:

$textSize: 26px; $fontColor: red; $bgColor: whitesmoke;

h2 { font-size: $textSize; color: $fontColor; background: $bgColor; }

Sass генерирует CSS файл, примерно такой с sourceMappingURL аннотацией:

h2 { font-size: 24px; color: orange; background-color: darkblue; } /*# sourceMappingURL=styles.css.map */ Ниже пример файла привязки ресурсов:

{ “version”: “3”, “mappings”:“AAKA,EAAG;EACC,SAAS,EANF,IAAI;EAOX,KAAK…” “sources”: [“sass/styles.scss”], “file”: “styles.css” }

Упрощённая отладка в Хроме для Android

Несколько новых возможностей в Инструментах делают проще удалённую разработку в Chrome для Android, как например установка: ADB расширения и обратное направление портов.

Расширение ADB Chrome упрощает процес установки удалённой отладки. Он даёт следующие преимущества:

  • Комплектуется Android Debug Bridge (ADB) поэтому вам не нужно его отдельно устанавливать.

  • Не нужно никакой командной строки для взаимодействия.

  • UI для лёгкого старта и останова ADB демона и просмотра присоединённый устройств.

Обратное направление портов упрощает соединение Хрома на Android к веб-серверу запущенному на локалхосте, что на некоторых отладочных программах невозможно без изысков с DNS.

Использование расширения ADB

Во-первых установите расширение ADB Chrome из Chrome Web Store. Нажмите **Add to Chrome ** для установки расширения.

Установка расширений из Chrome Web Store не поддерживается в Windows 8. Если у вас возникли проблемы при установке из см. Удалённая отладка на Android для других инструкций по установке.

После установки, в Хроме появляется серое меню Android. Для запуска ADB, щелкните по иконке и дальше Start ADB.

ADB extension menu После старта ADB иконка меню становится зелёной и выдаёт номер текущих соединений с устройствами, если таковые есть.

Щёлкните View Devices для открытия страницы about:inspect, которая показывает каждое соединённое устройство и его вкладки. Для просмотра в Инструментах, щёлкните ссылку “inspect” напротив её URL.

about:inspect страница показывает ссылки на вкладки устройств Если вы не видите никаких присоединённых устройств, проверьте, что ваши устройства присоединены к USB и, что USB отладка разрешена в настройках Хрома для Android. Для более детальных инструкций и устранения неисправностей, смотрите Удалённая отладка на Android.

Обратная направленность порта (экспериментальная)

Обычно у вас есть веб-сервер запущенный на вашем локальном ПК для разработки и вы хотите зайти на свой локальный сайт через ваше устройство. Если ваш ПК и устройство поключены к одной сети - это просто. Но в некоторых случаях, как в корпоративной сети с ограниченным доступом, это невозможно без некоторых трюков с DNS. Новая фича в Хроме для Android с названием обратное обращение портов (reverse port forwarding) позволяет сделать это очень просто. Создаётся прослушивающийся порт TCP в вашем устройстве, который передаёт траффик через USB на определённый TCP порт вашего ПК.

Для использования этой фичи вам понадобится:

  • Chrome 28 или выше версия установленный на вашем ПК

  • Chrome для Android Beta установленный на вашем устройстве

  • Android Debug Bridge (Расширение Хром ADB или полный Android SDK) установленный на вашем ПК

Для использования обратного направления портов ваше устройство должно быть подключено для удалённой отладки, как описано в Использование расширении ADB. Далее нужно разрешить использование обратного направление портов и добавить правило направления портов для вашего приложения.

Во-первых разрешите обратное направление портов:

  • Откройте Хром на вашем ПК.

  • В about:flags, включите Enable Developer Tools experiments и перезапустите Chrome.

  • Откройте about:inspect. Вы можете увидеть ваше мобильное устройство и список его открытых вкладок.

  • Щёлкните на ссылке “inspect” возле любого сайта в списке.

  • В открывшемся окне Инструментов, откройте панель Settings.

  • Под Experiments, включите Enable reverse port forwarding.

  • Закройте окно инструментов и вернитесь к about:inspect.

Далее добавьте правило для возврата портов:

  • Нажмите ссылку “inspect” для открытия Инструментов и откройте снова настройки.

  • Щёлкните по вкладке Port Forwarding.

  • В поле Device port введите номер того порта, который должен соединятся с вашим Android устройством (по-умолчанию 8080).

  • В поле Target вставьте номер порта, где запущено ваше приложение.

Port forwarding tab in DevTools Settings

  • В Chrome for Android, откройте localhost:, где это значение, введенное в поле Device port (по-умолчанию 8080).

Вы должны увидеть содержимое предоставляемое вашим ПК.

Визуализация флейм-чарта для профилей JavaScript

Новый Flame Chart вид выдаёт визуальное представление обработки JavaScript в единицу времени схожим образом как и на панелях Timeline и Network.

Горизонтальная ось - время, а вертикальная - стек вызова. По верху панели показывается полная запись и вы можете увеличить область просмотра своей мышкой и он будет показан ниже.

Flame chart zoomed in В более детальном виде стек вызовов представлен стеком функций “блоки”. Блок, находящийся сверху другого вызван функцией нижнего блога. При наведении на блок он показывает имя своей функции и дату тайминга:

  • Name — Имя функции.

  • Self time — Как долго происходит завершение текущего вызова функции, включая только операторы в функции без включения любых функций, которые она вызывает.

  • Total time — Время, необходимое для завершения текущего вызова этой функции и любых вызываемых её функций.

  • Aggregated self time — Общее время всех вызовов функции за запись, не включая функции, вызываемые этой.

  • Aggregated total time — Общее время всех вызовов функции, включая функции вызываемые этой.

При клике по функции открывается блок, содержащий JavaScript файл в панели Sources на линии, где определена функция.

Для использования флейм чарта:

  • В Панели инструментов, нажмите вкладку Профили (Profiles).

  • Выберите Record JavaScript CPU profile и нажмите Start.

  • При окончании сбора данных, нажмите Stop.

  • В просмотре профиля, выберите визуализацию Flame Chart.

Пять ключевых измерений производительности

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

  • Режим непрерывной прорисовки

  • Показ границ прямоугольников окраски и слоев

  • Измеритель частоты кадров FPS

  • Поиск излишних синхронных макетов (улучшение верстки)

  • Отслеживание размещения объекта