Это был богатый функциями месяц в Chrome Canary. Читайте дальше, чтобы узнать, какие сторонние сценарии вызывают проблемы с производительностью на вашем сайте с помощью агрегированных сведений на временной шкале , как выбрать согласованные цвета с новой цветовой палитрой , как имитировать конференцию Wi-Fi с помощью настраиваемых сетевых профилей и как получить больше от DevTools. Пользовательский интерфейс с новым главным меню и улучшенными подсказками .
Лучше винить в проблемах с производительностью: агрегированные подробности на временной шкале
На сегодняшних веб-сайтах мы используем все больше и больше маячков, аналитических, социальных, сервисов загрузки шрифтов и рекламных услуг третьих сторон, иногда даже слишком много . Чтобы этого не произошло и чтобы вы могли лучше понять проблему, мы добавляем на временную шкалу агрегированные сведения.
На вкладке «Агрегированные сведения» вы можете сосредоточиться только на дорогостоящих функциях или на всем дереве вызовов, а затем разбить выбранные данные по доменам, поддоменам или отдельным URL-адресам. Например, на приведенной выше временной шкале загрузки страницы вы теперь можете легко связать замедление работы со сторонними сценариями, исходящими из таких доменов, как facebook.net или twitter.com.
Новое специальное главное меню.
Чтобы упростить основную панель инструментов, мы переместили ящик, настройки и значки закрепления в новое специальное главное меню.
В частности, стыковка стала намного проще. Вместо того, чтобы долго нажимать на предыдущий значок, каждое положение стыковки имеет свой собственный значок.
Помимо закрепления, мы добавили быстрый доступ к поиску файлов, ярлыкам и справке (которая ведет на нашу новую домашнюю страницу ).
Откройте для себя DevTools с помощью улучшенных всплывающих подсказок
В DevTools имеется множество кнопок, и мы знаем, что не все из них говорят сами за себя. Теперь мы упростили поиск действий и их ярлыков, заменив встроенные системные подсказки на пользовательские, совместимые с платформой.
Новые всплывающие подсказки появляются гораздо быстрее и включают сочетания клавиш (если они есть).
Создание пользовательских профилей регулирования сети
Если параметры сетевого дросселя по умолчанию слишком ограничены для ваших вариантов использования, и вам нужна опция «Конференция Wi-Fi» или ради ностальгии вы хотите пойти по старой школе и эмулировать линию «110 бод» , у меня есть хороший вариант. новости для вас. Мы добавили новую панель настроек, которая позволяет вам делать любые из этих действий.
Автоматические, Материальные и пользовательские цветовые палитры
Хотите ли вы воссоздать волшебные цвета или поработать с существующей цветовой палитрой , улучшенная палитра цветов поможет вам выбрать согласованную цветовую палитру для вашего сайта.
Нажав на маленький значок переключателя рядом с палитрой, вы можете выбрать один из следующих вариантов:
- Цвета страницы . Эта палитра автоматически генерируется на основе цветов, которые мы находим в вашем CSS, что делает ее отличным вариантом, если вы расширяете существующий сайт.
- Material Design . Палитра Material Design предлагает красивые цвета прямо из коробки и является идеальным выбором при запуске нового проекта. Прямо сейчас вы найдете все основные цвета, но скоро мы добавим все оттенки.
- Custom — это ваша собственная игровая площадка. Добавьте новые цвета, выбрав один из палитры, затем щелкните значок «плюс» рядом с палитрой. Измените порядок, перетащив их, и щелкните правой кнопкой мыши, чтобы открыть дополнительные параметры, например удалить.
Расскажите нам, что вы думаете , и как мы могли бы расширить историю цветов дальше.
Лучшее из остальных
- Запросы, сделанные с использованием API fetch(), теперь отображаются на панели «Сеть».
- Автоматическое расположение панелей гарантирует, что при изменении размера DevTools
панели адаптируются к новым ограничениям пространства. - Режим проверки элемента и устройства имеет набор новых значков.
- Атрибуты на панели DOM теперь окрашены в разные цвета, даже если узел выделен. (Раньше они были все белые.)
- Скрытые элементы (активируемые нажатием «h» на выбранном узле DOM) теперь показывают индикатор серого кружка слева, а точки останова DOM делают то же самое с синим кружком. (Это аналог оранжевых индикаторов, которые у нас уже есть для принудительного изменения состояния элемента, например :hover).
Как всегда, дайте нам знать, что вы думаете, через Twitter или комментарии ниже, а также сообщайте об ошибках на crbug.com/new .
До следующего месяца!
Пол Бакаус и команда DevTools