Инструменты разработчика Chrome быстро развиваются, и мы хотели обратить ваше внимание на некоторые новые функции и улучшения, которые мы внесли в некоторые компоненты. А именно, мы поговорим о некоторых изменениях пользовательского интерфейса, профилировании JS с высоким разрешением и новых функциях Workspaces.
- Профилирование с высоким разрешением теперь осуществляется с точностью до 0,1 миллисекунды.
- Панели инструментов поднялись наверх Devtools, а Overrides переместились в ящик консоли.
- В Workspaces добавлено несколько функций для поддержки добавления, удаления и поиска файлов.
Профилирование высокого разрешения
Профилирование ЦП — довольно полезная функция, позволяющая оценить эффективность вашего Javascript. В дополнение к традиционным представлениям профиля этим летом мы представили Flame Chart , который визуально отображает обработку Javascript на странице с течением времени. Его можно использовать, чтобы легко просмотреть, насколько глубок ваш стек вызовов, а также сколько времени занимает обработка отдельных функций.
До недавнего времени традиционные представления Heavy (снизу вверх) и Tree (сверху вниз), а также Flame Chart отображали процессы только с точностью до 1 миллисекунды. Для большинства приложений это нормально. Однако, если вы работаете над чем-то, где скорость действительно имеет значение в пользовательском интерфейсе, например, над игрой, разрешение в 1 миллисекунду может оказаться слишком большим, чтобы получить значимые результаты о том, что делает ваш сайт медленным или ваш пользовательский интерфейс кажется тормозящим. Чтобы включить профилирование высокого разрешения (в настоящее время только Canary):
- Откройте настройки DevTools.
- На вкладке «Общие» в разделе «Профилировщик » включите «Профилирование ЦП с высоким разрешением» .
Вот пример Flame Chart, видимый при обычном профилировании и с высоким разрешением, где мы профилируем загрузку домашней страницы HTML5Rocks.com:
При нормальном разрешении профилирования время процесса всегда округляется до следующей миллисекунды, поэтому процесс, который занимает всего 0,1 миллисекунды или меньше, по-прежнему сообщается как занимающий 1,0 миллисекунды, а другие процессы могут вообще не отображаться в стеке вызовов.
Профилирование с высоким разрешением требует больших затрат на виртуальную машину Javascript, поэтому по умолчанию оно отключено. Хотя это, безусловно, выглядит круче, чем обычное разрешение профилирования, мы рекомендуем использовать его только в том случае, если вам действительно нужна точность.
Улучшения пользовательского интерфейса Devtools
Хотя в Canary всегда появляются новые вещи, мы хотели обратить ваше внимание на несколько основных изменений пользовательского интерфейса: кнопки, поднимающиеся в верхнюю часть пользовательского интерфейса в целом, навигационные и информационные панели временной шкалы, а также перемещение переопределений в верхнюю часть пользовательского интерфейса. Консольный ящик.
Во-первых, давайте посмотрим, откуда мы пришли. Поскольку мы все равно говорим о Timeline, я попытаюсь убить первых двух зайцев одной парой скриншотов. Вот как сейчас выглядит временная шкала в Chrome (стабильная версия):
А вот как Timeline выглядит сейчас.
Обратите внимание на следующие вещи:
- Панели инструментов и кнопки теперь находятся в верхней части экрана, как для определенных временных шкал слева, так и для общих DevTools справа.
- Записи временной шкалы теперь имеют структуру вложенности на панели слева, и вы даже можете использовать клавиатуру для их прокрутки. Помимо использования клавиш «вверх» и «вниз» для прокрутки вверх и вниз, вы также можете использовать клавиши «влево» и «вправо» для открытия и закрытия вложенных записей.
- Подробности времени теперь отображаются на панели справа для любой выбранной вами записи. (Вы также можете навести курсор на другие записи, чтобы получить информацию о них.)
Теперь давайте взглянем на ящик консоли. Чтобы открыть ящик консоли, нажмите Escape в DevTools или нажмите кнопку ящика консоли. 
и ящик поднимается снизу.
По умолчанию там будут вкладки «Консоль» и «Поиск» . Чтобы получить доступ к функциям, ранее известным как «Переопределения», откройте настройки DevTools и установите флажок «Показать представление «Эмуляция» в панели консоли». Закройте окно настроек, и в панели консоли появится вкладка «Эмуляция» , как показано на снимке экрана:
И вы можете выполнять всю свою эмуляцию там.
Причина этого изменения заключается в том, что раньше вам приходилось заходить в настройки и выходить из них, чтобы изменить переопределения эмуляции, а затем возвращаться и просматривать свою страницу. Теперь вы можете изменять переопределения эмуляции, продолжая манипулировать стилями.
Улучшенные рабочие пространства
В частности, рабочие пространства — это функция, которая может значительно упростить ваш рабочий процесс разработки, но, тем не менее, она не пользуется такой любовью, как заслуживает. С помощью Workspaces вместо того, чтобы экспериментировать и вносить изменения в DevTools и копировать и вставлять изменения обратно в исходные файлы, вы можете вносить изменения в DevTools, просматривать их в браузере и сохранять их в постоянной локальной версии ваших файлов. - и все это не выходя из Chrome.
Если вы еще не читали статью «Революция инструментов разработчика Chrome 2013» , прочтите ее, а затем вернитесь сюда, чтобы узнать, как мы улучшили эти функции за последние несколько месяцев.
Добавлять файлы проще
Еще во времена статьи Revolutions 2013 для создания нового рабочего пространства требовалось добавить папку в ваши рабочие пространства, а затем сопоставить ее с сетевым ресурсом. Мы упростили этот процесс до одного шага: просто щелкните правой кнопкой мыши на левой панели «Источники» и выберите «Добавить папку в рабочую область ». Вы попадете в диалоговое окно файла, где сможете выбрать новую папку для добавления в рабочие области. (Выделенная в данный момент папка не добавляется в ваши рабочие области.)
Создание и удаление файлов
Теперь вы можете добавлять новые файлы в локальный каталог, который вы используете для рабочих областей, внутри самих рабочих областей. Просто щелкните правой кнопкой мыши папку на левой панели «Источники» и выберите «Новый файл».
Вы также можете удалить файлы из Workspaces. Щелкните правой кнопкой мыши файл на левой панели «Источники» и выберите «Удалить файл».
Вы также можете дублировать файл, выбрав «Дублировать файл» .
Обновить
Теперь, когда вы можете создавать новые файлы (или удалять файлы) непосредственно в рабочих областях, каталог «Источники» также автоматически обновляется и отображает эти новые файлы. Если нет, вы всегда можете щелкнуть папку правой кнопкой мыши и выбрать «Обновить» во всплывающем меню, чтобы принудительно обновить ее.
Это также полезно, если вы изменили файлы, открытые в другом редакторе, и хотите, чтобы изменения отображались в DevTools.
Поиск по файлам
Мы немного усовершенствовали интерфейс поиска по файлам, и теперь вы также можете искать строки во всех файлах в ваших рабочих областях, а также во всех файлах, загруженных в DevTools. Вы можете искать строку или регулярное выражение, и мы сопоставляем каждое вхождение в каждом файле или странице. Чтобы выполнить поиск по нескольким файлам в рабочих областях (в настоящее время в Canary):
- Откройте ящик консоли, нажав клавишу Escape, и щелкните вкладку «Поиск» рядом с «Консоль» , чтобы открыть окно поиска.
ИЛИ
Нажмите Ctrl + Shift + F ( Cmd + Opt + F на Mac), чтобы открыть окно поиска.
- Введите запрос в поле «Источники поиска» и нажмите Enter. Если ваш запрос представляет собой регулярное выражение или не учитывает регистр, установите соответствующий флажок.
Игнорировать списки
Поиск по тексту файлов или фильтрация по именам файлов может оказаться очень утомительным, если у вас есть масса файлов .git или файлов README.md, которые засоряют ваши результаты.
Таким образом, мы добавили функцию списка игнорирования в рабочие области, чтобы вы могли исключать определенные типы файлов или папок при просмотре и поиске в рабочей области.
Вот как вы можете просмотреть и изменить текущий общий список игнорируемых в Workspaces:
- Откройте настройки DevTools.
- Нажмите Рабочая область .
- В разделе «Общие » в поле «Шаблон исключения папки» вы можете просматривать и/или редактировать шаблоны.
Мы поставляем со следующими глобальными шаблонами исключения по умолчанию:
Это регулярное выражение исключает метаданные из Git, SVN, Mercurial, файлы проектов из Eclipse и IntelliJ, файлы OS X DS_Store и Trash, а также некоторые другие вещи, которые стоит игнорировать, например кеш из Sass. Вся их папка, включая все дочерние элементы, исключается из пользовательского интерфейса, чтобы не отображаться в пользовательском интерфейсе и не отображаться при поиске по файлам.
Списки игнорирования для конкретной рабочей области
Чтобы быть более конкретным, вы также можете исключить файлы и папки внутри вашего конкретного рабочего пространства, чтобы уменьшить беспорядок при поиске. Исключенные папки также не будут отображаться в каталоге источников.
Чтобы исключить целую папку из рабочей области, щелкните правой кнопкой мыши папку на левой панели «Источники» и выберите «Исключить папку». Чтобы просмотреть сопоставления и исключенные папки для данной папки рабочей области:
- Откройте настройки инструментов разработчика.
- Нажмите Рабочая область .
- Выделите интересующую вас папку.
- Нажмите « Редактировать» и появится окно «Редактировать файловую систему»; в этом окне вы можете добавлять или удалять сопоставления и/или исключенные папки.
