De la Fricción al Flujo: Depuración con Chrome DevTools

Oh, mi navegador se congeló. Permíteme simplemente actualizar eso, hacerlo de nuevo. Haz eso. De acuerdo. De acuerdo. Todo el navegador se congeló. Sabes, esto es hacer una demostración en vivo en el escenario. Genial. Abriré una nueva pestaña en él. De acuerdo. Por cierto, estoy usando Chrome Canary. Esto es de vanguardia. Sí. Por eso es lo que significa estar a la vanguardia. De acuerdo. Permíteme abrir esto. De acuerdo. Genial. Entonces quieres depurar esto. Si intentas hacer clic en este icono e intentas inspeccionarlo, ¿ves? Eso desapareció. ¿Cuántos de ustedes han enfrentado este escenario antes? De acuerdo. La forma en que puedes hacer esto, tal vez cambies tu código, o tal vez inyectes un tiempo de espera, no sé cuántos segundos, para que puedas realizar la acción rápidamente y luego volver al flujo. Entonces, esta función en DevTools que existe probablemente desde hace cinco o seis años, pero nadie la descubrió. Pero recientemente, hicimos algo bueno. Lo hicimos ligeramente visible. Ahora, si vas al panel de Elementos, a la pestaña Estilos, si haces clic en este botón de reloj, hay esta función llamada Emular la página enfocada. Si haces clic en eso, ahora puedes inspeccionarlo. Y esta casilla de verificación en sí misma es una configuración global. Puedes activarla y nunca desactivarla. De acuerdo.

¿Es útil? Si es útil, aplaudan. ¿Sí? De acuerdo. Ahora podrías preguntar, ¿por qué se llama emular una página enfocada? Al leer el nombre, tampoco sé que es para depurar elementos que desaparecen. Es una buena pregunta. Nadie la hizo aquí, pero me la respondo a mí mismo, porque me hacen esta pregunta con frecuencia. Entonces, si quieres entender por qué desaparece este elemento emergente, hay una razón detrás. Este tipo de elementos emergentes y cosas desechables, a veces dependen del documento que tiene el estado de enfoque. Por cierto, estoy usando este pequeño botón aquí. Se llama expresión en vivo, que no necesitas actualizar DevTools y agregar tu valor de vez en cuando. Se ejecutará automáticamente cada vez y se actualizará. Ahora este documento tiene enfoque porque estoy en DevTools, lo que significa que mi documento, la página en sí, no tiene enfoque. Entonces, si muevo el cursor a la página, ahora el documento tiene enfoque es verdadero. Si hago clic en DevTools nuevamente, desaparece. Eso es porque el elemento se descarta porque la página ya no tiene enfoque. Esta función emula una página enfocada, básicamente para devolver el enfoque a la página para que puedas depurar cualquier elemento basado en este estado de enfoque. Tuvimos una larga discusión sobre esta función porque es muy intuitiva y es un problema común que los desarrolladores enfrentan. Inicialmente, queríamos habilitar esta casilla de verificación de forma predeterminada para que no tuvieras que pensar en ello y simplemente pudieras depurar tus problemas. Pero el problema es que, si tienes algún proceso en segundo plano que depende de esta API, llamada API de Visibilidad de Página. Por ejemplo, si abres una nueva página, tu documento ya no es visible. Activar esta configuración afectará esto porque la página seguirá siendo visible incluso si te mueves a otra página. Entonces, digamos que si tienes alguna página que depende de algo, si la página pasa a segundo plano, tienes algún proceso en ejecución para probarlo, esto no funcionará si abres DevTools. Después de evaluar el riesgo, decidimos no activarlo de forma predeterminada, pero puedes activarlo una vez y luego olvidarte de él para depurar estos problemas. Así que acabo de mencionar que esta función existe desde hace diez años. Está en la pestaña de renderizado. ¿Alguien ha utilizado la pestaña de renderizado antes? De acuerdo, en comparación con las manos levantadas anteriormente, es mucho menos. Este es un proceso bastante largo. Necesitas hacer clic en este menú de tres puntos. ¿Qué le pasó a mi ratón hoy? No importa, tengo... Sí, en la pestaña de renderizado. Y luego tienes que desplazarte hacia abajo hasta encontrarlo.

