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