Революция в инструментах разработчика Chrome 2013 г.

Введение

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

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

• Workspaces позволяет использовать DevTools в качестве редактора исходного кода.
• Если вы используете Sass, вам понравится возможность редактировать файлы Sass (.scss) в реальном времени в DevTools и сразу видеть, как ваши изменения отражаются на странице.
• Удаленная отладка страниц в Chrome для Android уже давно возможна, но расширение ADB упрощает подключение к устройствам Android. Обратное перенаправление портов позволяет легко подключаться к локальному хосту на компьютере разработки с вашего устройства.
• Производительность всегда является проблемой в веб-приложениях, и DevTools имеет ряд новых функций, которые помогут вам отслеживать узкие места, включая новую визуализацию Flame Chart для профилирования ЦП и несколько новых инструментов для отладки проблем с производительностью, связанных с рендерингом и использованием памяти.

Эти функции реализованы в Chrome 28 и теперь доступны в стабильном канале обновлений.

Рабочие пространства

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

На снимке экрана ниже показан пример рабочих пространств в действии. Сайт «Календарь» загружен через локальный хост, а на панели «Источники» отображается представление корневой папки сайта в локальной файловой системе. Изменения, внесенные вами в файлы в этой папке, сохраняются на диске. На снимке экрана ниже в Calendar.css были внесены некоторые несохраненные изменения, поэтому рядом с именем файла стоит звездочка.

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

Аналогично, изменения, которые вы вносите в стили элемента на панели «Элементы», отражаются как на панели «Источники», так и во внешнем редакторе. Обратите внимание, что:

• Изменения DOM на панели «Элементы» не сохраняются. Сохраняются только изменения стиля на панели «Элементы».
• Изменять можно только стили, определенные во внешнем файле CSS. Изменения в element.style или встроенных стилях не сохраняются на диске. Если у вас есть встроенные стили, их можно изменить на панели «Источники».
• Изменения стиля на панели «Элементы» сохраняются немедленно; вам не нужно нажимать Control+S или Command+S .

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

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

Чтобы добавить новую папку рабочей области:

1. В DevTools нажмите «Настройки» . чтобы открыть настройки DevTools.
2. Нажмите Рабочая область .
3. Нажмите «Добавить папку» .
4. Перейдите в папку, содержащую исходные файлы вашего проекта, и нажмите «Выбрать» .
5. При появлении запроса нажмите «Разрешить» , чтобы предоставить DevTools полный доступ к папке.

На панели «Источники» отображается новая папка рабочей области вместе с источниками, загруженными через локальный хост. Теперь вы можете редактировать файлы в папке вашего рабочего пространства в режиме реального времени, и эти изменения сохранятся на диске.

Сопоставление папки с URL-адресом

Добавив папку рабочей области, вы можете сопоставить ее с URL-адресом. Всякий раз, когда Chrome загружает указанный URL-адрес, на панели «Источники» отображается содержимое папки рабочей области вместо содержимого сетевой папки.

Чтобы сопоставить папку рабочей области с URL-адресом:

1. На панели «Источники» щелкните правой кнопкой мыши или щелкните, удерживая клавишу Control, файл в папке рабочей области.
2. Выберите «Сопоставить с сетевым ресурсом» .

   

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

   

4. Перезагрузите страницу в Chrome.

На панели «Источники» теперь должно отображаться только содержимое локальной папки рабочей области вашего сайта, а не источники localhost, как показано ниже.

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

• Щелкните правой кнопкой мыши (или щелкните, удерживая клавишу Control) сетевой ресурс и выберите «Сопоставить с ресурсом файловой системы» .
• Добавьте сопоставления вручную на вкладке «Рабочая область» диалогового окна «Настройки DevTools».

Отладка исходной карты Sass/CSS

Отладка Sass (CSS Source Map) позволяет редактировать файлы Sass (.scss) в режиме реального времени на панели «Источники» и просматривать результаты, не выходя из DevTools или обновляя страницу. Когда вы проверяете элемент, стили которого предоставлены файлом CSS, созданным Sass, на панели «Элементы» отображается ссылка на файл .scss, а не на сгенерированный файл .css.

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

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

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

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

gem install sass -v '>=3.3.0alpha' --pre

Вам также необходимо включить функцию отладки Sass в экспериментах DevTools:

1. Откройте about:flags в Chrome.
2. Включите параметр «Включить эксперименты в инструментах разработчика ».
3. Перезапустите Хром.
4. Откройте настройки DevTools и нажмите «Эксперименты» .
5. Включите поддержку Sass (или отладку таблиц стилей Sass , в зависимости от версии браузера, которую вы используете).

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

sass --watch **--sourcemap** sass/styles.scss:styles.css

Если вы используете Compass, обратите внимание, что Compass еще не поддерживает предварительную версию Sass, поэтому вы не можете использовать отладку Sass с Compass.

Как это работает

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

