Протокол Chrome DevTools (CDP) — это протокол удаленной отладки (API), который позволяет разработчикам взаимодействовать с работающим браузером Chrome. Chrome DevTools использует CDP, чтобы помочь вам проверять состояние браузера, контролировать его поведение и собирать отладочную информацию. Вы также можете создавать расширения Chrome, использующие CDP.
Например, это команда CDP, которая вставляет новое правило с заданным ruleText в таблицу стилей с заданным styleSheetId в позицию, указанную в location .
{
command: 'CSS.addRule',
parameters: {
styleSheetId: '2',
ruleText:'Example',
location: {
startLine: 1,
startColumn: 1,
endLine: 1,
endColumn: 1
}
}
}
Вкладка «Монитор протоколов» предоставляет вам возможность отправлять запросы CDP и просматривать все запросы и ответы CDP, которые DevTools отправляет и получает.
Раньше было сложно создать команду вручную, особенно команду с множеством параметров. Вам нужно было не только помнить об открытии и закрытии скобок и кавычек, но и помнить параметры команды, что, в свою очередь, заставляет искать документацию CDP .
Чтобы решить эту проблему, DevTools представила новый редактор CDP, основные цели которого:
- Автозаполнение команд . Упростите ввод команд CDP, предоставив список доступных команд с помощью функции автозаполнения.
- Автоматическое заполнение параметров команды . Уменьшите необходимость проверки документации CDP на предмет списка доступных параметров команды.
- Упростите ввод параметра . Вам просто нужно заполнить значения параметров, которые вы хотите отправить.
- Отредактируйте и отправьте повторно . Увеличьте скорость создания прототипов, ускорив изменение команды CDP.
Теперь давайте посмотрим, что предлагает этот новый редактор и как вы можете его использовать!
Функция автозаполнения
Функция автозаполнения теперь активирует панель ввода команд. Это поможет вам написать имена команд CDP, к которым у вас есть доступ. Это может быть очень удобно для команд, которые не принимают параметры.
Строковые и числовые параметры
С помощью этого нового редактора вы теперь можете легко редактировать значения примитивных параметров. Чтобы открыть редактор, нажмите кнопку 
значок рядом с вводом команды.
Как только вы введете имя команды, редактор автоматически покажет вам соответствующие параметры. Вам не нужно искать документацию, чтобы узнать, какие параметры соответствуют каким командам. Кроме того, редактор отображает параметры в заданном порядке: сначала обязательные (красным цветом), затем необязательные (синим цветом).
Чтобы добавить значение к необязательному параметру, наведите указатель мыши на его имя и нажмите кнопку + . Чтобы сбросить параметр до неопределенного значения, нажмите кнопку «Восстановить значение по умолчанию» .
Перечисления и логические параметры
При редактировании перечисляемых или логических параметров вы увидите раскрывающееся меню, в котором можно выбрать потенциальные значения (для перечислений) или простой параметр true или false для логических значений. Эта функция снижает вероятность ввода неправильного значения для параметров перечисления и сохраняет точность и простоту.
Параметры массива
Для параметров массива вы можете вручную добавлять значения в массив. Наведите курсор на строку параметра и нажмите кнопку + .
Чтобы удалить элементы массива один за другим, нажмите кнопку корзины рядом с элементами. Также можно очистить все параметры из массива кнопкой блокировки. В этом случае параметр массива сбрасывается на [] .
Параметры объекта
Когда вы вводите команду, которая принимает параметры объекта, редактор выводит список ключей этого объекта, и вы можете напрямую редактировать их значения. Это работает для всех типов вложенных параметров.
Узнайте, что делают команды и параметры в редакторе
Были ли вы когда-нибудь не уверены в назначении параметра или команды? Теперь вы можете навести указатель мыши на команду или параметр, и появится всплывающая подсказка со ссылкой на онлайн-документацию.
Будьте предупреждены перед отправкой неверных параметров
Раньше, если вы не знали, имеет ли значение параметра правильный тип, и вам приходилось ждать, чтобы прочитать ответ об ошибке, этот новый редактор для вас. Он показывает вам ошибки в реальном времени, если параметр не может принять введенное вами значение.
Повторно отправить команду
Если вам нужно изменить параметр только что отправленной команды, вам не нужно вводить его снова. Чтобы отредактировать и повторно отправить команду, щелкните правой кнопкой мыши элемент в таблице данных и выберите «Редактировать и повторно отправить» в раскрывающемся меню. Это автоматически снова откроет редактор CDP и заполнит его выбранной вами командой.
Скопируйте команду в формат JSON
Чтобы скопировать команду CDP в формате JSON в буфер обмена, нажмите кнопку 
значок копирования в крайнем левом конце панели инструментов. Кроме того, имейте в виду, что если вы введете команду непосредственно в панель ввода, она автоматически заполнит редактор, и наоборот.
Заключение
Целью команды DevTools, стоящей за разработкой этого нового редактора CDP, было упрощение ввода команд CDP. Новый редактор также можно использовать для просмотра параметров вместе с документацией и для упрощения отправки команд CDP.
Загрузите предварительный просмотр каналов
Рассмотрите возможность использования Chrome Canary , Dev или Beta в качестве браузера для разработки по умолчанию. Эти каналы предварительного просмотра предоставляют вам доступ к новейшим функциям DevTools, позволяют тестировать передовые API-интерфейсы веб-платформы и помогают находить проблемы на вашем сайте раньше, чем это сделают ваши пользователи!
Свяжитесь с командой Chrome DevTools
Используйте следующие параметры, чтобы обсудить новые функции, обновления или что-либо еще, связанное с DevTools.
- Отправляйте нам отзывы и запросы на добавление новых функций на crbug.com .
- Сообщите о проблеме DevTools, используя Дополнительные параметры > Справка > Сообщить о проблеме DevTools в DevTools.
- Напишите в Твиттере @ChromeDevTools .
- Оставляйте комментарии к видеороликам YouTube «Что нового в DevTools» или «Советы разработчика» на YouTube .