Javascript: Aprende a Usar Breakpoints En la Depuración de Código En Chrome Devtools

by Luigi Nori Date: 26-07-2019 javascript chrome debugger debug developers devtools tools


La depuración es una tarea muy difícil, especialmente cuando se trabaja en proyectos complejos. Las herramientas de depuración incorporadas en el navegador han hecho que sea bastante fácil depurar códigos.

 

Así que, veamos cómo podemos usar los puntos de ruptura en cromo.

 

Paso 1: Chrome DevTools.

Podemos ir a DevTools pulsando "Command+Option+I" en Mac o "Control+Shift+I" en Windows y Linux. Podemos ver el panel de inspección en la parte izquierda de la ventana del navegador. Inspeccionar el elemento ofrece diferentes opciones para trabajar.

Aquí están las opciones presentes en el panel de inspección en Cromo.

 

1.Console:

La consola se utiliza para imprimir registros y también muestra errores y advertencias.

2.Elements:

Podemos usar la sección de elementos para inspeccionar los elementos HTML y hacer estilismo en ellos.

3.Sources:

Todos los archivos que están presentes en el directorio de trabajo actual se pueden ver en la sección fuentes y podemos elegir el archivo que se desea consultar.

4.Network:

Se utiliza para inspeccionar todas las llamadas de red que realizan los clientes al servidor, como las cabeceras HTTP, el contenido y el tamaño.


 

Paso 2: Seleccionar la sección "sources"

Ahora tenemos que ir a la sección de fuentes que está presente en la inspección. Cuando vayamos a la sección de fuentes encontraremos un navegador de archivos. Podemos navegar a través de él y elegir el archivo que tenemos que depurar.


Panel de"sources" en el navegador Aprenda a utilizar los puntos de interrupción (para principiantes) en la depuración de JavaScript

Figura 2: Panel de "sources" en el navegador

 

Paso 3: Marcar líneas como puntos de interrupción (breakpoints)

Una vez que seleccionamos el archivo que va a ser depurado podemos ver que hay números de línea escritos a través de cada línea de código. Tenemos que hacer clic en este número de línea. Ahora esta línea actuará como un breakpoint y la ejecución se detendrá una vez que el control llegue a esta línea.


Línea nº 17 marcada como breakpoint Aprenda a utilizar Breakpoints (Para principiantes) en la depuración de JavaScript

Figura 3: Línea nº 17 marcada como punto de ruptura (breakpoint)

 

Paso 4: Avanzar línea por línea.

Una vez que la ejecución se detiene debido al punto de interrupción, puede reanudar la ejecución haciendo clic en el botón azul que se muestra en la figura 4. Ahora la ejecución avanza línea por línea. Aquí puede inspeccionar cada línea de código junto con los valores contenidos en las variables.


La ejecución se detuvo debido al breakpoint Aprenda a usar Breakpoints (Para principiantes) en la depuración de JavaScript

Figura 4: Ejecución detenida debido al punto de interrupción (breakpoint)

 

Paso 5: Comprobar los valores de las variables

Los valores de las variables se pueden comprobar pasando el ratón por encima de la variable. La principal ventaja de usar breakpoint es que podemos comprobar los valores de más de una variable al mismo tiempo, lo que no es posible en el caso de las consolas de registro, donde tenemos que escribir console.log() para cada variable individual.


Inspeccionar los valores presentes en las variables Aprender a usar Breakpoints (Para principiantes) en la depuración de JavaScript

Figura 5: Inspección de los valores presentes en las variables.

 

Así es como inspeccionamos variables y objetos en un archivo JavaScript usando puntos de interrupción. Es una buena práctica utilizar los puntos de interrupción debido a su simplicidad y eficiencia. Una vez que dominamos bien esta técnica, la depuración puede convertirse en una tarea fácil para los desarrolladores.

 

¡Sigue leyendo y sigue aprendiendo!

 
by Luigi Nori Date: 26-07-2019 javascript chrome debugger debug developers devtools tools visitas : 3409  
 
Luigi Nori