/*# sourceMappingURL=<url>; */

Например, учитывая следующий файл SCSS:

<!-- styles.scss -->
$textSize: 26px;
$fontColor: red;
$bgColor: whitesmoke;

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

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

<!-- styles.css -->
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"
}

Упрощенная удаленная отладка в Chrome для Android

Несколько новых функций в DevTools упрощают настройку удаленной отладки в Chrome для Android: расширение ADB и обратная переадресация портов.

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

• В комплект входит Android Debug Bridge (ADB), поэтому вам не придется его устанавливать.
• Никакого взаимодействия с командной строкой не требуется.
• Пользовательский интерфейс для простого запуска и остановки демона ADB, а также просмотра подключенных устройств.

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

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

Сначала установите расширение ADB Chrome из Интернет-магазина Chrome. Нажмите «Добавить в Chrome» , чтобы установить расширение.

После установки в Chrome появится серый значок меню Android. Чтобы запустить ADB, щелкните значок, а затем нажмите «Запустить ADB» .

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

Нажмите «Просмотр устройств» , чтобы открыть страницу about:inspect , на которой отображаются все подключенные устройства и их вкладки. Чтобы проверить вкладку в DevTools, нажмите ссылку «Проверить» рядом с ее URL-адресом.

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

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

Обычно у вас есть веб-сервер, работающий на вашей локальной машине разработки, и вы хотите подключиться к этому сайту со своего устройства. Если машина разработки и устройство находятся в одной сети, это просто. Но в некоторых случаях, например в корпоративных сетях с ограниченным доступом, это может оказаться невозможным без некоторых хитрых приемов DNS. Новая функция Chrome для Android, называемая обратной переадресацией портов, упрощает эту задачу. Он работает путем создания прослушиваемого TCP-порта на вашем устройстве, который перенаправляет трафик через USB на определенный TCP-порт на вашем компьютере разработки.

Чтобы использовать эту функцию, вам понадобится:

• Chrome 28 или более поздней версии установлен на вашем компьютере разработки.
• Бета-версия Chrome для Android установлена ​​на вашем устройстве.
• Android Debug Bridge (расширение ADB Chrome или полный Android SDK), установленный на вашем компьютере разработки.

Чтобы использовать обратную переадресацию портов, вам необходимо подключить устройство для удаленной отладки, как описано в разделе «Использование расширения ADB». Затем вам необходимо включить обратную переадресацию портов и добавить правило переадресации портов для вашего приложения.

Сначала включите обратную переадресацию портов:

1. Откройте Chrome на своей машине разработки.
2. В разделе about:flags включите параметр «Включить эксперименты с инструментами разработчика» и перезапустите Chrome.
3. Открыть о: проверить . Вы должны увидеть свое мобильное устройство и список его открытых вкладок.
4. Нажмите ссылку «Проверить» рядом с любым из перечисленных сайтов.
5. В открывшемся окне DevTools откройте панель «Настройки».
6. В разделе «Эксперименты» включите параметр «Включить обратную переадресацию портов» .
7. Закройте окно DevTools и вернитесь к about:inspect .

Затем добавьте правило переадресации портов:

1. Нажмите ссылку «Проверить» еще раз, чтобы открыть DevTools, и снова откройте настройки DevTools.
2. Откройте вкладку «Переадресация портов» .
3. В поле «Порт устройства» введите номер порта, к которому Chrome должен подключиться на вашем устройстве Android (по умолчанию — 8080).
4. В поле «Цель» добавьте номер порта, на котором ваше веб-приложение работает на вашем компьютере разработки.

   

5. В Chrome для Android откройте localhost: , где — это значение, которое вы ввели в поле Порт устройства (по умолчанию — 8080).

Вы должны увидеть контент, обслуживаемый вашей машиной разработки.

Визуализация диаграммы пламени для профилей JavaScript

Новое представление «Пламенная диаграмма» обеспечивает визуальное представление обработки JavaScript с течением времени, аналогично тем, которые находятся на панелях «Временная шкала» и «Сеть».

Горизонтальная ось — время, а вертикальная ось — стек вызовов. В верхней части панели отображается обзор всей записи, и вы можете «увеличить» область обзора, выделив ее мышью, как показано ниже. Временная шкала просмотра подробностей соответственно сокращается.

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

• Имя — Имя функции.
• Время на себя — сколько времени потребовалось для завершения текущего вызова функции, включая только операторы самой функции, не включая функции, которые она вызывала.
• Общее время — время, необходимое для завершения текущего вызова этой функции и всех функций, которые она вызывала.
• Агрегированное собственное время — совокупное время для всех вызовов функции во всей записи, не включая функции, вызванные этой функцией.
• Агрегированное общее время — Агрегированное общее время для всех вызовов функции, включая функции, вызванные этой функцией.

Щелчок по функциональному блоку открывает содержащий его файл JavaScript на панели «Источники» в строке, где определена функция.

