Что нового в 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, используя дополнительные параметры. > Справка > Сообщить о проблемах DevTools в DevTools.
• Напишите в Твиттере @ChromeDevTools .
• Оставляйте комментарии к нашим видеороликам «Что нового в DevTools на YouTube» или «Советы по DevTools» на YouTube .

Что нового в DevTools

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

Kayce Basques

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

Видео -версия этих заметок о выпуске

Logpoints

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

Чтобы добавить logpoint:

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

   

   Рисунок 1 . Добавление логарифмической точки

2. Выберите добавить logpoint . Редактор Breakpoint появляется.

   

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

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

   

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

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

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

   

   Рисунок 4 . Значок Orange Logpoint на линии 174

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

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

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

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

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

Рисунок 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. Нажмите управление + shift + p или команда + shift + p (mac), чтобы открыть меню команды.

   

   Рисунок 7 . Командование меню

2. Начните напечатать coverage , выберите «Показать покрытие» , а затем нажмите Enter .

   

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

   Откроется вкладка покрытия .

   

   Рисунок 9 . Вкладка покрытия

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

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

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

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

Перейдите по консоли с клавиатурой

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

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

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

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

Рисунок 12 . Фокусируя другую ссылку

Нажатие клавиши стрелки вверх снова фокусирует все сообщение.

Рисунок 13 . Сосредоточение всего сообщения

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

Рисунок 14 . Расширение обезвоженного трассировки стека

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

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

Линия соотношения контрастности AAA в цветовой сборке

Сборщик цветов теперь показывает вторую строчку, чтобы указать, какие цвета соответствуют рекомендации AAA Contrast . Линия АА была там с хрома 65.

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

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

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

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

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

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

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

1. Нажмите управление + shift + p или команда + 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, используя больше вариантов > Помощь > Сообщить о вопросах DevTools в DevTools.
• Твит на @chromedevtools .
• Оставьте комментарии к нашим новому в Devtools YouTube Videos или Devtools Советы на YouTube .

Что нового в Devtools

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