Si usas Chrome 111 o una versión posterior, es posible que ya hayas notado que cambiamos el diseño de nuestra 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 los puntos de interrupción de la siguiente manera:
Proporcionar una mejor descripción general de todos los puntos de interrupción establecidos Hacer 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 que las funciones existentes de puntos de interrupción sean visibles
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 sobre cómo puedes usarlos para depurar tu código.
Ahora, veamos qué ofrece el rediseño y cómo puedes usar la nueva barra lateral. Ten en cuenta que el rediseño se centra en hacer que las funciones existentes sean más intuitivas de usar y más fáciles de acceder, en lugar de agregar funciones nuevas.
Haz una pausa en 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 hacer una pausa en las excepciones para detener la ejecución en el punto en el que se arroja la excepción. Esto puede ayudarte a investigar y comprender mejor las circunstancias en las que tu código arroja un error. Puedes elegir si deseas hacer una pausa en las excepciones detectadas, las excepciones no detectadas o ambas. Para ello, marca las casillas de verificación correspondientes en la barra lateral.
Administra tus puntos de interrupción: expande los grupos de puntos de interrupción pertinentes y contrae los demás para enfocarte en lo que es 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. Enfócate solo en aquellos que son importantes para tu sesión de depuración actual. Para ello, expande los grupos de puntos de interrupción pertinentes y contrae los restantes.
Administra tus puntos de interrupción: un clic para ir al código, quitar o habilitar o inhabilitar puntos de interrupción
La barra lateral de puntos de interrupción te permite realizar tareas comunes con un solo clic. A continuación, se incluye una descripción general de lo que puedes hacer:
Navegar a la ubicación del punto de interrupción en el editor de código Quitar un punto de interrupción o todos los puntos de interrupción de un archivo Habilitar o inhabilitar un punto de interrupción o todos los puntos de interrupción de un archivo
Y todo esto con un solo clic. Por supuesto, estas opciones también están disponibles en el menú contextual:
Haz clic en el fragmento de código del punto de interrupción para ir a la ubicación del punto de interrupción
¿Quieres verificar en qué parte del código estableciste tu punto de interrupción y analizar el código circundante? 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.
Haz clic en el botón Quitar para quitar un solo punto de interrupción o todos los puntos de interrupción de un archivo
Coloca el cursor sobre un punto de interrupción o un grupo de puntos de interrupción para revelar un botón de eliminación que quita un solo punto de interrupción o todos los puntos de interrupción de un archivo con un clic.
Inhabilita un solo punto de interrupción o todos los puntos de interrupción de 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 de 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 las condiciones de los puntos de interrupción o cambia el registro de puntos de registro editando un punto de interrupción
Para editar una condición o un registro de puntos 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 de punto de interrupción y los detalles del 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 Command+Alt+b en Mac para abrir el diálogo de edición de puntos de interrupción.
También puedes volver a verificar rápidamente tu condición o registro de puntos 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 era hacer que las cosas fueran más estructuradas y fáciles de acceder y comprender. Esperamos que estas mejoras te ayuden en tu próxima sesión de depuración.
Si tienes sugerencias para realizar más mejoras, infórmanos sobre ellas registrando un error.
Descarga los canales de vista previa
Considera usar Chrome Canary, Dev o Beta como tu navegador de desarrollo predeterminado. Estos canales de vista previa te dan acceso a las funciones más recientes de las Herramientas para desarrolladores, te permiten probar las APIs de la plataforma web de vanguardia y te ayudan a encontrar problemas en tu sitio antes de que lo hagan tus usuarios.
Comunícate con el equipo de Herramientas para desarrolladores de Chrome
Usa las siguientes opciones para analizar las nuevas funciones, actualizaciones o cualquier otro elemento relacionado con las Herramientas para desarrolladores.
- Envíanos comentarios y solicitudes de funciones a crbug.com.
- Informa un problema de las Herramientas para desarrolladores con Más opciones > Ayuda > Informar un problema de las Herramientas para desarrolladores en las Herramientas para desarrolladores.
- Envía un tuit a @ChromeDevTools.
- Deja comentarios en los videos de YouTube Novedades de las Herramientas para desarrolladores o en los videos de YouTube Sugerencias de las Herramientas para desarrolladores.