DEV Community: Samuel Narciso

Aprende a depurar código JavaScript con Chrome DevTools

Samuel Narciso — Wed, 05 Jan 2022 18:39:34 +0000

Introducción 🤓

La depuración de código es una de las partes fundamentales de programar, cuando programo por largas horas dedico más tiempo a corregir errores que escribiendo lineas de código, pero muchas veces la forma en la que ubico los errores es mediante console.log() , la cual es una herramienta útil, pero no siempre es la más optima o precisa para la tarea de depuración o debugging.

Todos los exploradores actuales cuentan con una herramienta especializada en la funcion de depuracion y no muchos la usan, sin embargo en este post me propongo explicarte de forma sencilla, clara y mediante un ejemplo como es que la puedes utilizar y sacarle todo el jugo a tan poderosa herramienta.

En este post estaré utilizando Chrome, sin embargo no dudo que el conocimiento se pueda aplicar a cualquier otro navegador.

Manos a la obra

Comencemos con un programa sencillo, pero si no quieres hacerlo puedes utilizar el ejemplo de google.

<!-- Index.html -->
<!DOCTYPE html>
<head> <title>suma</title> </head>
<body>
<h1>Depuracion de JavaScript</h1>
<label> Valor 1:
<input type="text" placeholder="123">
</label> <br />
<label> Valor 2:
<input type="text" placeholder="789">
</label> <br />
<button> Sumar valor 1 y valor 2 </button>
<p></p>
<script src="app.js"></script>
</body>
</html>

// app.js
function onClick() {
  if (inputsAreEmpty()) {
    label.textContent = 'Error';
    return;  }
  updateLabel();
}
function inputsAreEmpty() {
  if (getNumber1()  '' || getNumber2()  '') {
    return true;
  } else { return false; }
}
function updateLabel() {
  var addend1 = getNumber1();
  var addend2 = getNumber2();
  var sum = addend1 + addend2;
  label.textContent = addend1 + ' + ' + addend2 + ' = ' + sum;
}
function getNumber1() {
  return inputs[0].value; }
function getNumber2() {
  return inputs[1].value; }
var inputs = document.querySelectorAll('input');
var label = document.querySelector('p');
var button = document.querySelector('button');
button.addEventListener('click', onClick);

Coloca un par de números en cada campo, y presiona el botón de sumar y observa lo que sucede.

Claramente tenemos un error ⚠
Este sencillo ejemplo nos ayudara.

Familiarizándonos con el panel de herramientas de desarrollador

El panel de herramientas de desarrollador o también conocido como las DevTools, es quien nos ayudará a la hora de depurar código u otras acciones más que deseemos realizar.

Para abrir este panel existen distintas formas.

Con el mouse

Click derecho sobre la página
Inspect | Inspeccionar

Con combinacion de teclas

Mac: Command + Option + I
Linux | Windows: Control + Shift + I

No importa la forma en la que lo abras, abrirá algo similar a esto:

Lo que nos interesa es el apartado superior que dice sources | recursos, lo presionamos y cambiara el contenido del panel.

Cada panel interno puede modificar su tamaño, inclusive la distribución de los mismos.

Identifiquemos cada panel:

Panel de archivos muestra el servidor que corre la página, la carpeta raiz y los archivos HTML, CSS y JavaScript y otros más incluidos en la Página que estemos viendo.
Panel del editor de código después de seleccionar un archivo en el primer panel mostrara el código de este mismo, permitiendo editarlo.
Panel de depuración de JS Cuenta con diversas herramientas útiles para la depuración, herramientas tales como, una lista de los Breakpoints, el Call Stack, el Scope de las variables entre otras más.
Panel de consola En caso de no ser visible la consola, seleccione cualquier panel anterior y presione la tecla esc. Muestra una consola en la cual podemos utilizar código de JavaScript.

Breakpoints

Un breakpoint en pocas palabras es un punto en el que el programa se detendrá, y nos mostrara como se encuentran las variables y más información en ese punto especifico del código.

Breakpoints con console.log

Una de las formas más comunes en las que se crean "Breakpoints" es mediante console.log(), la cual no es malo, pero si es limitado.

Por ejemplo, si queremos conocer el estado de cada variable en cada momento haríamos algo como lo siguiente:

