En el último trimestre de 2019, el equipo de Herramientas para desarrolladores de Chrome comenzó a mejorar la experiencia de los desarrolladores en relación con las cookies en Herramientas para desarrolladores. Esto era particularmente importante porque Google Chrome y otros navegadores habían comenzado a cambiar el comportamiento predeterminado de las cookies.
Mientras investigamos las herramientas que ya proporciona Herramientas para desarrolladores, con frecuencia nos encontramos en una situación como la siguiente:
### La consola estaba llena de advertencias y mensajes de error, que contenían explicaciones técnicas y, a veces, vínculos a chromestatus.com. Todos los mensajes parecían importantes y dificultaban cuál abordar primero. Lo más importante es que el texto no vinculaba a información adicional dentro de Herramientas para desarrolladores, lo que dificultaba la comprensión de qué sucedió. Por último, a menudo, los mensajes dejaban que el desarrollador web determinara cómo solucionar el problema o, incluso, aprender sobre el contexto técnico.
Si también usas la consola para los mensajes de tu propia aplicación, a veces te resultará difícil encontrarlos entre todos los mensajes del navegador.
Al igual que las personas, también es difícil para los procesos automatizados interactuar con los mensajes de la consola. Por ejemplo, los desarrolladores pueden usar Chrome Headless y Puppeteer en una situación de integración continua/implementación continua. Debido a que los mensajes de la consola son solo cadenas, los desarrolladores deben escribir expresiones regulares o algún otro analizador para extraer información procesable.
La solución: informes de problemas estructurados y prácticos
Para encontrar una mejor solución a los problemas que descubrimos, primero comenzamos a pensar en los requisitos y los recopilamos en un documento de diseño.
Nuestro objetivo es presentar los problemas de una manera que explique el problema de manera clara y cómo solucionarlo. A partir de nuestro proceso de diseño, nos dimos cuenta de que cada problema debía contener las siguientes cuatro partes:
- Título
- Descripción
- Vínculos a recursos afectados en Herramientas para desarrolladores
- Y un vínculo para obtener más orientación
Para el título, queremos que sea breve y preciso para ayudar a los desarrolladores a comprender el problema principal y que, con frecuencia, brinde sugerencias para solucionarlos. Por ejemplo, un problema de cookies ahora solo dice lo siguiente:
Marca las cookies entre sitios como seguras para permitirlas configurarlas en contextos de varios sitios
Cada problema contiene información más detallada en una descripción, que explica qué sucedió, ofrece sugerencias útiles para solucionarlo y vínculos a otros paneles de Herramientas para desarrolladores para comprender el problema en contexto. También proporcionamos vínculos a artículos detallados en web.dev para permitir que los desarrolladores web obtengan información sobre el tema con mayor detalle.
Una parte importante de cada problema es la sección de recursos afectados, que vincula a otras partes de Herramientas para desarrolladores y facilita la investigación más detallada. Para el ejemplo del problema de las cookies, debería haber una lista de solicitudes de red que activaron el problema y, si haces clic en la solicitud, accederás directamente al panel Network. Esperamos que esto no solo sea conveniente, sino que también refuerce qué paneles y herramientas de Herramientas para desarrolladores se pueden usar para depurar cierto tipo de problema.
Si pensamos en la interacción de los desarrolladores con la pestaña Problemas a largo plazo, imaginamos la siguiente evolución de la interacción con los desarrolladores:
- Cuando un desarrollador web detecta un problema específico por primera vez, lee el artículo para comprenderlo en profundidad.
- Cuando encontramos el problema por segunda vez, esperamos que la descripción sea suficiente para recordarle al desarrollador de qué se trata el problema y permitirle investigar de inmediato y tomar medidas para resolverlo.
- Después de encontrar un problema un par de veces, esperamos que el título sea suficiente para que un desarrollador reconozca el tipo de inconveniente.
Otro aspecto importante que queremos mejorar es la agregación. Por ejemplo, si la misma cookie causó el mismo problema varias veces, queríamos informar la cookie solo una vez. Además de reducir considerablemente la cantidad de mensajes, esto suele ayudar a identificar la causa raíz de un problema con mayor rapidez.
La implementación
Con esos requisitos en mente, el equipo comenzó a analizar cómo implementar la nueva función. Los proyectos para las Herramientas para desarrolladores de Chrome suelen abarcar tres áreas diferentes:
- Chromium, el proyecto de código abierto escrito en C++ detrás de Google Chrome
- Frontend de Herramientas para desarrolladores, la implementación de JavaScript de las Herramientas para desarrolladores de Chrome
- El Protocolo para Herramientas para desarrolladores de Chrome (CDP), la capa que conecta ambos
Luego, la implementación constaba de tres tareas:
- Dentro de Chromium, tuvimos que identificar los componentes que contienen la información que queremos mostrar y hacer que el protocolo de Herramientas para desarrolladores pueda acceder a esa información sin comprometer la velocidad ni la seguridad.
- Luego, tuvimos que diseñar el protocolo para Herramientas para desarrolladores de Chrome (CDP) a fin de definir la API que exponía la información a los clientes, como el frontend de Herramientas para desarrolladores.
- Por último, tuvimos que implementar un componente en el frontend de Herramientas para desarrolladores que solicite la información del navegador a través de CDP y la muestre en una IU adecuada, de modo que los desarrolladores puedan interpretar la información y, también, interactuar con ella con facilidad.
En cuanto al navegador, primero analizamos cómo se manejaban los mensajes de la consola, porque su comportamiento es muy similar al que teníamos en mente para los problemas. CodeSearch suele ser un buen punto de partida para exploraciones como estas. Te permite buscar y explorar todo el código fuente del proyecto Chromium en línea. De esa manera, aprendimos sobre la implementación de los mensajes de la consola y pudimos crear una forma paralela, pero más estructurada, de los requisitos que recopilamos para los problemas.
El trabajo aquí es particularmente desafiante debido a todas las implicaciones de seguridad que siempre tenemos que tener en cuenta. El proyecto Chromium ayuda mucho a separar las cosas en diferentes procesos y hacer que solo se comuniquen a través de canales de comunicación controlados para evitar filtraciones de información. Los problemas pueden contener información sensible, por lo que debemos tener cuidado de no enviarla a una parte del navegador que no deba estar al tanto de ella.
En el frontend de Herramientas para desarrolladores
DevTools es una aplicación web escrita en JavaScript y CSS. Se parece mucho a muchas otras aplicaciones web, con la excepción de que existe desde hace más de 10 años. Y, por supuesto, su backend es básicamente un canal de comunicación directo con el navegador: el protocolo de Herramientas para desarrolladores de Chrome.
Para la pestaña Problemas, primero pensamos en las historias de usuario y qué tendrían que hacer los desarrolladores para resolver un problema. En su mayoría, nuestras ideas evolucionaron en torno a tener la pestaña Problemas como punto de partida central para las investigaciones que vinculaban a las personas con los paneles que mostraban información más detallada. Decidimos colocar la pestaña de problemas junto con las demás en la parte inferior de Herramientas para desarrolladores para que pueda permanecer abierta mientras un desarrollador interactúa con otro componente de Herramientas para desarrolladores, como la red o el panel Aplicación.
Con eso en mente, nuestro diseñador de UX comprendió cuál era nuestro objetivo y creó un prototipo de las siguientes propuestas iniciales:
Después de mucho debate sobre cuál era la mejor solución, comenzamos a implementar el diseño y a reiterar decisiones para llegar gradualmente a cómo se ve la pestaña Problemas actualmente.
Otro factor muy importante fue la descubrimiento de la pestaña Problemas. En el pasado, muchas funciones excelentes de Herramientas para desarrolladores no eran detectables sin que el desarrollador supiera qué buscar específicamente. En el caso de la pestaña Problemas, decidimos destacar problemas en varias áreas diferentes para asegurarnos de que los desarrolladores no se pierdan problemas importantes.
Decidimos agregar una notificación al panel de la consola porque se quitaron algunos mensajes de la consola para dar lugar a problemas. También agregamos un ícono al contador de advertencias y errores en la parte superior derecha de la ventana de Herramientas para desarrolladores.
Por último, la pestaña de los problemas no solo vincula a otros paneles de Herramientas para desarrolladores, sino que los recursos que están relacionados con un problema también se vinculan a la pestaña de problemas.
En el protocolo
La comunicación entre el frontend y el backend funciona mediante un protocolo llamado Protocolo de Herramientas para desarrolladores de Chromium (CDP). La CDP se puede considerar como el backend de la aplicación web que es Herramientas para desarrolladores de Chrome. El CDP se subdivide en varios dominios, y cada dominio contiene una serie de comandos y eventos.
En el caso de la pestaña Problemas, decidimos agregar un evento nuevo al dominio de auditorías que se activa cada vez que se encuentra un problema nuevo. Para garantizar que también podamos informar los problemas que surgen cuando Herramientas para desarrolladores aún no está abierto, el dominio de auditorías almacena los problemas más recientes y los envía tan pronto como se conecta a Herramientas para desarrolladores. Luego, Herramientas para desarrolladores recopila todos esos problemas y los agrega.
El CDP también permite que otros clientes de protocolo, como Puppeteer, reciban y procesen problemas. Esperamos que la información estructurada de problemas que se envía a través del CDP permita y simplifique la integración en la infraestructura de integración continua existente. De esta manera, los problemas se pueden detectar y corregir incluso antes de que se implemente la página.
Perfil
En primer lugar, se deben pasar muchos más mensajes de la consola a la pestaña Problemas. Esto llevará algo de tiempo, en especial porque queremos proporcionar documentación clara y práctica para cada problema nuevo que agregamos. Esperamos que, en el futuro, los desarrolladores busquen problemas en la pestaña de problemas en lugar de hacerlo en la consola.
Además, estamos pensando en cómo integrar en la pestaña Problemas los problemas de otras fuentes además del backend de Chromium.
Estamos buscando formas de mantener ordenada la pestaña Problemas y mejorar la usabilidad. Las funciones de búsqueda, filtrado y mejor agregación se encuentran en nuestra lista de este año. Para estructurar la cantidad cada vez mayor de problemas informados, estamos en proceso de presentar categorías de problemas que, por ejemplo, permitirían mostrar solo aquellos problemas relacionados con las próximas bajas. También estamos pensando en agregar una función para posponer, que los desarrolladores puedan usar para ocultar problemas de forma temporal.
Para que los problemas sigan siendo prácticos, queremos que sea más fácil descubrir qué parte de la página activó un problema. En particular, estamos pensando en formas de distinguir y filtrar los problemas que son genuinamente de tu página (es decir, los propios) de aquellos que son activados por los recursos que incorporas, pero que no están directamente bajo tu control (como una red de publicidad). En primer lugar, se podrán ocultar los problemas de cookies de terceros en Chrome 86.
Si tienes alguna sugerencia para mejorar la pestaña Problemas, informa un error.
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
> 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).