Привет всем! В последнем выпуске DevTools Digest мы познакомились с мощными стеками асинхронных вызовов и некоторыми другими. В этом выпуске мы увидим улучшенную фильтрацию сетевой панели (с автозаполнением), возможности редактирования содержимого Shadow DOM, обновления CodeMirror 4 и многое другое.
Фильтрация сетевой панели
Теперь вы можете фильтровать ресурсы по определенным полям, таким как Домен. Один из форматов фильтра: Domain:website.com . Помимо фильтрации вы также получаете предложения автозаполнения для допустимых значений фильтра, которые обновляются в реальном времени по мере ввода запроса. Это может оказаться полезным, если вам нужно найти все ресурсы, обслуживаемые определенным доменом. [ crbubg.com/258421 ]
Редактировать содержимое Shadow DOM
DevTools всегда имел возможность редактировать обычный HTML-код на панели «Элементы», теперь эти возможности распространяются на элементы, входящие в состав теневого DOM. [ crbug.com/348991 ]
Обновление до CodeMirror 4.0
CodeMirror, текстовый редактор на основе JavaScript, используемый как часть панели исходного кода, был обновлен до версии 4. В результате этого было добавлено множество новых функций. crbug.com/356878 ]
Быстрый поиск CSS-свойства
Теперь вы можете искать имена свойств, значения или селекторы правил из нового поля поиска на панели «Стили». Результаты выделяются в режиме реального времени по мере ввода запроса. [ crbug.com/278852 ]
Временные метки рядом с сообщениями консоли
При быстрой последовательной регистрации сообщений может быть полезно увидеть точное время регистрации сообщения. Вы можете включить это с помощью DevTools Experiments. [ crbug.com/131714 ]
Разбивка статистики памяти для снимков кучи
При просмотре записанного снимка кучи обратите внимание на круговую диаграмму статистики, которая дает визуальное представление с цветовой кодировкой того, какой аспект JavaScript потребляет больше всего памяти. В настоящее время это экспериментальная функция. Чтобы опробовать ее, включите «Статистика моментальных снимков кучи». [ crbug.com/346335 ]
Просмотр исходного источника console.log, а не завернутой версии.
Вероятно, у вас есть функция-оболочка console.log, но, к сожалению, в консоли все ваши сообщения поступают из чего-то вроде util.js:46. Теперь вы можете использовать DevTools для определения исходных местоположений. Введите файл, который упаковывает сообщения журнала консоли, в поле ввода «Пропустить переход через источники с определенными именами», чтобы DevTools поместил его в черный ящик, а затем отобразил истинный источник оператора журнала. [ crbug.com/231007 ]
Еще несколько небольших, но мощных дополнений
Обновите панель «Прослушиватели событий» на панели «Элементы» после динамического добавления или удаления прослушивателей событий JavaScript. [ crbug.com/341044 ]
Вы можете использовать
Ctrl+, чтобы сфокусироваться на вводе с консоли . Это может оказаться полезным для рабочего процесса с клавиатурой в DevTools. [ crbug.com/144943 ]Предложения автозаполнения в стиле рамки для значений (пунктирные, пунктирные, двойные, канавочные) были обновлены в соответствии со спецификацией. [ crbug.com/349998 ]
Кнопка «Восстановить настройки по умолчанию и перезагрузить» ** была добавлена на панель «Настройки», которая выполняет именно то, что указано на упаковке. [ crbug.com/135451 ]
В настоящее время это экспериментальная функция. Вы можете попробовать прикрепить ее слева, чтобы убедиться в ее пригодности для вашего рабочего процесса. Другие режимы макета — прикрепить к главному окну (справа или внизу) и открепить его в отдельном окне. [ crbug.com/134282 ]
« Колесо » теперь предлагается в качестве точки останова прослушивателя событий , в дополнение к обычным событиям click, mousemove, mousedown и т. д. [ crbug.com/347562 ]
На этом пока все, спасибо за внимание!