//app.js
function updateLabel() {
  var addend1 = getNumber1();
  console.log(`valor 1: ${addend1}`)
  var addend2 = getNumber2();
  console.log(`valor 2: ${addend2}`)
  var sum = addend1 + addend2;
  console.log(`Suma: ${sum}`)
  label.textContent = addend1 + ' + ' + addend2 + ' = ' + sum;
  console.log(`Texto asignado: ${addend1 + ' + ' + addend2 + ' = ' + sum}`)
}

Si corremos el nuevamente la suma y vemos el apartado de consola nos mostrara lo siguiente.

Podemos observar como cada valor son números, pero la suma no es del todo correcta.

Breakpoints con debugger

En el código anterior sustituiremos los console.log() por la instrucción debugger; y regresemos a la pestaña de sources.

//app.js
function updateLabel() {
  var addend1 = getNumber1();
  debugger;
  var addend2 = getNumber2();
  debugger;
  var sum = addend1 + addend2;
  label.textContent = addend1 + ' + ' + addend2 + ' = ' + sum;
  debugger;
}

Colocamos valores y presionamos el botón para sumar.

Como podemos ver suceden varias cosas curiosas.

vemos como la página se oscurecé un poco.
en el panel de editor de código nos marca la linea 19 que dice debugger
en el panel de depuración nos despliega la pestaña de scope y a su vez nos muestra el valor de nuestras variables locales y globales.

Sigamos ejecutando y veamos que pasa.

Tenemos dos formas para esto:

⏩ Hacer un salto hasta el siguiente breakpoint.
⟳ Ir línea a línea.

⏩ Demos un par de saltos entre cada breakpoint y veamos que nos muestra.

Panel de depuración

Si nos enfocamos el panel de depuración podemos ver el Scope con los valores de nuestras variables, tanto locales como globales, también podemos ver el call stack y como esta ordenada cada función.

Podemos notar como nos muestra cada variable, como lo hacíamos con los console.log(), sin embargo hay varias ventajas.

No tuvimos que listar una por una.
Nos muestra el Scope.
Podemos inferir el tipo de dato.

Es curioso, ya que el ver las dobles comillas " " nos debería dar una idea de lo que podría estar fallando.

Si recordamos los valores dentro de comillas dobles "1" son tipos String, mientras que los valores sin comillas dobles 1 son number.

Supongamos que no estamos del todo seguros de eso, y queremos seguir investigando

¿que más podemos hacer?

Watch

La pestaña watch dentro del mismo panel nos puede ayudar a trabajar con las variables.

Revisemos el tipo de variable utilizando la función typeof.

Dentro de Watch pulsamos el icono + y coloquemos dentro las siguientes instrucciones.

typeof addend1

typeof addend2

typeof sum

Podemos notar como el tipo de cada una de las variables es un string, indicándonos que la operación que está realizando no es una suma, sino una concatenación.

Consola

¿Podemos hacer lo mismo de otra forma?

Correcto.
Con la consola podemos escribir código y mientras estemos dentro del scope de la función podemos ver sus variables.

Presiona esc, y dentro de la consola escribe lo mismo.

typeof addend1

typeof addend2

typeof sum

Ahora que ya sabemos que los valores son String y no number, podemos deducir que no está sumando, sino que está concatenando.

Solución

¿Que podemos hacer para arreglarlo?

Aplicaremos un parseo de string a enteros.

Dentro de la consola colocaremos el siguiente código y presionamos enter.

parseInt(addend1) + parseInt(addend2)

Como podemos observar, ahora si muestra el valor esperado, sabiendo esto aplicaremos ese cambio en nuestro código, para que funcione de forma correcta.

function updateLabel() {
  var addend1 = getNumber1();
  var addend2 = getNumber2();
  // var sum = addend1 + addend2;
  var sum = parseInt(addend1) + parseInt(addend2)
  label.textContent = addend1 + ' + ' + addend2 + ' = ' + sum;
}

Ejecutamos nuevamente nuestro programa y vemos el resultado.

En resumen ⚡

Chrome y otros navegadores cuentan con herramientas de desarrollador, las cuales nos ayudan a la hora de programar, la pestaña en la que nos enfocamos en esta ocasión fue en la de Sources, la cual nos ayuda a depurar código.

La depuración de código como vimos se puede realizar de distintas maneras, ya sea mediante console.log () o utilizando la instrucción debugger, aunque mediante console.log es posible, no es la mejor manera de depurar nuestro código, por otro lado, con la instrucción debugger, de la mano con las herramientas de desarrollador esta tarea se vuelve sumamente sencilla.

