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

Kayce Basques

Вот что нового в DevTools в Chrome 73.

Видеоверсия этих заметок о выпуске

Точки журнала

Используйте Logpoints для регистрации сообщений в консоли, не загромождая код вызовами console.log() .

Чтобы добавить точку журнала:

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

   

   Рисунок 1. Добавление точки журнала

2. Выберите Добавить точку останова . Откроется редактор точек останова .

   

   Рисунок 2. Редактор точек останова

3. В редакторе точек останова введите выражение, которое вы хотите вывести на консоль.

   

   Рисунок 3. Ввод выражения Logpoint

   Совет! При выводе переменной (например, TodoApp ) из журнала, заключите её в объект (например {TodoApp} ), чтобы вывести её имя и значение в консоль. Подробнее об этом синтаксисе см. в разделах «Всегда регистрировать объекты» и «Сокращенная запись значения свойства объекта» .

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

   

   Рисунок 4. Оранжевый значок Logpoint на строке 174.

При следующем выполнении строки DevTools выведет результат выражения Logpoint на консоль.

Рисунок 5. Результат выражения Logpoint в консоли.

Чтобы сообщить об ошибках или предложить улучшения, ознакомьтесь с проблемой Chromium № 700519 .

Подробные подсказки в режиме проверки

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

Рисунок 6. Проверка узла

Чтобы осмотреть узел:

1. Нажмите «Проверить» . .

   Совет! Наведите курсор на кнопку «Проверить» , чтобы увидеть её сочетание клавиш.

2. В области просмотра наведите указатель мыши на узел.

Экспорт данных о покрытии кода

Данные о покрытии кода теперь можно экспортировать в JSON-файл. JSON-файл выглядит следующим образом:

[
  {
    "url": "https://wndt73.glitch.me/style.css",
    "ranges": [
      {
        "start": 0,
        "end": 21
      },
      {
        "start": 45,
        "end": 67
      }
    ],
    "text": "body { margin: 1em; } figure { padding: 0; } h1 { color: #317EFB; }"
  },
  ...
]

url — URL-адрес файла CSS или JavaScript, который анализировал DevTools. ranges описывает использованные части кода. start — начальное смещение использованного диапазона. end — конечное смещение. text — полный текст файла.

