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

Кейс Баскс
Kayce Basques
X GitHub

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

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

Точки логирования

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

Чтобы добавить точку регистрации:

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

    Добавление точки журнала

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

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

    Редактор точек останова

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

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

    Ввод выражения Logpoint

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

    Совет! При выходе из переменной (например, TodoApp ), оберните переменную в объект (например {TodoApp} ), чтобы вывести ее имя и значение в Консоль. См. Always Log Objects и Object Property Value Shorthand, чтобы узнать больше об этом синтаксисе.

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

    Оранжевый значок Logpoint на строке 174

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

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

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

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

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

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

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

Проверка узла

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

Чтобы проверить узел:

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

    Совет! Наведите курсор на Inspect , чтобы увидеть сочетание клавиш.

  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 в палитре цветов

Color Picker теперь показывает вторую линию, указывающую, какие цвета соответствуют рекомендации по контрастности 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 .

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Что нового в DevTools

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