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

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

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

Имитация мобильных устройств начального и среднего уровня в режиме устройства.

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

Меню регулирования

Рисунок 1 . Меню регулирования

Определения меню регулирования

Фигура 2 . Наведите указатель мыши на меню «Регулирование» или откройте меню «Настройки захвата» , чтобы просмотреть определения мобильных устройств среднего и низкого уровня.

Просмотр использования хранилища

В новом разделе «Использование » на вкладке «Очистить хранилище» панели «Приложение » показано, сколько места использует источник , а также максимальная квота для источника на этом устройстве.

Раздел «Использование»

Рисунок 3 . В разделе «Использование» показано, что https://airhorner.com использует 66,9 КБ из исходной квоты в 15 214 МБ.

Посмотреть, когда сервисный работник кэшировал ответы

Новый столбец «Время кэширования» на вкладке «Хранилище кэша» показывает, когда сервис-воркер кэшировал ответы.

Столбец «Время кэширования»

Рисунок 4 . Столбец «Время кэширования»

Включите счетчик FPS из меню команд.

Теперь вы можете включить счетчик FPS из командного меню .

Включение счетчика FPS из меню команд

Рисунок 5 . Включение счетчика FPS из меню команд

Установите поведение колесика мыши для масштабирования или прокрутки с помощью записей исполнения.

Откройте «Настройки» и установите новый параметр «Действие колесика мыши Flamechart» , чтобы изменить поведение колесика мыши на панели «Производительность» .

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

Настройка «Действие колесика мыши Flamechart»

Рисунок 6 . Настройка действия колеса мыши Flamechart

Поддержка отладки модулей ES6

Модули ES6 изначально поставляются в Chrome 61. В отношении DevTools здесь мало что происходит, за исключением того, что отладка работает так, как и следовало ожидать. Попробуйте установить несколько точек останова и просмотреть реализацию TodoMVC в ES6-модуле Пола Айриша, чтобы убедиться в этом сами.

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

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