Дайджест DevTools — эффективное редактирование элементов, отладка сервис-воркеров и оттенки дизайна материалов

Используйте новое контекстное меню панели DOM для эффективного редактирования узлов. Отладка сервисов-воркеров напрямую через панель «Ресурсы». Выберите любой из оттенков Material Design в палитре цветов. Библиотеки Blackbox JS проще.

Новое улучшенное контекстное меню панели DOM.

новое контекстное меню DOM.

Мы проанализировали наиболее часто используемые действия на панели DOM и пришли к выводу, что контекстное меню, вызываемое правой кнопкой мыши, должно быть лаконичным и реорганизованным.

Теперь стало гораздо проще быстро скрыть или удалить элемент, вызвать определенное состояние, например :active или :hover, или отредактировать его HTML. А если вы используете трекпад и не хотите щелкать правой кнопкой мыши, вместо этого щелкните три маленькие точки рядом с выбранным элементом.

Отладка сервисных работников через панель «Ресурсы»

Сервисные работники — это просто фантастика, как только вы их настроите, но с ними может быть сложно разобраться на раннем этапе. Ситуация усугублялась тем, что для их отладки требовалось выйти из DevTools и открыть chrome://serviceworker-internals/ в новом окне браузера.

Сервисные работники в ресурсах

Уже нет! Теперь вы можете отлаживать сервис-воркеры для текущего домена прямо с панели «Ресурсы». Работа над этим все еще продолжается, но это уже значительное улучшение по сравнению с предыдущим статус-кво.

Все цвета: оттенки дизайна материала в палитре цветов

Несколько недель назад мы добавили палитру Material Design в палитру цветов, чтобы вы могли сразу же получить основные, смелые цвета. Чтобы создать полную страницу, вам неизбежно понадобится полный доступ ко всем оттенкам Material Design, поэтому мы их включили.

Чтобы отобразить оттенки, нажмите и удерживайте один из основных цветов, а затем нажмите на оттенок.

Библиотеки Blackbox JavaScript стало проще в настройках

JavaScript Blackboxing существует уже давно, но его было нелегко обнаружить. Это функция, которая позволяет вам поместить сценарий в черный ящик на странице, чтобы сосредоточиться только на авторском коде (и скрыть весь код-обертку).

Теперь мы переместили его в Настройки. Попробуйте:

Черный ящик

Лучшее из остальных

  • Отсутствует доступ к переключателям рендеринга? Настройки рендеринга были перенесены в главное меню DevTools (в разделе «Дополнительные инструменты»). В дополнение к обычным подозреваемым (например, счетчику FPS) мы также переместили туда «Эмуляцию печатных СМИ».
  • Устали вводить chrome://inspect в омнибокс? «Проверку устройств» теперь также можно найти в новом главном меню в разделе «Дополнительные инструменты».
  • Случайно закрыли одну из закрывающихся вкладок ящика, например «Рендеринг» или «Поиск»? Теперь вы можете снова открыть их в новом меню слева.

Как всегда, дайте нам знать, что вы думаете, через Twitter или комментарии ниже, а также сообщайте об ошибках на crbug.com/new .

До следующего месяца!
Пол Бакаус и команда DevTools