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

Новые функции и основные изменения, которые появятся в Chrome DevTools в Chrome 71, включают:

Читайте дальше или посмотрите видеоверсию этой страницы:

Наведите курсор на Live Expression, чтобы выделить узел DOM.

Когда Live Expression оценивается как узел DOM, наведите указатель мыши на результат Live Expression, чтобы выделить этот узел в области просмотра.

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

Рисунок 1 . Наведите указатель мыши на результат динамического выражения, чтобы выделить узел в области просмотра.

Храните узлы DOM как глобальные переменные.

Чтобы сохранить узел DOM как глобальную переменную, запустите в консоли выражение, которое возвращает узел, щелкните результат правой кнопкой мыши и выберите «Сохранить как глобальную переменную» .

Сохраните как глобальную переменную в консоли.

Фигура 2 . Хранить как глобальную переменную в консоли

Или щелкните правой кнопкой мыши узел в дереве DOM и выберите «Сохранить как глобальную переменную» .

Сохраните как глобальную переменную в дереве DOM.

Рисунок 3 . Хранить как глобальную переменную в дереве DOM.

Информация об инициаторе и приоритете теперь в импорте и экспорте HAR.

Если вы хотите диагностировать сетевые журналы вместе с коллегами, вы можете экспортировать сетевые запросы в файл HAR .

Экспорт сетевых запросов в файл HAR.

Рисунок 8 . Экспорт сетевых запросов в файл HAR

Чтобы импортировать файл обратно на панель «Сеть», просто перетащите его.

При экспорте файла HAR DevTools теперь включает в файл HAR информацию об инициаторе и приоритете. Когда вы импортируете файлы HAR обратно в DevTools, столбцы «Инициатор» и «Приоритет» теперь заполняются.

Поле _initiator предоставляет дополнительную информацию о том, что послужило причиной запроса ресурса. Это соответствует столбцу «Инициатор» в таблице «Запросы».

Столбец инициатора.

Рисунок 9 . Столбец инициатора

Вы также можете удерживать клавишу Shift и наводить курсор на запрос , чтобы просмотреть его инициатора и зависимости.

Просмотр инициаторов и зависимостей.

Рисунок 10 . Просмотр инициаторов и зависимостей

Поле _priority указывает, какой уровень приоритета браузер назначил ресурсу. Это соответствует столбцу «Приоритет» в таблице «Запросы», который по умолчанию скрыт.

Столбец «Приоритет».

Рисунок 11 . Столбец «Приоритет»

Щелкните правой кнопкой мыши заголовок таблицы «Запросы» и выберите «Приоритет» , чтобы отобразить столбец «Приоритет» .

Как отобразить столбец «Приоритет».

Рисунок 12 . Как отобразить столбец «Приоритет»

Доступ к меню команд из главного меню

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

Командное меню.

Рисунок 13 . Меню команд

Теперь вы можете открыть командное меню из главного меню. Нажмите Главное меню основной кнопку и выберите команду «Выполнить» .

Открытие командного меню из главного меню.

Рисунок 14 . Открытие командного меню из главного меню

Точки останова «картинка в картинке»

«Картинка в картинке» — это новый экспериментальный API, который позволяет странице создавать плавающее видеоокно над рабочим столом.

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

События «картинка в картинке» на панели «Точки останова прослушивателя событий».

Рисунок 16 . События «картинка в картинке» на панели «Точки останова прослушивателя событий»

(Бонусный совет) Запустите MonitorEvents() в консоли, чтобы наблюдать за срабатыванием событий элемента.

Предположим, вы хотите добавить красную рамку вокруг кнопки после фокусировки на ней и нажатия R , E , D , но вы не знаете, к каким событиям добавлять прослушиватели. Используйте monitorEvents() для регистрации всех событий элемента в консоли.

  1. Получите ссылку на узел.

    Использование «Сохранить как глобальную переменную» для получения ссылки на узел.

    Рисунок 17 . Использование Store в качестве глобальной переменной для получения ссылки на узел

  2. Передайте узел в качестве первого аргумента функции monitorEvents() .

    Передача узла в MonitorEvents().

    Рисунок 18 . Передача узла в monitorEvents()

  3. Взаимодействуйте с узлом. DevTools регистрирует все события узла на консоли.

    События узла в Console.

    Рисунок 19 . События узла в консоли

Вызовите unmonitorEvents() , чтобы прекратить регистрацию событий в консоли.

unmonitorEvents(temp1);

Передайте массив в качестве второго аргумента функции monitorEvents() , если вы хотите отслеживать только определенные события или типы событий:

monitorEvents(temp1, ['mouse', 'focus']);

Тип mouse указывает DevTools регистрировать все события, связанные с мышью, такие как mousedown и click . Другими поддерживаемыми типами являются key , touch и control .

Ознакомьтесь с Справочником по командной строке, чтобы узнать о других полезных функциях, которые можно вызвать из консоли.

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

Рассмотрите возможность использования 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