Узнайте, как DevTools становится мобильным в первую очередь благодаря новому оптимизированному режиму устройства, который всегда включен. Используйте цветные кнопки, чтобы быстро добавлять цвета в селекторы и узнавать, что скоро появится в DevTools.
Взгляд в будущее авторского творчества
Мы только что вернулись с саммита разработчиков Chrome, где я показал вам, как выглядит работа с DevTools сегодня и в будущем. Обычно я не упоминаю в этом дайджесте какие-либо функции, которые все еще являются экспериментами или тяжелыми разработками, но на этот раз я делаю исключение. Если у вас нет времени смотреть выступление целиком, вот суть:
Режим устройства версии 2
Мы все еще активно работаем над этой новой, смелой версией режима устройства , но хотели дать каждому возможность опробовать его, поэтому сегодня включили его в вашу Canary. Благодаря этим изменениям мы продвигаем DevTools в будущее, ориентированное на мобильные устройства, где разработка для мобильных устройств является функцией по умолчанию, а разработка для настольных компьютеров — «надстройкой». Ожидайте новых итераций в течение следующих нескольких недель с расширенной публикацией в блоге, когда мы закончим.
Мощная проверка анимации
Текущая проверка анимации дает вам полную и подробную картину того, что происходит с чем-либо движущимся. Вместо того, чтобы показывать вам переход по одному элементу за раз, мы добавили эвристику, которая группирует сложную анимацию, чтобы вы могли сосредоточиться на всем, что видите. Посмотрите видео. Когда мы будем полностью запущены, мы опубликуем более крупную отдельную публикацию в блоге.
Режим макета (краткий обзор)
Еще не совсем готов к использованию в прайм-тайм, но очень многообещающим является новый режим макета, функция, которую мне не терпится увидеть полностью реализованной. Режим макета добавляет в DevTools возможности редактирования WYSIWYG для любого элемента на странице. На данный момент высоту, ширину, отступы и поля можно редактировать в контексте. Пройдет немного больше времени, прежде чем мы будем готовы позволить вам попробовать, но мы будем держать вас в курсе.
Профилирование производительности с помощью обновленной панели «Таймлайн».
В рамках более масштабного внедрения новой модели производительности RAIL в панель временной шкалы были внесены сотни мелких и крупных изменений, и вместе они значительно трансформируют и улучшают историю профилирования производительности. Поэтому вместо того, чтобы показывать каждое отдельное изменение в отдельности, наш собственный Пол Айриш показал нам, как правильно отлаживать производительность сайта, в данном случае мобильного сайта Hotel Tonight, в прямом эфире. Среди недавно анонсированных функций - видеоролики о нагрузке и производительности , включенный сетевой водопад , сводная информация в виде дерева и возможность просмотра затрат на производительность по доменам и файлам .
Легко добавляйте цвета переднего плана и фона к любому элементу.
Всякий раз, когда вы хотели добавить к элементу свойство цвета фона или цвета, вы не могли просто открыть палитру цветов. Вместо этого большинство из вас вводят что-то вроде «фон: красный»; каждый раз, когда появляется значок выбора цвета, затем выберите нужный цвет.
Мы подумали, что можем упростить это. Мы добавили две изящные кнопки, которые появляются при наведении курсора на правый нижний угол селектора и позволяют добавить цвет и вызвать средство выбора одним щелчком мыши:
Лучшее из остальных
- Мы потратили много места на панели «Стиль», показывая общие типы мультимедиа . Теперь мы скрываем это от ваших селекторов, если это не необычно!
- Теперь вы можете долго наводить курсор на селектор CSS на панели «Стиль», чтобы увидеть, к скольким элементам на странице он применяется.
- Еще не отказались от печати? Эмуляция печатных носителей по-прежнему доступна, чтобы увидеть, как ваша страница будет выглядеть при печати — мы только что перенесли ее в настройки рендеринга.
- При выборе элемента для проверки мы теперь автоматически разворачиваем и закрываем соответствующее поддерево DOM. Трудно объяснить, увидеть значит поверить .
Как всегда, дайте нам знать, что вы думаете, через Twitter или комментарии ниже, а также сообщайте об ошибках на crbug.com/new .
До следующего месяца!
Пол Бакаус и команда DevTools