Desarrolla tus comandos del Protocolo de herramientas para desarrolladores de Chrome (CDP) de forma eficiente con el nuevo editor de comandos

El protocolo para Herramientas para desarrolladores de Chrome (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 especificado 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 proporciona una manera de enviar solicitudes de CDP y ver todas las solicitudes y respuestas de CDP y las respuestas que Herramientas para desarrolladores envía y recibe.

La barra de línea de comandos en la parte inferior del monitor de protocolo.

Anteriormente, era difícil elaborar el comando de forma manual, especialmente uno con muchos parámetros. No solo tenías que ser cuidadoso al abrir y cerrar los paréntesis y las comillas, sino que también tenías que recordar los parámetros del comando, lo que, a su vez, te hace buscar en la documentación de CCD.

Para solucionar este problema, Herramientas para desarrolladores presentó un nuevo editor de CDP cuyos objetivos principales son los siguientes:

  • Comandos de la función de autocompletar. Simplifica la entrada de comandos de CDP; para ello, proporciona la lista de comandos disponibles a través de una función de finalización automática.
  • Parámetros del comando de propagación automática Reduce la necesidad de consultar la documentación de CDP para obtener la lista de parámetros de comando disponibles.
  • Simplifica la escritura de parámetros. Solo debes completar los valores de los parámetros que deseas enviar.
  • Edita y vuelve a enviar. Agiliza la modificación de un comando de CDP para mejorar la velocidad de prototipado.

Ahora veamos lo que ofrece este nuevo editor y cómo puedes usarlo.

Función de autocompletado

El menú desplegable de autocompletado

Una función de finalización automática ahora impulsa la barra de entrada de comandos. 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 numéricos y de cadena

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 Abrir el panel izquierdo. junto a la entrada del comando.

Una vez que ingresas el nombre del comando, el editor te muestra automáticamente los parámetros correspondientes. 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: los obligatorios primero (en rojo) y los opcionales siguientes (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 el valor predeterminado.

Los botones + (+) y "Reset to default value" (Restablecer al valor predeterminado).

Parámetros de enumeración y booleanos

Cuando edites los parámetros booleanos o de enumeración, verás un menú desplegable que ofrece una selección de valores potenciales (para enumeraciones) 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 exactitud y simplicidad.

Menús desplegables de enumeración y booleano

Parámetros de array

Para 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 +.

El botón + que agrega un elemento de array.

Para borrar los elementos del array uno por uno, haz clic en el botón de papelera junto a los elementos. También puedes borrar todos los parámetros del array con el botón para bloquear. En este caso, el parámetro del array se restablece a [].

Los botones "Borrar parámetro" y "Restablecer al valor predeterminado"

Parámetros de objeto

Cuando ingresas un comando que acepta parámetros de objeto, el editor enumera las claves de este objeto y puedes editar sus valores directamente. Esto funciona para todos los tipos de parámetros anidados.

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 ventana emergente con información descriptiva y un vínculo a la documentación en línea.

Es la información descriptiva que aparece cuando colocas el cursor sobre un comando.

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. Muestra errores en tiempo real si el parámetro no puede aceptar el valor que ingresaste.

Un ícono de error junto a un parámetro con un valor incorrecto

Volver a enviar un comando

Si necesitas modificar un parámetro del comando que acabas de enviar, no es necesario que vuelvas a escribirlo. Para editar y reenviar el comando, haz clic con el botón derecho en un elemento de la cuadrícula de datos y selecciona Editar y reenviar en el menú desplegable. Se volverá a abrir el editor de CDP automáticamente y se precompletará con el comando que seleccionaste.

El menú desplegable de un comando en la cuadrícula de datos con la opción “Editar y reenviar”.

Copia un comando en formato JSON

Para copiar el comando de CDP en formato JSON al portapapeles, haz clic en el ícono de copiar Copiar. ubicado 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 el editor 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 los comandos de CDP. El nuevo editor también se puede usar para ver parámetros junto con la documentación y proporcionarte una forma más fácil de enviar tus comandos de CDP.

Descarga los canales de vista previa

Considera usar Canary, Dev o Beta de Chrome como tu navegador de desarrollo predeterminado. Estos canales de vista previa te brindan acceso a las funciones más recientes de Herramientas para desarrolladores, prueba APIs de plataformas web de vanguardia y encuentra problemas en tu sitio antes que tus usuarios.

Cómo comunicarse con el equipo de Herramientas para desarrolladores de Chrome

Usa las siguientes opciones para analizar las nuevas funciones y los cambios en la publicación, o cualquier otra cosa relacionada con Herramientas para desarrolladores.

  • Envíanos tus sugerencias o comentarios a través de crbug.com.
  • Informa un problema en Herramientas para desarrolladores mediante Más opciones   Más   > Ayuda > Informar problemas con Herramientas para desarrolladores en Herramientas para desarrolladores.
  • Envía un tweet a @ChromeDevTools.
  • Deja comentarios en los videos de YouTube de las Novedades de las Herramientas para desarrolladores o en las sugerencias de Herramientas para desarrolladores (videos de YouTube).