Чтобы использовать диаграмму пламени:

1. В DevTools перейдите на вкладку «Профили» .
2. Выберите «Запись профиля ЦП JavaScript» и нажмите «Пуск» .
3. Когда вы закончите сбор данных, нажмите «Стоп» .
4. В представлении профиля выберите визуализацию Пламенная диаграмма .

   

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

Завершают этот обзор революционных достижений в DevTools несколько новых функций для исследования проблем с производительностью:

• Режим непрерывной окраски
• Отображение прямоугольников Paint и границ слоев
• счетчик ФПС
• Нахождение принудительной синхронной раскладки (переработка раскладки)
• Отслеживание размещения объектов

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

Режим непрерывного рисования — это опция в настройках DevTools ( «Визуализация» > «Включить непрерывную перерисовку страницы »), которая помогает определить стоимость рендеринга отдельных элементов или стилей CSS.

Обычно Chrome рисует на экране только в ответ на изменение макета или стиля и только в тех областях экрана, которые требуют обновления. Когда вы включаете непрерывную перерисовку страницы, весь экран постоянно перерисовывается. На проекционном дисплее отображается время, необходимое Chrome для рисования страницы, а также диапазон времени, а также график, показывающий распределение времени последнего рисования. Горизонтальная линия на гистограмме указывает на отметку 16,6 мс.

Преимущество этого использования заключается в том, что вы можете перемещаться по дереву DOM на панели «Элементы» и скрывать отдельные элементы (нажмите клавишу H , чтобы скрыть текущий выбранный элемент) или отключать стили CSS элемента. Вы можете увидеть, сколько времени один элемент или стиль добавляет «вес» рендеринга страницы, если таковой имеется, заметив изменения во времени прорисовки страницы. Если скрытие одного элемента значительно сокращает время рисования, вам следует сосредоточиться на стилизации или конструкции этого элемента.

Чтобы включить режим непрерывной рисования:

1. Откройте настройки DevTools. 1. На вкладке «Общие» в разделе «Визуализация » включите параметр «Включить непрерывную перерисовку страницы» .

Дополнительные сведения см. в разделе «Профилирование длительного времени рисования с помощью режима непрерывной рисования DevTools» .

Отображение прямоугольников краски и границ слоев

Другой вариант в DevTools — показать, в каких прямоугольных областях дисплея происходит рисование. (Настройки > Рендеринг > Показать прямоугольники с краской). Например, на снимке экрана ниже прямоугольник с краской рисуется над областью, где эффект наведения CSS был применен к фиолетовому изображению. Это хорошо, так как это относительно небольшая часть экрана.

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

счетчик ФПС

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

Чтобы отобразить счетчик FPS:

1. Откройте настройки DevTools.
2. Нажмите «Общие» .
3. В разделе «Рендеринг» включите «Принудительное ускорение композиции» и «Показать счетчик FPS» .

Вы можете заставить счетчик FPS всегда появляться, открыв about:flags , включив счетчик FPS и перезапустив Chrome.

Нахождение принудительной синхронной раскладки (переработка раскладки)

Чтобы максимизировать производительность рендеринга, Chrome обычно группирует изменения макета, запрошенные вашим приложением, и планирует проход макета для асинхронного расчета и визуализации запрошенных изменений. Однако если приложение запрашивает значение свойства, зависящего от макета (например, offsetHeight или offsetWidth), Chrome вынужден немедленно и синхронно выполнить макет страницы. Эти так называемые принудительные синхронные макеты могут значительно снизить производительность рендеринга, особенно при многократном выполнении с большими деревьями DOM. Этот сценарий также получил название «изменение макета».

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

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

Дополнительную информацию см. в разделе Демонстрация временной шкалы: Диагностика принудительно синхронных макетов .

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

Отслеживание выделения объектов — это новый тип профиля памяти, который показывает распределение с течением времени. Когда вы начинаете отслеживание распределения, DevTools постоянно создает снимки кучи. Профиль распределения кучи показывает, где создаются объекты, и определяет путь их хранения.

Чтобы отслеживать распределение объектов:

1. В DevTools перейдите на вкладку «Профили» .
2. Выберите «Записать выделение кучи» и нажмите «Пуск» .
3. Когда вы закончите сбор данных, нажмите «Остановить запись профиля кучи» (красный кружок в левом нижнем углу панели профилирования).

Профилирование холста (экспериментальное)

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

Чтобы использовать профилирование холста:

1. Включите функцию проверки холста на вкладке «Эксперименты» в настройках DevTools. (Если вы не видите эту вкладку, откройте about:flags , включите параметр «Включить эксперименты с инструментами разработчика» и перезапустите Chrome.)
2. Откройте вкладку Профили .
3. Выберите «Захватить рамку холста» и нажмите «Сделать снимок» .
4. Теперь вы можете изучить вызовы, используемые для создания рамки холста.