En algún lugar aquí. Sí. En algún lugar aquí, sí, aquí. Emular una página enfocada. Luego puedes activarlo para hacer eso. Eso ya existe desde hace muchos años. El problema es que está tan lejos, por lo que al acercarlo, esperamos que resuelva tu, lo que hacemos es que también rastreamos el uso. Así que vimos un aumento del 1,500 por ciento en el uso. Espero que estés en este 1,500 ahora y sufras menos cuando intentes depurar el elemento que desaparece. De acuerdo. A veces, se necesita más que simplemente mover cosas para eliminar las fricciones de tu flujo de desarrollo, flujo de depuración. Toma otro ejemplo, anulación de respuestas de red. Esta función también se ha evaluado en DevTools durante muchos años. Permíteme mostrarte a qué me refiero. ¿Alguno de ustedes ha oído hablar de esta función? De acuerdo. Bastantes manos, pero también bastante menos manos. De acuerdo. Si actualizo esta página, lo que puedo hacer es, para el archivo JavaScript, CSS y documento, o cualquier archivo, lo que puedo hacer es sobrescribir este archivo style.css para inyectar mi nuevo estilo. Por ejemplo, lo abro en la pestaña de estilos. Lo que puedo hacer es ir a esta área aquí, hacer clic en sobrescribir y luego habilitar esta anulación local para intentar simular las respuestas, básicamente. Si lo habilito, lo que puedo hacer ahora es escribir algún script aquí. Digamos que cambio el fondo a lavanda. Puedo hacer esto, cuando lo guardo, se mantendrá en las cargas de página cruzada. Es diferente de lo que haces en el panel de elementos, no se mantiene en las cargas de página cruzada. Pero esto es bueno, que puedes hacer esto, pero el problema es, ¿cuántos pasos necesitas hacer? Primero debes ver el resultado en el panel de red, ir a las fuentes, encontrar el recurso y no solo eso, debes hacer clic en este punto y luego encontrar el botón de anulación para habilitarlo primero. Así que esto es mucho. Lo que hacemos ahora es que en el panel de red, lo que puedes hacer es hacer clic derecho en un archivo y luego hay consistentemente este botón de anulación de encabezado, anulación de contenido que puedes hacer clic. También puedes hacer esto para el archivo JavaScript, por lo que simplemente puedes sobrescribir el contenido y luego lo guardaremos por ti. Incluso si aún no lo has hecho. Y acercarlo no es suficiente.

También hemos hecho que sea consistente, digamos que para que puedas sobrescribir, necesitas configurar una carpeta localmente para que podamos almacenar el resultado en esa carpeta. Entonces, incluso si aún no has configurado la carpeta, mostramos consistentemente el menú allí. Así que si no has configurado, simplemente te mostraremos un menú de configuración para que hagas clic en una carpeta, la selecciones y la configures. Y si ya has sobrescrito el contenido, puedes volver aquí y editar el mismo archivo una y otra vez. Y también hemos agregado un poco más de funciones a DevTools para admitir la simulación de APIs y la simulación de encabezados de respuesta. Por ejemplo, aquí, me gusta Bobati, así que busquemos Bobati. ¡Ups! ¿Ves? El punto final de la API no funciona. ¿Qué hacemos ahora? Probablemente vayamos a este resultado de búsqueda y veamos que, oh, el resultado es 404. Dado que esto es mi desarrollo local, estoy desarrollando este sitio web, entonces pensé, oh sí, los ingenieros de backend aún no tienen listo el resultado. Así que de alguna manera, ya sea que creemos nuestra propia API, simulemos la API con cualquier servidor, un servidor fijo que tengas, o simplemente cambies el resultado en tu código. Esa es otra forma de hacerlo. Lo que puedes hacer es hacer clic derecho y luego hacer clic en sobrescribir contenido, y luego lo que haces es pegar, ok, sí, tengo un almacén de datos aquí, así que simplemente copio los datos, voy a la solicitud que sobrescribo, pego eso para simularlo, y luego ahora lo intento de nuevo. El resultado está aquí. Así que puedo usar este resultado simulado hasta que los ingenieros de backend digan, hey, la API está lista, luego elimino este resultado sobrescrito y uso el que proporciona el servidor. ¿Es esto genial? Ok. Entonces, al acercarlo, hacer que la experiencia sea consistente, hemos visto un incremento del 200% en el uso de esta función. Espero que lo pruebes para que la próxima vez que haga la verificación nuevamente, sea del 400%. Y como bonificación, para hacerlo más útil, hay una fricción más que podemos eliminar de todo este proceso. Por ejemplo, digamos que ahora has terminado el desarrollo, lo has implementado en producción. Muy bien. Cuando vas a la página de producción, hago lo mismo de nuevo. Esta vez, el error es diferente. Dice que el tipo es, como, error al obtener. ¿Qué hago ahora? Voy y leo mi consola. Dice que no hay control de origen de acceso. Como desarrollador experimentado, sé lo que esto significa. Pero puede haber muchas razones que causen esto. Pero como desarrollador principiante, puede ser realmente difícil saber por dónde empezar y cómo puedo obtener más ayuda en esto. Entonces, lo siguiente que haces, probablemente copias esto, lo pones en un motor de búsqueda, o lo pones en cualquier herramienta de IA para preguntar, hey, ¿de qué se trata este error? Lo bueno es que hay nuevas funciones que tienes en DevTools. ¿Ves el icono de la bombilla aquí? Puedes hacer clic en esto, vamos a intentarlo, y luego decir que continúe.

