El Chrome DevTools Protocol (CDP) es un protocolo de depuración remota (API) que permite a los desarrolladores comunicarse con un navegador Chrome en ejecución. Las Herramientas para desarrolladores de Chrome usan CDP para ayudarte a inspeccionar el estado del navegador, controlar su comportamiento y recopilar información de depuración. También puedes crear extensiones de Chrome que usen CDP.
Por ejemplo, este es un comando de CDP que inserta una regla nueva con el ruleText determinado en una hoja de estilo con el styleSheetId determinado, en la posición especificada por location.
{
command: 'CSS.addRule',
parameters: {
styleSheetId: '2',
ruleText:'Example',
location: {
startLine: 1,
startColumn: 1,
endLine: 1,
endColumn: 1
}
}
}
La pestaña del panel Protocol monitor te permite enviar solicitudes del CDP y ver todas las solicitudes y respuestas del CDP que DevTools envía y recibe.
Antes, era difícil crear el comando de forma manual, en especial si tenía muchos parámetros. No solo debías tener en cuenta los corchetes y las comillas de apertura y cierre, sino que también debías recordar los parámetros del comando, lo que, a su vez, te obligaba a consultar la documentación de CDP.
Para resolver este problema, DevTools introdujo un nuevo editor de CDP cuyos objetivos principales son los siguientes:
- Comandos de autocompletado Simplifica la entrada de comandos del CDP proporcionándote la lista de comandos disponibles a través de una función de autocompletado.
- Propaga automáticamente los parámetros del comando. Reduce la necesidad de consultar la documentación de CDP para ver la lista de parámetros de comandos disponibles.
- Simplifica la escritura del parámetro. Solo tienes que completar los valores de los parámetros que deseas enviar.
- Editar y reenviar Mejora la velocidad del prototipado, ya que permite modificar un comando de CDP más rápido.
Ahora, veamos qué ofrece este nuevo editor y cómo puedes usarlo.
Función de autocompletado
Ahora, la barra de entrada de comandos cuenta con una función de autocompletado. Te ayuda a escribir los nombres de los comandos de CDP a los que tienes acceso. Esto puede ser muy útil para los comandos que no aceptan parámetros.
Parámetros de cadena y número
Con este nuevo editor, ahora puedes editar fácilmente los valores de los parámetros primitivos. Para abrir el editor, haz clic en el ícono 
junto a la entrada de comando.
Una vez que ingreses el nombre del comando, el editor te mostrará los parámetros correspondientes automáticamente. No tienes que buscar documentación para saber qué parámetros se usan con qué comandos. Además, el editor muestra los parámetros en un orden determinado: primero los obligatorios (en rojo) y, luego, los opcionales (en azul).
Para agregar un valor a un parámetro opcional, coloca el cursor sobre su nombre y haz clic en el botón +. Para restablecer el parámetro como indefinido, haz clic en el botón Restablecer al valor predeterminado.
Parámetros booleanos y de enumeración
Cuando edites parámetros booleanos o de enumeración, verás un menú desplegable que proporciona una selección de valores posibles (para las enumeraciones) o la opción directa de verdadero o falso para los booleanos. Esta función reduce la posibilidad de escribir el valor incorrecto para los parámetros de enumeración y mantiene la precisión y la simplicidad.
Parámetros de array
En el caso de los parámetros de array, puedes agregar valores al array de forma manual. Coloca el cursor sobre la fila del parámetro y haz clic en el botón +.
Para borrar elementos del array uno por uno, haz clic en el botón de la papelera junto a los elementos. También puedes borrar todos los parámetros del array con el botón de bloqueo. En este caso, el parámetro de array se restablece a [].
Parámetros del objeto
Cuando ingresas un comando que acepta parámetros de objetos, el editor muestra las claves de este objeto y puedes editar sus valores directamente. Esto funciona para todos los tipos de parámetros anidados.
Descubre qué hacen el comando y los parámetros en el editor
¿Alguna vez tuviste dudas sobre el propósito de un parámetro o comando? Ahora, puedes colocar el cursor sobre un comando o parámetro, y aparecerá una sugerencia descriptiva, con un vínculo a la documentación en línea.
Recibir una advertencia antes de enviar parámetros incorrectos
Anteriormente, si no sabías si el valor de un parámetro era del tipo correcto y tenías que esperar para leer la respuesta de error, este nuevo editor es para ti. Te muestra errores en tiempo real si el parámetro no puede aceptar el valor que ingresaste.
Cómo volver a enviar un comando
Si necesitas ajustar un parámetro del comando que acabas de enviar, no tienes que volver a escribirlo. Para editar y volver a enviar el comando, haz clic con el botón derecho en un elemento de la cuadrícula de datos y selecciona Editar y volver a enviar en el menú desplegable. Esto volverá a abrir automáticamente el editor de CDP y lo completará previamente con el comando que seleccionaste.
Cómo copiar un comando en formato JSON
Para copiar el comando de CDP en formato JSON en el portapapeles, haz clic en el ícono de copia 
que se encuentra en el extremo izquierdo de la barra de herramientas. Además, ten en cuenta que, si ingresas un comando directamente en la barra de entrada, se completará el editor sin problemas y viceversa.
Conclusión
El objetivo del equipo de Herramientas para desarrolladores detrás del diseño de este nuevo editor de CDP era simplificar la escritura de comandos de CDP. El nuevo editor también se puede usar para ver los parámetros junto con la documentación y brindarte una forma más sencilla de enviar tus comandos de CDP.
Descarga los canales de vista previa
Considera usar Chrome Canary, Dev o Beta como tu navegador de desarrollo predeterminado. Estos canales de versión preliminar te brindan acceso a las funciones más recientes de DevTools, te permiten probar las APIs de vanguardia de la plataforma web y te ayudan a encontrar problemas en tu sitio antes de que lo hagan tus usuarios.
Comunícate con el equipo de Herramientas para desarrolladores de Chrome
Usa las siguientes opciones para analizar las nuevas funciones, las actualizaciones o cualquier otro tema relacionado con las Herramientas para desarrolladores.
- Envíanos tus comentarios y solicitudes de funciones a crbug.com.
- Informa un problema de Herramientas para desarrolladores con Más opciones > Ayuda > Informar un problema de Herramientas para desarrolladores en Herramientas para desarrolladores.
- Envía un tuit a @ChromeDevTools.
- Deja comentarios en los videos de Novedades de DevTools de YouTube o en los videos de Sugerencias de DevTools de YouTube.