No está demás mencionar que aunque las herramientas de depuración de Chrome son sumamente útiles, también debemos tener cierto conocimiento en el lenguaje, para detectar los errores y saber cómo solucionarlos.

Referencias 🧐

🐦 Twitter	🤖 SamuelNarciso.com	📸 Instagram

Props de react chidas y bien explicadas.

Samuel Narciso — Fri, 29 Jan 2021 15:04:34 +0000

Las propiedades o por la forma mas común props es la manera de enviar datos a los componentes, pasándolos por parámetros.
ejemplo:
Queremos crear un componente que sea una tarjeta de usuario, el cual se llene con datos de cada usuario.
hacemos algo como esto:
Ahora nuestro componente ocupa los datos [ nombre, sexo, nickname, edad, nacionalidad ]

podríamos establecerlos directamente en nuestro texto, pero eso no seria muy dinamico de nuestra parte

entonces aquí entran las props, que vendrían siendo parámetros con valores dados por el sistema o usuario.

como enviamos las propiedades a nuestros componentes?

Para enviar un valor por props los enviamos desde donde estamos llamando al componente, siguiendo la siguiente estructura:

<NombreComponente
  nombre_propiedad =  'valor_de_la_propiedad'  
  .
  .
  .  
/>

podemos poner cuantas propiedades sean necesarias para nuestro componente.

Ya enviamos nuestras propiedades bien dinamicas a nuestro objeto, pero ahora...

Como obtenemos las propiedades en nuestro objeto?

Estos llegan a los parámetros de nuestro componente y la forma mas común de obtenerlos es con un objeto que se llame props y de ahí llamar cada propiedad según la necesitemos.

(El nombre de las propiedades debe ser el mismo que le colocamos cuando las enviamos)

(El nombre props es un nombre estándar, pero si podemos colocarle el nombre que nosotros gustemos.)

Trucos con las props

Como las estamos pasado por parámetros, podemos utilizar la funcionalidad de Desestructuracion y así evitamos la palabra props y colocamos únicamente el nombre del elemento que estamos pasando, haciendo mas entendible nuestro código.

En cualquier caso, si lo desestructuras o no, el resultado siempre seguirá siendo el mismo.

(El nombre de las propiedades al ser desestructuradas debe ser el mismo que le colocamos cuando las enviamos)

JSX para principiantes

Samuel Narciso — Sun, 17 Jan 2021 05:09:03 +0000

Que no es JSX?

No es un string, ni HTML

Que es?

JSX es un pseudolenguaje que facilita el desarrollo de aplicaciones web por su sintaxis similar a las etiquetas de HTML. Este cuenta con su propia sintaxis, la cuál extiende de Javascript , el cuál se usa en react para describir la interfaz de usuario

JSX produce elementos o componentes con los cuales se pretende reutilizarlos a lo largo del sistema.

Primeros pasos

Necesitamos tener corriendo react y las importaciones correspondientes

JSX toma las mismas etiquetas de HTML para crear los componentes

Ahora el primer elemento que crearemos con jsx sera:

 <h1> Hola mundo</h1>

Colocamos nuestra "Etiqueta de jsx" dentro del render, y lo estariamos viendo en nuestra pantalla. En ella solamente se estaria renderizando lo siguiente:

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render( <h1> Hola mundo </h1> , document.getElementById('root'));

¿Qué te parece si nuestro JSX lo pasamos a una variable o constante y al render solo le pasamos la referencia de éste y así dejar la instrucción de render un poco mas limpio.?

import React from 'react';
import ReactDOM from 'react-dom';
const jsx = <h1>Hola mundo desde una constante </h1>;
ReactDOM.render( jsx, document.getElementById('root'));

Que ventajas tenemos con jsx?

JSX nos permite trabajar con javascript dentro de las etiquetas

Como hacemos eso?

Únicamente colocamos { } dentro de la etiqueta, y dentro de ellos ponemos todo el código JavaScript que necesitemos.
Veamos algunos ejemplos:

import React from 'react';
import ReactDOM from 'react-dom';

const jsx = <h1> Hola mundo del {new Date().getFullYear()}</h1>;

ReactDOM.render( jsx, document.getElementById('root'));

Mostrara algo como:

let nombre = 'Samuel';
const jsx = <h1> Hola {nombre}</h1>;

