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

Kayce Basques

Вот что нового в инструментах разработчика 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 .

Подробные всплывающие подсказки в режиме просмотра.

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

Рисунок 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 , выберите Show Coverage и нажмите Enter .

   

   Рисунок 8. Показать охват

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

   

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

3. Нажмите «Обновить» . . Инструменты разработчика перезагружают страницу и записывают, сколько кода используется по сравнению с тем, сколько кода поставляется в комплекте.

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

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

Для сообщения об ошибках или внесения предложений по улучшению см. проблему Chromium #717195 .

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

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

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

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

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

Рисунок 12. Фокусировка на другом звене.

Повторное нажатие клавиши «Стрелка вверх» выводит всё сообщение целиком.

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

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

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

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

Для сообщения об ошибках или внесения предложений по улучшению см. проблему Chromium #865674 .

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

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

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

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

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

Чтобы узнать, как получить доступ к этой функции, см. раздел «Коэффициент контрастности в палитре цветов» .

Для сообщения об ошибках или внесения предложений по улучшению см. проблему Chromium #879856 .

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

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

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

   

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

2. Введите sensors , выберите Show Sensors и нажмите Enter . Откроется вкладка Sensors .

   

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

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

   

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

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

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

   

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

Для сообщения об ошибках или внесения предложений по улучшению см. проблему Chromium #649657 .

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

Теперь в панелях «Источники» и «Сеть» поддерживается свертывание кода.

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

Для включения свертывания кода:

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

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

1. Наведите курсор мыши на номер строки, с которой начинается блок.
2. Click Fold .

Для сообщения об ошибках или внесения предложений по улучшению см. проблему Chromium #328431 .

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

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

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

Для сообщения об ошибках или внесения предложений по улучшению см. проблему Chromium #802182 .

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

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

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

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

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

Что нового в инструментах разработчика

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