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

• Вступление
• Рабочие области
  • Указание папки рабочей области
  • Привязка папки к URL
• Sass отладка (экспериментальная возможность)
  • Использование Sass отладки
  • Как всё работает
• Упрощённая отладка в Хроме для Android
  • Использование расширения ADB
  • Обратная направленность порта (экспериментальная)
• Визуализация флейм-чарта для профилей JavaScript
• Пять ключевых измерений производительности

Вступление

Сложность и функционал веб-приложений с каждым днём растёт так же как и Инструменты разработчика 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.

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

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

2. Щелкните Workspace.

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

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

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

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

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

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

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

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

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

   

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

   

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

Панель 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 отладка" в Инструментах разработчика (экспериментальная часть):

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

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

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

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

5. Включите 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 иконка меню становится зелёной и выдаёт номер текущих соединений с устройствами, если таковые есть.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

   

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

   

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

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

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

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

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

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

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