ReactDOM.render( jsx, document.getElementById('root'));

const usuario = {
nombre: 'Samuel',
nickName: 'Samus',
edad: 20  };

const jsx = <h1> Hola {usuario.nombre}, tienes {usuario.edad} años y tu Nickname es {usuario.nickName} </h1>;

ReactDOM.render(jsx, document.getElementById('root'));

Con jsx podemos juntar la sencillez de html con el poder de Javascript, pero...
que pasa si quieres poner mas de una etiqueta?

Sigamos con el ejemplo anterior, supongamos que quiero el saludo en un h1 y los demas datos en un parrafo, podriamos pensar que haciendolo de las siguientes maneras seria correcto:

const jsx = <h1> Hola {usuario.nombre}, </h1> <p> tienes {usuario.edad} años y tu Nickname es {usuario.nickName} </p> ;

ReactDOM.render(jsx, document.getElementById('root'));

Si lo intentamos ejecutar mostrara algo parecido a esto:

(Si es que estas trabajando con vsCode) , el mismo vscode te puede mencionar un error como el siguiente, el cual comenta es por que JSX debe tener un elemento primario, y ahi contamos con 2 elementos.

Por ende puedes pensar en crear varios elementos primarios y luego renderizarlos. vamos a intentarlo.

const jsx = <h1> Hola {usuario.nombre}, </h1> ;
const jsx2 = <p> tienes {usuario.edad} años y tu Nickname es {usuario.nickName} </p>;

ReactDOM.render(jsx,jsx2, document.getElementById('root'));

De esta manera ya no nos marca un error por tener 2 elementos juntos, debido a que estan separados, pero si recargamos nuestra pagina nos muestra otro error

Entonces, como podemos poner varias etiquetas a la vez?
Para realizarlo debemos ponerlas dentro de un contenedor

const jsx = (
<div>
<h1> Hola {usuario.nombre}, </h1>
<p> tienes {usuario.edad} años y tu Nickname es {usuario.nickName} </p>
</div>   );

ReactDOM.render(jsx, document.getElementById('root'));

Ahora si, estamos cumpliendo con la regla de tener un elemento primario en JSX (siendo este nuestro contenedor div) y cumplimos con la regla de mandar solo un elemento jsx a renderizar.

Nota: Puede ser cualquier tipo de contenedor, no necesariamente un div. Por ejemplo: div, footer, main, header, section, article, (... y todos los contenedores que se te ocurran )

Veamos la estructura que nos genero en nuestro html

Vemos como efectivamente, dentro del contenedor root ( el cual es referenciado dentro de la instruccion de render) estamos poniendo un div, un h1 y p.

pero que pasa si no queremos ese segundo div?

Utilizaremos los fragments, los cuales nos permiten agregar etiquetas sin agregar nodos extras al DOM,

y como los usamos?

Existen dos maneras:

Forma 1 explicita

const jsx = (
<React.Fragment>

<h1> Hola {usuario.nombre}, </h1>  
<p> tienes {usuario.edad} años y tu Nickname es {usuario.nickName} </p>

</React.Fragment>);

ReactDOM.render(jsx, document.getElementById('root'));

Podemos notar como en lugar del contenedor padre div usamos React.Fragment

Forma 2 Implicita

const jsx = (
<>

<h1> Hola {usuario.nombre}, </h1>
<p> tienes {usuario.edad} años y tu Nickname es {usuario.nickName} </p>

</>   );

ReactDOM.render(jsx, document.getElementById('root'));

Podemos notar como en lugar del contenedor padre div o React.Fragment Las etiquetas <> y </> estan vacias.

En ambos casos cuando inspeccionemos nuestra pagina, veremos lo siguiente:

Notamos como ahora en este caso las etiquetas h1 y p estan directamente en el contenedor root, y no dentro de un contenedor extra, como si era el caso anterior.

Atributos en las etiquetas de JSX

Recuerda que estas no son HTML, sino JSX, por ende algunos atributos cambiaron, son pocos los atributos que cambiaron, el principal motivo es que ya existen en js como palabras reservadas.

Aqui te menciono los mas destacados o mas comunes:

JSX	HTML	Descripcion
ClassName	class	Define las clases que tendrá un elemento.
htmlFor	For	Se aplica en etiquetas label, comúnmente usados en formularios
style={ }	style=""	Se usa para definir estilos en las mismas lineas de html, forma poco usada