Entonces, intentará ayudarte a comprender este error. Te dará una explicación sobre cuál podría ser el error porque. Y a veces también te dará, como, algún code ejemplo. Si consideras que esta explicación no es suficiente, puedes intentar eliminar y luego intentar regenerarla nuevamente. Así intentará generar un resultado diferente para ayudarte a explicar las mismas preguntas. Veamos. Sí. Esta vez, también me ayudó a, también me dice cómo puedo solucionar el problema. Así que si digo que, probablemente debería agregar esto SS origin, este, en el servidor. Así que sé que copio esto y luego le digo al ingeniero del servidor, al ingeniero backend, que lo agregue al backend. Pero a veces lleva tiempo. Entonces, lo que puedo hacer es copiar este code, ir al panel de red, hacer clic derecho en el resultado, decir que sobrescribo el encabezado, y luego puedo sobrescribir el encabezado de respuesta pegándolo. Y luego, si hago eso de nuevo, puedo ir aquí. Así que puedo hacer esto hasta que el backend devuelva el resultado. Así que puedes sobrescribir el encabezado del servidor. ¡Bien! Esta vez no pedí aplausos. ¡Gracias! Esto es para ayudarte a comprender mejor el code. Una nota, sin embargo, estas funciones, ya las lanzamos en los EE. UU. y fuera de la UE. Todavía estamos trabajando en esto porque tiene que ver con AI y Gemini. Próximamente estará disponible en la UE. Lo anunciaremos una vez que esté listo. Así que si aún no ves el icono de la bombilla, probablemente necesites esperar un poco hasta que lo solucionemos. Genial. Otra cosa, demasiados data, demasiadas alertas y advertencias aquí y allá. También es ruido. Y esto realmente te distrae de tu trabajo real. Esto también es una de las fricciones que podrías tener. Entonces, una de las cosas que hacemos es eliminar algunas advertencias de la console para que puedas buscar el error que deseas y tratar de solucionarlo. Si has visto este mensaje de error antes, es mucho.

También ignoramos algunas de las carpetas de los frameworks, parte del código del framework cuando haces eso. Y por último, también ignoramos algo en los módulos de nodo.

Ahora tu pregunta es, ¿qué quieres decir con ignorar? Aquí es donde DevTools activa esta configuración de forma predeterminada en la configuración, ignorar esto. Así es exactamente como lo desactivamos.

Por ejemplo, si estás en una aplicación de Next.js. Ahora déjame ir aquí. En la aplicación de Next.js, si vas a las fuentes, puedes ver que todas estas carpetas están desactivadas de forma predeterminada porque se ignoran de forma predeterminada.

Ahora tu pregunta es, ¿cómo puede ayudarme esto a depurar mejor? Por ejemplo, para algunos de ustedes, si establecen un punto de interrupción en un escuchador de eventos, quieren capturar todos los clics de ratón en la página y depurar eso, pueden ir a este escuchador de eventos, hacer clic en el evento de clic y cuando hagan clic en eso, cuando intenten iniciar la depuración, se irán directamente a esta función aquí. Y si te acercas, en realidad puedes tener esta opción de mostrar la lista de ignorados para ver, como, qué ha estado ignorando DevTools.

De forma predeterminada, cuando haces clic en este clic de ratón, porque hay código de React que se está ejecutando en segundo plano, supuestamente deberías ir primero a este código de React antes de ir a esta lista activa. Y cuando depuras paso a paso, a veces saltará repentinamente al código del framework en lugar de tu propio código. Pero eso no es lo que quieres. Así que al ignorar la carpeta de los módulos de nodo y este archivo del framework de forma predeterminada, no tienes que preocuparte por eso. Puedes depurar paso a paso, ingresar a tu propio código en lugar del código del navegador. Así que eso hace las cosas más rápidas.