В приведённом выше примере диапазон от 0 до 21 соответствует body { margin: 1em; } , а диапазон от 45 до 67 — h1 { color: #317EFB; } . Другими словами, первый и последний наборы правил были использованы, а средний — нет.

Чтобы проанализировать объем кода, используемого при загрузке страницы, и экспортировать данные:

1. Нажмите Control + Shift + P или Command + Shift + P (Mac), чтобы открыть меню команд.

   

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

2. Начните вводить coverage , выберите «Показать покрытие» и нажмите Enter .

   

   Рисунок 8. Показать покрытие

   Откроется вкладка «Покрытие» .

   

   Рисунок 9. Вкладка «Покрытие»

3. Нажмите «Перезагрузить» . . DevTools перезагружает страницу и записывает объем использованного кода по сравнению с объемом отправленного кода.

4. Нажмите «Экспорт». для экспорта данных в виде файла JSON.

Анализ покрытия кода также доступен в Puppeteer, инструменте автоматизации браузера, поддерживаемом командой DevTools. См. раздел «Покрытие» .

Чтобы сообщить об ошибках или предложить улучшения, ознакомьтесь с проблемой Chromium № 717195 .

Перемещайтесь по консоли с помощью клавиатуры

Теперь вы можете использовать клавиатуру для навигации по консоли. Вот пример.

Нажатие клавиш Shift + Tab выделяет последнее сообщение (или результат вычисления выражения). Если сообщение содержит ссылки, последняя ссылка выделяется первой. Нажатие Enter открывает ссылку в новой вкладке. Нажатие клавиши со стрелкой влево выделяет всё сообщение (см. рисунок 13 ).

Рисунок 11. Фокусировка на ссылке

Нажатие клавиши со стрелкой вверх переводит фокус на следующую ссылку.

Рисунок 12. Фокусировка на другой ссылке

Повторное нажатие клавиши со стрелкой вверх фокусирует все сообщение.

Рисунок 13. Фокусировка всего сообщения

Нажатие клавиши со стрелкой вправо разворачивает свернутый стек трассировки (или объекта, массива и т. д.).

Рисунок 14. Развертывание свёрнутого стека трассировки

Нажатие клавиши со стрелкой влево сворачивает развернутое сообщение или результат.

Чтобы сообщить об ошибках или предложить улучшения, ознакомьтесь с проблемой Chromium № 865674 .

Линия контрастности AAA в палитре цветов

Палитра цветов теперь отображает вторую линию, указывающую, какие цвета соответствуют рекомендации по контрастности AAA . Линия AA присутствует с версии Chrome 65.

Рисунок 15. Линия АА (вверху) и линия ААА (внизу)

Цвета между двумя линиями соответствуют рекомендациям AA, но не AAA. Если цвет соответствует рекомендациям AAA, всё, что находится по ту же сторону от него, также соответствует рекомендациям. Например, на рисунке 15 всё, что находится ниже нижней линии, соответствует рекомендациям AAA, а всё, что находится выше верхней линии, даже не соответствует рекомендациям AA.

Совет! В целом, читабельность страниц можно улучшить, увеличив объём текста, соответствующего рекомендациям AAA. Если по какой-то причине соответствие рекомендациям AAA невозможно, постарайтесь хотя бы соответствовать рекомендациям AA.

Информацию о том, как получить доступ к этой функции, см. в разделе Коэффициент контрастности в палитре цветов .

Чтобы сообщить об ошибках или предложить улучшения, ознакомьтесь с проблемой Chromium № 879856 .

Сохранение пользовательских настроек геолокации

Вкладка «Датчики» теперь позволяет сохранять пользовательские настройки геолокации.

1. Нажмите Control + Shift + P или Command + Shift + P (Mac), чтобы открыть меню команд.

   

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

2. Введите sensors , выберите «Показать датчики» и нажмите Enter . Откроется вкладка «Датчики» .

   

   Рисунок 17. Вкладка «Датчики»

3. В разделе «Геолокация» нажмите «Управление» . Откроется «Настройки» > «Геолокации» .

   

   Рисунок 18. Вкладка «Геолокации» в настройках.

4. Нажмите Добавить местоположение .

5. Введите название местоположения, широту и долготу, затем нажмите «Добавить» .

   

   Рисунок 19. Добавление пользовательской геолокации

Чтобы сообщить об ошибках или предложить улучшения, ознакомьтесь с проблемой Chromium № 649657 .

Сворачивание кода

Панели «Источники» и «Сеть» теперь поддерживают сворачивание кода.

Рисунок 20. Строки 54–65 были сложены.

Чтобы включить сворачивание кода:

1. Нажмите F1 , чтобы открыть Настройки .
2. В разделе Настройки > Предпочтения > Источники включите Сворачивание кода .

Чтобы свернуть блок кода:

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

Чтобы сообщить об ошибках или предложить улучшения, ознакомьтесь с проблемой Chromium № 328431 .

Вкладка «Сообщения»

Вкладка «Фреймы» переименована во вкладку «Сообщения» . Эта вкладка доступна только на панели «Сеть» при проверке подключения через веб-сокет.

Рисунок 21. Вкладка «Сообщения»

Чтобы сообщить об ошибках или предложить улучшения, ознакомьтесь с проблемой Chromium № 802182 .

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

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

Свяжитесь с командой Chrome DevTools

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

• Отправляйте отзывы и предложения по функциям нам на crbug.com .
• Сообщить о проблеме с DevTools можно с помощью функции more_vert Дополнительные параметры > Справка > Сообщить о проблеме с DevTools в DevTools.
• Напишите твит в @ChromeDevTools .
• Оставляйте комментарии в видеороликах YouTube «Что нового в DevTools» или YouTube «Советы по DevTools» .

Что нового в DevTools

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