Chrome DevTools Protocol (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, к которым у вас есть доступ. Это может быть очень удобно для команд, не принимающих параметры.
Строковые и числовые параметры
С помощью этого нового редактора вы теперь можете легко редактировать значения параметров примитивов. Чтобы открыть редактор, нажмите кнопку 
значок рядом с полем ввода команды.
После ввода имени команды редактор автоматически отображает соответствующие параметры. Вам не нужно искать в документации, чтобы узнать, какие параметры соответствуют тем или иным командам. Более того, редактор отображает параметры в заданном порядке: сначала обязательные (красным), затем необязательные (синим).
Чтобы добавить значение необязательному параметру, наведите указатель мыши на его имя и нажмите кнопку + . Чтобы сбросить параметр до значения «не определено», нажмите кнопку «Сбросить к значению по умолчанию» .
Перечислимые и логические параметры
При редактировании параметров enum или boolean вы увидите раскрывающееся меню с выбором возможных значений (для enum) или простыми вариантами true или false для boolean. Эта функция снижает вероятность ввода неправильного значения для параметров enum и обеспечивает точность и простоту.
Параметры массива
Для параметров массива вы можете вручную добавлять значения в массив. Наведите указатель мыши на строку параметра и нажмите кнопку + .
Чтобы удалить элементы массива по одному, нажмите кнопку «Корзина» рядом с элементами. Вы также можете удалить все параметры массива с помощью кнопки «Блок». В этом случае параметр массива сбрасывается на [] .
Параметры объекта
При вводе команды, принимающей параметры объекта, редактор выводит список ключей этого объекта, и вы можете напрямую редактировать их значения. Это работает для всех типов вложенных параметров.
Узнайте, что делают команды и параметры в редакторе
Вы когда-нибудь сомневались в назначении параметра или команды? Теперь, наведя курсор на команду или параметр, вы увидите подсказку с описанием и ссылкой на онлайн-документацию.
Будьте предупреждены перед отправкой неверных параметров
Если раньше вы не знали, имеет ли значение параметра правильный тип, и приходилось ждать ответа об ошибке, этот новый редактор вам поможет. Он показывает ошибки в режиме реального времени, если параметр не может принять введённое вами значение.
Повторно отправить команду
Если вам нужно изменить параметр только что отправленной команды, вам не нужно вводить его заново. Чтобы отредактировать и повторно отправить команду, щёлкните правой кнопкой мыши по элементу в таблице данных и выберите «Изменить и повторно отправить» в раскрывающемся меню. Редактор 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 «Советы по DevTools» .