Otra cosa que mejora es el mensaje de la consola. Por ejemplo, si haces clic en este botón de activar una lista, en realidad hay un error aquí. Así que veamos. Si observas este mensaje de error, ¿qué línea de la traza de pila está relacionada con tu código? Solo es la primera línea, ¿verdad? Sí. Y todas las demás líneas, básicamente, no son útiles para ti. Supuestamente, si las eliminas todas, puede ser útil para ver todos los demás mensajes. Así que con eso, podemos acortar el error de la consola y reducir los costos de depuración. cuando haces las pruebas. Este es el mensaje de error que vimos hace un momento. No es solo el mensaje de error. Si algunos de ustedes han hecho depuración antes, hay un menú desplegable en el que pueden hacer clic. En realidad, hay dos partes de la traza de pila en las que puedes profundizar, dependiendo de lo que estés depurando. En la parte superior está la traza de pila de error. En la parte inferior está la traza de pila del mensaje. Así que en la parte superior básicamente te dice dónde ocurrió el error. En este caso, el índice está en la línea número 10.

Y luego la traza de pila inferior es para decirte dónde estaba el registro de error, el registro de mensaje. Debido a que capturas el mensaje en una área diferente de tu code, por lo que el registro de mensaje podría estar en algún lugar diferente de donde ocurrió el error. Lo bueno es que en DevTools, ya utilizamos esa información para colapsar la traza de pila inferior para ti, la traza de pila de mensaje para ti. Ahora, si haces clic en ella, si la expandes, no verás otros 18 marcos que no están relacionados contigo porque los hemos colapsado por defecto. Solo tienes que hacer clic y expandirlo para verlo.

Y lo siguiente, que llegará pronto, es que colapsaremos esto. El resultado final que queremos lograr es algo como esto. Así es una línea y luego puedes hacer clic en mostrar para expandirlo. ¿Está bien? De acuerdo. Esto aún está en proceso de trabajo y en realidad la contribución de esta cosa es gracias a el equipo de Wassell. Ellos realmente nos enviaron un CL para solucionar esto. Así que esperemos que se implemente pronto. Así que el concepto aquí es, ¿esta cosa te da alegría? Si no lo hace, entonces simplemente la ocultaremos de inmediato.

Y por último, hablando de ocultar, también tenemos algunas pequeñas mejoras aquí. La última vez, en la columna de cascada, la verías ocupar todo el espacio en la pista de red, pero ahora puedes ocultarla. Y la otra es que si tienes muchas extensiones y tratas de debug tus propios resultados de red, se volverá confuso. Supuestamente puedes usar el modo incógnito para hacer la depuración y así no tener la extensión, pero ahora hemos agregado estas características para permitirte ocultar la URL de la extensión del propio registro de red. Esto es bastante útil para ti. Lo curioso es que estas dos características han sido solicitadas durante mucho tiempo. Permíteme mostrarte esto. Así que esta cascada, para eliminar la cascada en el desbordamiento de pila, se solicitó hace seis años y se construyó 9000 veces. Y luego esto, este año, uno de los usuarios, también tenemos un error que se creó hace seis años. Luego recibimos este mensaje recientemente. El mensaje es muy largo, pero la idea principal es que se utilizaron 8000 desarrolladores para encontrar la red para nada, solo fue una pérdida de espacio. Esta persona nos ha estado diciendo constantemente, por favor, elimínenlo. No nos es útil, durante seis años. Así que es bueno para ti. Si estás en la multitud, finalmente puedes hacer eso. Y para ser honesto, 8000 desarrolladores son importantes, pero también recibimos muchas otras solicitudes. Por ejemplo, la extensión alta, se construyó 24k veces, se creó hace 11 años y recientemente agregamos las características porque en realidad tienes una forma alternativa de hacer eso, y no lo hicimos porque hay muchas actividades y tenemos muchas características y recursos limitados, así que a veces no se convierte en una prioridad.

Así que ten paciencia con nosotros. Si realmente quieres las características, sigue solicitándolas. Si preguntas y no las obtienes, sigue preguntando y envíanos una solicitud de características. Y si quieres, puedes contribuir con una corrección. En realidad, es una aplicación web, toda la DevTools de Chrome. Así que si sabes cómo desarrollar una aplicación web, en realidad puedes contribuir a DevTools. Este es el enlace si estás interesado. Entonces, lo que hemos hecho hasta ahora este año es tratar de hacer las cosas obvias, atractivas, y hacerlo fácil y satisfactorio para que lo uses. También recomiendo mucho este libro, así que leí este libro de hábitos atómicos para mejorar mi hábito personal, pero en realidad, si lo pienso, también se aplica al producto, como el diseño de UX, también, sobre cómo ayudar a los desarrolladores, cómo ayudarnos a nosotros mismos a hacer las cosas más fácilmente. Así que casi terminando, si quieres aprender más sobre las nuevas características y hacer una inmersión profunda en DevTools, trato de no ignorar la pestaña de novedades que aparece de vez en cuando. Haz clic en el enlace, verás algunos artículos y el video que habla sobre algunas cosas nuevas y cómo puedes usarlas para solucionar algunos problemas.

