Что нового в 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. Нажмите «Проверить». .

   Кончик! Наведите курсор на 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, чтобы сообщить об ошибках или предложить улучшения.

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

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

Рисунок 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» .