Новости DevTools, самые свежие
Первая новость в этом посте — небольшая мета — это само обновление! Время от времени, но не реже одного раза в месяц, я суммирую то, что происходит в мире Chrome DevTools, только что из прессы.
И когда я говорю «свежий», я имею в виду именно это: я расскажу о новых функциях, которые только что появились в Chrome Canary , так что, если вы предпочитаете оставаться на стабильной земле, это тоже круто. Но если вы любите приключения и хотите оставаться на вершине, эти посты для вас. Помимо последних функций и исправлений ошибок, в конце каждого сообщения вы найдете раздел «Сердцебиение сообщества» , в котором рассказывается о самом большом вкладе, который вы, наши любимые пользователи, внесли.
Без лишних слов, давайте погрузимся в актуальные новости.
Новое в DevTools
Скриншоты в виде кинопленки в сети и временной шкале
Всего неделю назад мы исключили из экспериментов важную новую функцию: возможность делать снимки экрана страницы как на вкладке «Сеть», так и на вкладке «Временная шкала».
На панели «Сеть» нажмите маленький значок камеры, чтобы включить захват кадров, затем перезагрузите страницу, чтобы запустить захват. За исключением снимков экрана, сделанных с помощью других инструментов, таких как WebPageTest , в настоящее время мы показываем только кадры, которые на самом деле были созданы при рисовании.
При двойном щелчке по одному из кадров отображается увеличенное изображение (затем используйте стрелки влево/вправо для навигации), при наведении на него отображаются линии на панели и временной шкале, чтобы визуализировать, когда именно был захвачен кадр, что позволяет коррелировать с нагрузкой. последовательность. Это значительно упрощает отладку распространенных проблем с загрузкой, таких как веб-шрифты, блокирующие рендеринг.
На панели «Таймлайн» вы можете включить захват снимков экрана, установив флажок «Снимки экрана» на верхней панели инструментов. Здесь все работает немного по-другому, по сравнению с панелью «Сеть». В этом случае мы стараемся снимать как можно чаще – независимо от фактической отрисовки – чтобы иметь возможность размещать указанные снимки экрана в линейной временной шкале, которая коррелирует с другими строками в Хронология. Вместо того, чтобы дважды щелкнуть мышью, чтобы отобразить предварительный просмотр, увеличенные кадры появляются при наведении курсора мыши.
Поскольку эти две функции немного не синхронизированы с точки зрения функциональности и пользовательского опыта, мы хотели бы призвать вас опробовать эту функцию (функции) и оставить любую обратную связь, которая у вас есть, через тикеты на crbug.com/new или через твит на @ ChromeDevTools .
Регулирование сети на панели «Сеть»
Регулирование сети — функция, которую мы добавили при представлении режима устройства , — нашла свое второе место на панели инструментов панели «Сеть», так что вы можете сосредоточиться на оптимизации сети в одном месте.
Однако этот новый дом — всего лишь зеркало: он по-прежнему доступен вне режима устройства, поскольку имитация плохого подключения по-прежнему очень важна при работе над адаптивностью вашего сайта.
Наконец, вы один из тех бедняг, которые задавались вопросом, почему ваше интернет-соединение прервалось после долгого рабочего дня, только чтобы обнаружить, что вы забыли отключить регулирование сети? На вкладке панели «Сеть» теперь отображается значок предупреждения, когда включено регулирование сети.
Различные лакомые кусочки
- Ненавидели эти странные круги на временной шкале в сети? Мы тоже. Это моменты времени, когда был снят кадр (в новой киноленте). Теперь они отображаются в виде линий при наведении курсора .
- Режим устройства теперь сохраняет ориентацию при переключении между устройствами.
Сердцебиение сообщества
Вниз и грязно с Chrome DevTools
Брет Литтл выпустил этот симпатичный небольшой пошаговый курс , который знакомит вас с базовыми функциями DevTools, а также предлагает множество подробных советов и рекомендаций. Там определенно полезная информация, а дополнительная документация по DevTools никогда не помешает!
IDE DevTools…?!
Кеннет Оукенберг, веб-разработчик и поклонник DevTools, несколько месяцев назад разработал автономное приложение DevTools для проверки концепции, и каким-то образом его сообщение в блоге снова сделало (хакерскую) новость на этой неделе.
Превращение DevTools в полноценную IDE — забавная идея, о которой раньше мечтали многие члены нашей команды, но это также будет проект эпических масштабов.
Что вы думаете? Является ли DevTools IDE несбыточной мечтой или вы видите, что она сработает? Как это должно выглядеть? Дайте нам знать в комментариях!
До скорой встречи!
Пол Бакаус и команда DevTools