De acuerdo, gracias. Eso es todo.

Alguien preguntó cómo pueden enterarse de las nuevas mejoras en DevTools. Como dijo Jesselyn, no ignores la pestaña de novedades.

Pregunta rápida de alguien, pero importante para mí, ya que trabajo en un navegador Chromium que no es de Google. ¿Estas mejoras están disponibles para todos los navegadores Chromium o solo para Google Chrome? De acuerdo. Así que, como para todas las cosas que mencioné ahora mismo, están disponibles en todos los navegadores Chromium. Eso es genial. Así que eso incluye a Microsoft Edge. La excepción es la estadística de la consola, como el botón que haces clic para ayudarte a describir, eso no está disponible en los otros navegadores Chromium, solo en Chrome. Sí. Gracias, Jesselyn.

Algunas preguntas rápidas. ¿Puedo compartir mis anulaciones con colegas? De acuerdo, esta es una buena pregunta. Si quieres compartir la anulación con tu colega, es posible porque necesitas configurar una carpeta en tu PC local. Lo que puedes hacer es tener un repositorio de GitHub para ese archivo que creaste, luego simplemente puedes confirmar el code como lo haces normalmente, y luego puedes compartirlo con tu colega. Pero no hay funciones de sincronización en DevTools para sincronizar la anulación en otra PC porque eso sería demasiado peligroso. Debes configurar un repositorio Git o un lugar para compartirlo. Gracias.

Alguien preguntó, Jesselyn, ¿cuánto tiempo vive la anulación? ¿Cuánto tiempo dura esto? Bueno, esto vive tanto como pueda porque está en tu disco local. Lo que puedes hacer es eliminarlo y ya no se realizará la anulación. O simplemente debes marcar la casilla que desactiva la anulación, entonces no usaremos tu archivo de anulación, incluso si ese archivo existe. Gracias.

Alexander preguntó, ¿cómo diferencias entre estilos reales y data que has anulado? ¿Tal vez olvidas en dos semanas que tienes una anulación? Sí, esta es en realidad una muy buena pregunta. En el panel de red, si ves en la parte superior, a veces aparece este triángulo con un signo de exclamación, es un icono de advertencia que te dice, hey, algunos de tus resultados de red realmente han cambiado. Mostramos ese icono de advertencia donde tienes cosas que has anulado o donde has cambiado la velocidad de tu red, como reducirla a 3G o 4G, eso haces. Y luego, en cada recurso anulado en el panel de red, puedes ver un punto morado que indica que estas son las solicitudes que se han anulado. Gracias.

Y lamento que esto sea una ráfaga de preguntas para ti. ¿Cuál es la forma más fácil de anular las solicitudes de GraphQL? Porque todas tienen la misma URL.

Entiendo que quieres enviar una solicitud en Chrome DevTools, simplemente envía una solicitud de problema o funcionalidad, porque actualmente no hay una forma fácil. Ya que sé que la solicitud de GraphQL es como un gran bloque. Así que lo siento, pero puedes enviar una solicitud y seguir preguntando. Gracias.

El último punto, volviendo a lo que estabas diciendo sobre las fricciones. Alguien pregunta, Jesselyn, además de las solicitudes en crbug.com y los comentarios de la comunidad, ¿cómo más te enteras de estas fricciones en Chrome DevTools? ¿Cómo podemos hacértelo saber? De acuerdo. Una cosa, por supuesto, es crbug.com, que es nuestro principal recurso. El otro es Stack Overflow. En Stack Overflow, puedes enviar tus preguntas bajo Google, creo que Google Chrome DevTools tiene una etiqueta de Chrome DevTools. Y de vez en cuando, lo revisaré. Y también para responder preguntas. Y para entender, ¿estas solicitudes son muy vistas? ¿Y esto es algo que podemos hacer de inmediato? Y también las redes sociales. Si etiquetas a Chrome DevTools en la plataforma X o me etiquetas a mí, también revisaré esta solicitud y registraré la solicitud, la funcionalidad. Así que estas son las redes sociales, crbug, Stack Overflow, YouTube, el video debajo de él, dejé el comentario. Utilizaremos todos esos. Sí. Gracias.

De acuerdo. Quiero que le den un gran aplauso a Jesselyn Yin. Gracias.