В последнее время в Chrome DevTools появился ряд обновленных функций: некоторые маленькие, некоторые большие. Мы начнем с обновлений панели «Элемент» и перейдем к разговору о консоли, временной шкале и многом другом.
Отключенные правила стиля копируются как закомментированные.
Копирование всех правил CSS на панели «Стили» теперь будет включать отключенные вами стили, они будут существовать в буфере обмена как закомментированные. [ crbug.com/316532 ]
Скопировать как путь CSS
«Копировать как путь CSS» теперь доступен в качестве пункта меню для узлов DOM на панели «Элементы» (аналогично пункту меню «Копировать XPath»).
Создание селекторов CSS не обязательно должно ограничиваться вашими таблицами стилей/JavaScript, они также могут быть альтернативой стратегиям локатора в тестах WebDriver . [ crbug.com/277286 ]
Просмотр стилей элементов Shadow DOM
Дочерние элементы теневого корня теперь могут проверять свои стили. [ crbug.com/279390 ]
Консольная копия() работает для объектов
Метод copy() из API командной строки теперь работает для объектов. Попробуйте copy({foo:'bar'}) на панель консоли и обратите внимание, что строковая и отформатированная версия объекта теперь находится в вашем буфере обмена. [ crbug.com/289348 ]
Фильтр регулярных выражений для консоли
Фильтруйте сообщения консоли с помощью регулярных выражений на панели «Консоль». crbug.com/318308 ]
Легко удалять прослушиватели событий
Попробуйте getEventListeners(document).mousewheel[0]; на панели «Консоль», чтобы получить первый прослушиватель событий колеса мыши в документе. Продолжая это, попробуйте $_.remove() ; чтобы удалить этот прослушиватель событий ( $_ = значение последнего вычисленного выражения). crbug.com/309524 ]
Удаление предупреждений CSS
Предупреждения в стиле « Недопустимое значение свойства CSS », которые вы могли видеть, теперь удалены. Продолжаются попытки сделать реализацию более устойчивой к реальному CSS, включая взломы браузеров. crbug.com/309982 ]
Операции на временной шкале представлены в виде круговой диаграммы
Панель «Временная шкала» теперь содержит круговую диаграмму на панели «Сведения», которая визуально показывает источник затрат на рендеринг — это поможет вам сразу определить узкие места.
Вы обнаружите, что большая часть информации, которая раньше отображалась во всплывающих окнах, теперь вынесена на отдельную панель. Для просмотра запустите запись временной шкалы и выберите кадр. Обратите внимание на новую панель сведений, содержащую круговую диаграмму. В режиме просмотра «Кадры» вы получите интересную статистику, например, средний FPS ( 1000ms/frame duration ) для выбранных кадров. [ crbug.com/247786 ]
Подробности о событии по изменению размера изображения
События изменения размера изображения и декодирования на панели «Таймлайн» теперь содержат ссылку на узел DOM на панели «Элементы».
Ссылка на URL-адрес изображения приведет вас к соответствующему ресурсу на панели ресурсов. crbug.com/244159 ]
Кадры графического процессора
Кадры, происходящие на графическом процессоре, теперь отображаются вверху, над кадрами основного потока. crbug.com/305863 ]
Перерыв на слушателях popstate
«popstate» теперь доступен в качестве точки останова прослушивателя событий на боковой панели панели «Источники». [ crbug.com/88112 ]
Настройки рендеринга доступны в ящике
При открытии ящика теперь отображается несколько панелей, одна из которых — панель «Рендеринг». Используйте ее для отображения прямоугольников рисования, счетчика FPS и т. д. Это включено по умолчанию в «Настройки» > «Показать представление «Рендеринг» в ящике консоли».
Скопировать изображение как URL-адрес данных
Содержимое ресурсов изображений на панели «Ресурсы» теперь можно скопировать как URI данных ( data:image/png;base64,iVBO... ).
Чтобы попробовать это, найдите ресурс изображения в разделе «Кадры» > [Ресурс] > «Изображения» и щелкните правой кнопкой мыши на предварительном просмотре изображения, чтобы получить доступ к контекстному меню, затем выберите «Копировать изображение как URL-адрес данных». crbug.com/321132 ]
Фильтрация URI данных
Если вы никогда не думали, что они принадлежат друг другу, URI данных теперь можно отфильтровать на вкладке «Сеть». Выберите значок «Фильтр» 
Исправлены ошибки синхронизации сети.
Если вы видели, что ваше изображение загружалось 300 000 лет, приносим извинения. ;) Эти неправильные тайминги для сетевых ресурсов теперь исправлены. crbug.com/309570 ]
Поведение сетевой записи имеет больше контроля
Поведение сети записи немного отличается. Во-первых, кнопка записи действует так же, как и следовало ожидать от временной шкалы или профиля ЦП. И, как и следовало ожидать, если вы перезагрузите страницу, когда DevTools открыт, сетевая запись начнется автоматически. Затем он выключится, поэтому, если вы хотите отслеживать сетевую активность после загрузки страницы, включите его. Это упрощает визуализацию водопада без того, чтобы поздние сетевые запросы не искажали результаты. crbug.com/325878 ]
Темы DevTools теперь доступны через расширения
Таблицы пользовательских стилей теперь доступны через DevTools Experiments (флажок «Разрешить пользовательские темы пользовательского интерфейса»), что позволяет расширению Chrome применять собственные стили к DevTools. Пример см. в разделе «Пример расширения темы DevTools» . crbug.com/318566 ]
На этом выпуск дайджеста DevTools закончен. Если вы еще этого не сделали, ознакомьтесь с ноябрьским выпуском.