Привет всем! В последнем выпуске DevTools Digest мы познакомились с мощными стеками асинхронных вызовов и некоторыми другими. В этом выпуске мы увидим улучшенную фильтрацию сетевой панели (с автозаполнением), возможности редактирования содержимого Shadow DOM, обновления CodeMirror 4 и многое другое.
Фильтрация сетевой панели
Теперь вы можете фильтровать ресурсы по определенным полям, таким как Домен. Один из форматов фильтра: Domain:website.com
. Помимо фильтрации вы также получаете предложения автозаполнения для допустимых значений фильтра, которые обновляются в реальном времени по мере ввода запроса. Это может оказаться полезным, если вам нужно найти все ресурсы, обслуживаемые определенным доменом. [ crbubg.com/258421 ]
![Фильтрация сетевой панели.](https://developer.chrome.com/static/blog/devtools-digest-chrome-35/image/network-panel-filtering-415c4e7645c4a.png?hl=ru)
Редактировать содержимое Shadow DOM
DevTools всегда имел возможность редактировать обычный HTML-код на панели «Элементы», теперь эти возможности распространяются на элементы, входящие в состав теневого DOM. [ crbug.com/348991 ]
![Редактируйте содержимое Shadow DOM.](https://developer.chrome.com/static/blog/devtools-digest-chrome-35/image/edit-shadow-dom-content-34933d499f339.png?hl=ru)
Обновление до CodeMirror 4.0
CodeMirror, текстовый редактор на основе JavaScript, используемый как часть панели исходного кода, был обновлен до версии 4. В результате этого было добавлено множество новых функций. crbug.com/356878 ]
Быстрый поиск CSS-свойства
Теперь вы можете искать имена свойств, значения или селекторы правил из нового поля поиска на панели «Стили». Результаты выделяются в режиме реального времени по мере ввода запроса. [ crbug.com/278852 ]
![Быстрый поиск CSS-свойства.](https://developer.chrome.com/static/blog/devtools-digest-chrome-35/image/quick-search-a-css-prope-4e0ab9bb3980a.png?hl=ru)
Временные метки рядом с сообщениями консоли
При быстрой последовательной регистрации сообщений может быть полезно увидеть точное время регистрации сообщения. Вы можете включить это с помощью DevTools Experiments. [ crbug.com/131714 ]
![Временные метки рядом с сообщениями консоли.](https://developer.chrome.com/static/blog/devtools-digest-chrome-35/image/timestamps-next-console-daccfe0264007.png?hl=ru)
Разбивка статистики памяти для снимков кучи
При просмотре записанного снимка кучи обратите внимание на круговую диаграмму статистики, которая дает визуальное представление с цветовой кодировкой того, какой аспект JavaScript потребляет больше всего памяти. В настоящее время это экспериментальная функция. Чтобы опробовать ее, включите «Статистика моментальных снимков кучи». [ crbug.com/346335 ]
![Разбивка статистики памяти для снимков кучи.](https://developer.chrome.com/static/blog/devtools-digest-chrome-35/image/memory-statistics-breakdo-66151f9ff9b3d.png?hl=ru)
Просмотр исходного источника 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 ]
На этом пока все, спасибо за внимание!