Эта страница переведена с помощью Cloud Translation API.

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

Kayce Basques

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

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

Логпоинты

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

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

Щелкните правой кнопкой мыши номер строки, в которую вы хотите добавить точку журнала.
Рисунок 1 . Добавление точки журнала
Выберите Добавить точку журнала . Появится редактор точек останова .
Фигура 2 . Редактор точек останова
В редакторе точек останова введите выражение, которое вы хотите записать в консоль.
Рисунок 3 . Ввод выражения Logpoint
Кончик! При выходе переменной (например, TodoApp ) оберните переменную в объект (например, {TodoApp} ), чтобы вывести ее имя и значение в консоль. Дополнительные сведения об этом синтаксисе см. в разделе «Всегда регистрировать объекты» и «Сокращенное обозначение значения свойства объекта» .
Нажмите Enter или щелкните за пределами редактора точек останова, чтобы сохранить. Оранжевый значок над номером строки представляет собой точку журнала.
Рисунок 4 . Оранжевый значок Logpoint на строке 174.

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

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

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

См. выпуск Chromium #700519, чтобы сообщить об ошибках или предложить улучшения.

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

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

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

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

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

Нажмите «Проверить» . .
Кончик! Наведите курсор на Inspect , чтобы увидеть его сочетание клавиш.
В окне просмотра наведите указатель мыши на узел.

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

Данные о покрытии кода теперь можно экспортировать в виде файла 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; } . Другими словами, использовались первый и последний наборы правил, а средний — нет.

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

Нажмите Control + Shift + P или Command + Shift + P (Mac), чтобы открыть командное меню.
Рисунок 7 . Меню команд
Начните вводить coverage , выберите «Показать покрытие» и нажмите Enter .
Рисунок 8 . Показать покрытие
Откроется вкладка «Покрытие» .
Рисунок 9 . Вкладка «Покрытие»
Нажмите «Обновить». . DevTools перезагружает страницу и записывает, сколько кода используется по сравнению с объемом отправленного кода.
Нажмите «Экспорт». для экспорта данных в виде файла JSON.

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

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

Навигация по консоли с помощью клавиатуры

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

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

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

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

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

Фокус на другой ссылке

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

Повторное нажатие клавиши со стрелкой вверх позволяет выделить все сообщение.

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

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

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

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

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

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

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

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

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

Линия АА (вверху) и линия ААА (внизу)

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

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

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

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

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

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

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

Нажмите Control + Shift + P или Command + Shift + P (Mac), чтобы открыть командное меню.
Рисунок 16 . Меню команд
Введите sensors , выберите «Показать датчики» и нажмите Enter . Откроется вкладка Датчики .
Рисунок 17 . Вкладка «Датчики»
В разделе «Геолокация» нажмите «Управление» . Откроется «Настройки» > «Геолокации» .
Рисунок 18 . Вкладка «Геолокации» в настройках.
Нажмите Добавить местоположение .
Введите название местоположения, широту и долготу, затем нажмите «Добавить» .
Рисунок 19 . Добавление пользовательской геолокации

См. выпуск Chromium #649657, чтобы сообщить об ошибках или предложить улучшения.

Складывание кода

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

Строки с 54 по 65 перевернуты.

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

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

Нажмите F1 , чтобы открыть «Настройки» .
В разделе «Настройки» > «Настройки» > «Источники» включите свертывание кода .

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

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

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

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

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

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

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

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

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

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

Связь с командой Chrome DevTools

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

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