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

Кейси Баски

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

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

Логпоинты

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

См. выпуск 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» .