Что нового в DevTools (Chrome 75)

Привет! Вот что нового в Chrome DevTools в Chrome 75.

Видеоверсия этой страницы

Значимые предустановленные значения при автозаполнении функций CSS

Некоторые свойства CSS, такие как filter , принимают функции в качестве значений. Например, filter: blur(1px) добавляет к узлу размытие на 1 пиксель. При автозаполнении таких свойств, как filter , DevTools теперь заполняет свойство значимым значением, чтобы вы могли предварительно просмотреть, какое изменение будет иметь значение в узле.

Старое поведение автозаполнения.

Рисунок 1 . Старое поведение автозаполнения. DevTools автоматически выполняет filter: blur , и в окне просмотра не видно никаких изменений.

Новое поведение автозаполнения.

Фигура 2 . Новое поведение автозаполнения. DevTools автоматически дополняет filter: blur(1px) , и изменение видно в области просмотра.

Соответствующая проблема Chromium: #931145.

Очистите данные сайта из командного меню.

Нажмите Control + Shift + P или Command + Shift + P (Mac), чтобы открыть командное меню, а затем запустите команду «Очистить данные сайта », чтобы удалить все данные, относящиеся к странице, включая: Service Workers , localStorage , sessionStorage , IndexedDB , Web SQL. , файлы cookie , кеш и кеш приложений .

Команда «Очистить данные сайта».

Рисунок 3 . Команда «Очистить данные сайта» .

Очистка данных сайта уже некоторое время доступна в меню «Приложение» > «Очистить хранилище» . Новой функцией Chrome 75 является возможность запуска команды из командного меню.

Если вы не хотите удалять все данные сайта, вы можете контролировать, какие данные будут удалены, в разделе «Приложение» > «Очистить хранилище» .

Вкладка «Приложение» с выбранным параметром «Очистить хранилище».

Рисунок 4 . Приложение > Очистить хранилище .

Соответствующая проблема Chromium: #942503.

Просмотреть все базы данных IndexedDB

Ранее Приложение > IndexedDB позволяло проверять базы данных IndexedDB только из основного источника. Например, если на вашей странице был <iframe> и этот <iframe> использовал IndexedDB, вы не сможете видеть его базы данных. Начиная с Chrome 75, DevTools показывает базы данных IndexedDB для всех источников.

Старое поведение. На страницу встроена демо-версия, использующая IndexedDB, но базы данных не видны.

Рисунок 5 . Старое поведение. На страницу встроена демо-версия, использующая IndexedDB, но базы данных не видны.

Новое поведение. Базы данных демо-версии видны.

Рисунок 6 . Новое поведение. Базы данных демо-версии видны.

Соответствующая проблема Chromium: #943770.

Просмотр несжатого размера ресурса при наведении

Предположим, вы проверяете сетевую активность . Ваш сайт использует сжатие текста , чтобы уменьшить размер передаваемых ресурсов. Вы хотите узнать, насколько велики ресурсы страницы после того, как браузер их распакует. Раньше эта информация была доступна только при использовании больших строк запроса . Теперь вы можете получить доступ к этой информации, наведя курсор на столбец «Размер» .

Наведите указатель мыши на столбец «Размер», чтобы просмотреть несжатый размер ресурса.

Рисунок 7 . Наведите указатель мыши на столбец «Размер», чтобы просмотреть несжатый размер ресурса.

Соответствующая проблема Chromium: #805429.

Встроенные точки останова на панели точек останова

Предположим, вы добавляете точку останова в следующую строку кода:

document.querySelector('#dante').addEventListener('click', logWarning);

Некоторое время DevTools позволял вам указать, когда именно он должен сделать паузу в точке останова, например: в начале строки, перед вызовом document.querySelector('#dante') или перед addEventListener('click', logWarning) называется. Если вы включите все 3, вы по сути создадите 3 точки останова. Ранее панель «Точки останова» не давала возможности управлять этими тремя точками останова по отдельности. Начиная с Chrome 75, каждая встроенная точка останова получает отдельную запись на панели «Точки останова» .

Старое поведение. На панели «Точки останова» есть только одна запись.

Рисунок 8 . Старое поведение. На панели «Точки останова» есть только одна запись.

Новое поведение. На панели «Точки останова» есть 3 записи.

Рисунок 9 . Новое поведение. На панели «Точки останова» есть 3 записи.

Соответствующая проблема Chromium: #927961.

Количество ресурсов IndexedDB и Cache

Панели IndexedDB и Cache теперь показывают общее количество ресурсов в базе данных или кэше.

Общее количество записей в базе данных IndexedDB.

Рисунок 10 . Общее количество записей в базе данных IndexedDB.

Соответствующие проблемы Chromium: #941197 , #930773 , #930865.

Настройка отключения подсказки подробной проверки

В Chrome 73 появились подробные всплывающие подсказки в режиме проверки .

Подробная подсказка.

Рисунок 11 . Подробная подсказка, показывающая цвет, шрифт, поля и контрастность.

Теперь вы можете отключить эти подробные всплывающие подсказки в меню «Настройки » > «Настройки » > «Элементы» > «Показать подсказку подробной проверки» .

Минимальная подсказка.

Рисунок 12 . Минимальная всплывающая подсказка, показывающая только ширину и высоту.

Соответствующая проблема Chromium: #948417.

Настройка переключения отступов табуляции в редакторе панели «Источники»

Тестирование доступности показало, что в редакторе была ловушка табуляции. Когда пользователь клавиатуры входил в редактор , у него не было возможности выйти из него, поскольку клавиша Tab использовалась для отступов. Чтобы переопределить поведение по умолчанию и использовать Tab для перемещения фокуса, включите «Настройки » > «Настройки » > «Источники» > «Включить перемещение фокуса по вкладкам» .

В последнее время было проведено много работы над тем, чтобы сделать пользовательский интерфейс DevTools более удобным для навигации с помощью клавиатуры. Чтобы узнать больше, ознакомьтесь с документацией Роба «Навигация по Chrome DevTools с помощью вспомогательных технологий» .

Загрузите предварительный просмотр каналов

Рассмотрите возможность использования Chrome Canary , Dev или Beta в качестве браузера для разработки по умолчанию. Эти каналы предварительного просмотра дают вам доступ к новейшим функциям DevTools, тестируют передовые API-интерфейсы веб-платформы и находят проблемы на вашем сайте раньше, чем это сделают ваши пользователи!

Связь с командой Chrome DevTools

Используйте следующие параметры, чтобы обсудить новые функции и изменения в публикации или что-либо еще, связанное с DevTools.

Что нового в DevTools

Список всего, что было описано в серии «Что нового в DevTools» .

Хром 123

Хром 122

Хром 121

Хром 120

Хром 119

Хром 118

Хром 117

Хром 116

Хром 115

Хром 114

Хром 113

Хром 112

Хром 111

Хром 110

Хром 109

Хром 108

Хром 107

Хром 106

Хром 105

Хром 104

Хром 103

Хром 102

Хром 101

Хром 100

Хром 99

Хром 98

Хром 97

Хром 96

Хром 95

Хром 94

Хром 93

Хром 92

Хром 91

Хром 90

Хром 89

Хром 88

Хром 87

Хром 86

Хром 85

Хром 84

Хром 83

Хром 82

Chrome 82 был отменен .

Хром 81

Хром 80

Хром 79

Хром 78

Хром 77

Хром 76

Хром 75

Хром 74

Хром 73

Хром 72

Хром 71

Хром 70

Хром 68

Хром 67

Хром 66

Хром 65

Хром 64

Хром 63

Хром 62

Хром 61

Хром 60

Хром 59