Luigi Nori

He has been working on the Internet since 1994 (practically a mummy), specializing in Web technologies makes his customers happy by juggling large scale and high availability applications, php and js frameworks, web design, data exchange, security, e-commerce, database and server administration, ethical hacking. He happily lives with @salvietta150x40, in his (little) free time he tries to tame a little wild dwarf with a passion for stars.

 
 
 

Artículos relacionados

Los mejores selectores de fechas para Bootstrap y tu aplicación

Los selectores de fecha son widgets que permiten a los usuarios elegir una sola fecha o rango de fechas y horas. Es un elemento habitual para todo usuario de Internet,…

Validación de formularios HTML usando BULMA y vanilla JavaScript

Hoy vamos a escribir sobre los formularios de contacto y cómo validarlos usando JavaScript. El formulario de contacto parece ser una de las características principales de toda página web básica. Es…

Cómo usar el efecto Parallax.Js en tu sitio web

Hoy vamos a escribir sobre el efecto de parallax, similar al desplazamiento de parallax, y cómo implementarlo para mejorar su página de aterrizaje. En webdev, dicen que primero el móvil…

Usando la API FETCH para hacer llamadas AJAX - Una promesa cumplida

En este artículo hablamos sobre lo que son las llamadas AJAX y cómo utilizarlas de forma tradicional, utilizando el objeto XMLHttpRequest (XHR). En resumen, gracias a las llamadas AJAX una…

Modo oscuro persistente con CSS y JS

Recientemente escribimos acerca de cómo hacer un modo de color o tema alternativo intercambiable, una característica muy útil y popular para los sitios web. El artículo de hoy tratará sobre…

Modo oscuro en el sitio web usando CSS y JavaScript

En el artículo de hoy vamos a aprender a construir más o menos estándar en estos días en las páginas web y que es el modo de color alternativo y…

Javascript: los operadores Spread y Rest

En el artículo de hoy vamos a hablar de una de las características de la versión ES6 (ECMAScript 2015) de JavaScript que es el operador Spreadasí como el operador Rest. Estas…

Cookies HTTP: cómo funcionan y cómo usarlas

Hoy vamos a escribir sobre la forma de almacenar datos en un navegador, por qué los sitios web utilizan cookies y cómo funcionan en detalle. Continúa leyendo para averiguar cómo implementarlas…

Todas las funciones de javascript y los métodos para manipular los arrays

Este artículo mostrará las funciones prominentes de las arrays de JavaScript, entre ellas .map() , .filter() , y .reduce() , y luego pasará a través de ejemplos de casos en los que .every() …

Como integrar lazy-loading nativo de imágenes en tus proyectos web

¡El soporte nativo de lazy-loading en imágenes está ahora soportado en la web! Mira esta demostración de la función A partir de la versión 76 de Chrome, puedes usar el…

Como construir mejores componentes de alto nivel (Higher-order components) con el Vue 3

El Vue 3 será lanzado pronto con la introducción del API de composición (Composition API). Viene con muchos cambios y mejoras en el rendimiento. Los componentes de orden superior (HOC…

Node.js: herramientas de código abierto para los desarrolladores

De la amplia gama de herramientas disponibles para simplificar el desarrollo de Node.js, aquí están las mejores. Una encuesta en StackOverflow afirma que el 49% de los desarrolladores usan Node.js para…

Utilizamos cookies propias y de terceros para mejorar nuestros servicios, elaborar información estadística y analizar tus hábitos de navegación. Esto nos permite personalizar el contenido que ofrecemos y mostrarte publicidad relacionada con tus preferencias. Clicando en ‘Acepta todas’ aceptas el almacenamiento de cookies en tu dispositivo para mejorar la navegación en el sitio web, analizar el tráfico y ayudar en nuestras actividades de marketing. También puedes seleccionar ‘Sólo cookies de sistema’ para aceptar sólo las cookies necesarias para que la web funcione, o puedes seleccionar las cookies que quieres activar clicando en ‘Configuración’

Acepta todas Sólo cookies de sistema Configuración