El protocolo de Chrome DevTools (CDP) es un protocolo de depuración remota (API) que permite que los desarrolladores se comuniquen 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 compilar 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 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 lateral Protocol Monitor te brinda una forma de enviar solicitudes de CDP y ver todas las solicitudes y respuestas de CDP que envía y recibe DevTools.
Anteriormente, era difícil crear el comando de forma manual, en especial, un comando con 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 lleva a buscar la documentación de CDP.
Para resolver este problema, DevTools presentó un nuevo editor de CDP cuyos objetivos principales son los siguientes:
- Comandos de autocompletado: Simplifica la entrada de comandos de CDP proporcionándote la lista de comandos disponibles a través de una función de autocompletar.
- Propaga automáticamente los parámetros del comando. Reduce la necesidad de consultar la documentación de CDP para obtener la lista de parámetros de comandos disponibles.
- Simplifica la escritura del parámetro. Solo debes completar los valores de los parámetros que deseas enviar.
- Editar y reenviar. Mejora la velocidad de 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
La barra de entrada de comandos ahora 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 comandos.
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 van 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 a indefinido, haz clic en el botón Restablecer al valor predeterminado.
Parámetros enumerados y booleanos
Cuando edites parámetros enum o booleanos, verás un menú desplegable que proporciona una selección de valores potenciales (para enums) o la opción directa de verdadero o falso para los booleanos. Esta función reduce la posibilidad de escribir un 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 los 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 del array se restablece a [].
Parámetros de objetos
Cuando ingresas un comando que acepta parámetros de objetos, el editor muestra una lista de 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 te preguntaste cuál es el propósito de un parámetro o comando? Ahora, puedes colocar el cursor sobre un comando o parámetro para que aparezca una herramienta de ayuda descriptiva con un vínculo a la documentación en línea.
Recibirás 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 modificar un parámetro del comando que acabas de enviar, no es necesario que lo vuelvas a escribir. 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. Se volverá a abrir automáticamente el editor de CDP y se completará previamente con el comando que seleccionaste.
Cómo copiar un comando en formato JSON
Para copiar el comando 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 propagará sin problemas en el editor y viceversa.
Conclusión
El objetivo del equipo de DevTools con el diseño de este nuevo editor de CDP era simplificar la escritura de los comandos de CDP. El nuevo editor también se puede usar para ver los parámetros junto con la documentación y para proporcionarte una forma más fácil 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 plataformas web de vanguardia y te ayudan a encontrar problemas en tu sitio antes que tus usuarios.
Comunícate con el equipo de Chrome DevTools
Usa las siguientes opciones para hablar sobre las funciones nuevas, las actualizaciones o cualquier otro tema relacionado con DevTools.
- Envíanos tus comentarios y solicitudes de funciones a crbug.com.
- Informa un problema de DevTools con Más opciones > Ayuda > Informar un problema de DevTools en DevTools.
- Twittea a @ChromeDevTools.
- Deja comentarios en los videos de YouTube sobre las novedades de DevTools o en los videos de YouTube sobre sugerencias de DevTools.