Si usas Chrome 111 o versiones posteriores, es posible que ya hayas notado que cambiamos el diseño de la barra lateral de puntos de interrupción. Con Chrome 113, la nueva barra lateral reemplaza por completo el diseño anterior. Nuestro objetivo con el rediseño era mejorar el flujo de trabajo de puntos de interrupción de la siguiente manera:
Se proporciona una mejor descripción general de todos los puntos de interrupción establecidos. Hacemos que los flujos de trabajo comunes de los usuarios con puntos de interrupción sean más fáciles de acceder y más intuitivos. Hacer visibles las funciones de puntos de interrupción existentes y geniales
En esta publicación, se supone que ya estás familiarizado con la depuración mediante puntos de interrupción. Si nunca usaste puntos de interrupción, consulta esta descripción general sobre los puntos de interrupción y obtén más información para usarlos para depurar tu código.
Ahora, veamos lo que ofrece el rediseño y cómo puedes usar la nueva barra lateral. Ten en cuenta que el nuevo diseño se centra en hacer que las funciones existentes sean más intuitivas de uso y más fáciles de acceder, en lugar de agregar funciones nuevas.
Pausa las excepciones para investigar por qué tu código arroja un error
¿Tu código arroja una excepción? ¡No te preocupes! Las Herramientas para desarrolladores de Chrome te permiten pausar en excepciones para detener la ejecución en el momento en que se lanza una excepción. Esto puede ayudarte a investigar y comprender mejor las circunstancias en las que tu código arroja un error. Marca las casillas de verificación correspondientes en la barra lateral para elegir si deseas detenerte en las excepciones detectadas, las excepciones no detectadas o ambas.
Administra tus puntos de interrupción: Expande los grupos relevantes y contrae otros para enfocarte en lo que sea relevante.
Los puntos de interrupción pueden distribuirse en varios archivos. La barra lateral de puntos de interrupción agrupa los puntos de interrupción según el archivo al que pertenecen. Expande los grupos de puntos de interrupción relevantes y contrae los restantes para enfocarte solo en aquellos importantes para tu sesión de depuración actual.
Administra tus puntos de interrupción: Usa un solo clic para ir al código, quitarlos, o bien habilitarlos o inhabilitarlos
La barra lateral de puntos de interrupción te permite realizar tareas comunes con un solo clic. A continuación, presentamos una descripción general de cómo puedes hacer lo siguiente:
Navega hasta la ubicación del punto de interrupción en el editor de código. Quita uno o todos los puntos de interrupción de un archivo. Habilita o inhabilita uno o todos los puntos de interrupción dentro de un archivo.
Todo esto con un solo clic. Por supuesto, estas opciones también están disponibles en el menú contextual:
Para ir a la ubicación del punto de interrupción, haz clic en el fragmento de código del punto de interrupción
¿Quieres verificar en qué parte del código estableciste el punto de interrupción y analizar el código que lo rodea? Solo haz clic en el fragmento de código de un punto de interrupción dentro de la barra lateral y se abrirá la ubicación del código en el editor de código.
Quita un solo punto de interrupción o todos los puntos de interrupción de un archivo haciendo clic en el botón Quitar
Coloca el cursor sobre un punto de interrupción o un grupo de puntos de interrupción para mostrar un botón para quitar que quita uno o todos los puntos de interrupción de un archivo cuando se hace clic.
Cómo inhabilitar uno o todos los puntos de interrupción en un archivo
Marca o desmarca la casilla de verificación junto a un punto de interrupción para habilitarlo o inhabilitarlo.
Para habilitar o inhabilitar todos los puntos de interrupción en un archivo, coloca el cursor sobre el grupo de puntos de interrupción y marca o desmarca la casilla de verificación que aparece junto al nombre del archivo.
Usa estas funciones de puntos de interrupción menos conocidas: puntos de interrupción condicionales y puntos de registro
Edita un punto de interrupción para editar las condiciones del punto de registro o cambiar el registro del punto de registro
Para editar una condición o registro del punto de interrupción, coloca el cursor sobre un punto de interrupción y haz clic en el botón editar que aparece. Se abrirá un diálogo para cambiar el tipo y los detalles de tu punto de interrupción.
Como alternativa, selecciona la línea del punto de interrupción en el editor de código y escribe Control + Alt + b en Linux y Comando + Alt + b en Mac para abrir el diálogo de edición del punto de interrupción.
También puedes verificar rápidamente la condición o el registro del punto de registro colocando el cursor sobre el punto de interrupción en la barra lateral:
Conclusión
Nuestro objetivo detrás del rediseño de la barra lateral de puntos de interrupción era facilitar la depuración con puntos de interrupción. Lo más importante es que nuestro objetivo fuera hacer que todo sea más estructurado y que sea más fácil de acceder y comprender. Esperamos que estas mejoras te ayuden en tu próxima sesión de depuración.
Si tienes sugerencias para realizar mejoras adicionales, 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).