logoCoderhouse.png
Ë
By Nicolas Alliaume • August 9, 2016

Piques útiles: Explorando la Consola del Desarrollador

El trabajo del web developer

Como desarrolladores web, nuestro trabajo implica escribir un montón de código HTML, CSS, en ocaciones SASS, Javascipt, trabajar con imágenes, y mucho más. ¿Pero siempre escibimos el código bien la primera vez? Claro que no. Y es normal.

Muchas veces le erramos a los pixeles de márgen de un elemento. Otras veces la ruta de una foto está mal, o nuestro Javascript no hace lo que esperábamos. ¿Cómo podemos diagnosticar este tipo de cosas efectivamente?

La consola

Particularmente, utilizo Google Chrome para desarrollar web. Me gustan las útilidades que tiene, principalmente la consola de desarolladores, el tema de este post. Los ejemplos que usaré aquí son utilizando Google Chrome.

El termino correcto es 'Herramientas de Desarrollo', ya que, como veremos a continuación, la consola es solamente uno de los componentes que nos ofrece Chrome a los developers.

Abrir las herramientas de desarrollo

Estando en Chrome, podés abrir el panel de herramientas presionando Ctrl + Shift + J (Windows) o Cmd + Option + J (Mac). Verás que aparece en la parte inferior de tu navegador.

Las pestañas

Chrome ofrece una gran variedad de herramentas, que se agrupan en distinas pestañas según la función que cumplen. Ellas son (puede que no las veas en el mismo orden, porque pueden reordenarse):

1. Elementos

Ésta es una pestaña super importante y útil. Muestra el DOM del sitio, y nos permite modificarlo, setear estados, mover elementos, inspeccionar valores, entre otras cosas. La veremos más a fondo luego en este post.

2. Consola

Otra de las pestañas funamentales del panel de herramientas. Aquí podremos ver mensajes y errores de nuestro código JS, errores de Red (cuando la ruta de una foto está mal por ejemplo), e incluso probar código JS en vivo.

3. Fuentes

Aquí podremos ver todos los archivos que componen nuestra página (HTMLs, JSs, CSSs, imágenes, etc). La encuentro super útil cuando hago un cambio en una página y el cambio no aparece. En esta pestaña puedo revisar si el nuevo código que escribí está llegando al navegador.

4. Red

En la pestaña Red podemos visualizar la carga de recursos de nuestra página, incluyendo encabezados, respuestas, tiempos de carga, orden en que son cargados, códigos de error, parámetros, entre otros datos de mucho valor. También permite simular condiciones como una conexion a Internet lenta y deshabilitar la caché.

5. Linea de tiempo

La timeline nos permite monitorear la carga de una página y la utilización de recursos. También permite tomar capturas de pantalla automáticamente durante el procesamiento de la carga para visualizar los distintos momentos. Este es un ejemplo de cómo se ve el monitoreo de la carga de Twitter.com con capturas incluidas.

6. Perfiles

Nos permite perfilar el JS de nuestra página. Perfilar es "grabar" la ejecución del código, registrando los tiempos que toma cada una de las funciones y generando una estadística del porcentaje del tiempo que cada una de ellas toma del tiempo total del perfilado. Esta es una captura de unos segundos de ejecución de JS de Twitter.com

7. Recursos

Tiene similitudes con la pestaña de Fuentes, en el hecho que se pueden visualizar los fuentes de la página, pero incluye tambien otros recursos como Cookies, Local Storage, Session Storage, Caché y Service Workers de JS. Por ejemplo, podemos ver que Twitter guarda un valor en Local Storage mientras estamos deslogueados.

8. Seguridad

Muestra información básica de la seguridad de nuestro sitio, como el certificado SSL, si hay una conexión TSL, y si los archivos son provistos por uns servidor seguro.

9. Auditoría

Nos permite registrar información de utilización de red y de performance de nuestro sitio, y nos da recomendaciones de cómo mejorar estos aspectos.

Exploremos más el panel

En este post les hablaré más a fondo de una de las pestañas más importantes del panel: Elementos.

Pestaña Elementos

Elementos es la pestaña que más uso en mi día a día de desarrollo. Me es muy útil para encontrar errores cuando la página no se ve como espero que se vea, y también me ahorra mucho tiempo a la hora de escribir CSS. Veamos un ejemplo para estas 2 actividades.

¿¡Por qué pasa esto!?

Supongamos el siguiente código HTML:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Mi página</title>
<link rel="stylesheet" href="">

<style>
div { padding: 20px; }
.azul { background: blue; }
.rojo { background: red; }
.amarillo { background: yellow; }
p { font-weight: bold; font-size: 20px; }
</style>
</head>
<body>
<div class="azul">

<div class="rojo">

<div class="amarillo">

</div>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur, sint nihil vero sit quaerat similique temporibus est non repellat ut illum ipsam aperiam hic commodi porro labore aliquam nostrum ullam.</p>

</div>
</body>
</html>

En este caso, quiero poner un texto Lorem Ipsum dentro del div azul, fuera del div amarillo y rojo. Sencillo, ¿no? Veamos cómo se ve.

¡Ouch! Eso no era lo que esperaba.

¡Tengo una idea! Veamos la pestaña de Elementos de las herramientas de desarrollo.

Si vemos sobre el lado izquierdo, el DOM de la página no se formó como esperaba. El párrafo está dentro del div rojo, al mismo nivel que el amarillo. Esto me da la idea de que debe haber algo mal con uno de esos 2 divs en mi HTML.

Revisandolo de nuevo, ¡veo que uno de los 2 me olvidé de cerrarlo! Vamos a corregir eso.

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Mi página</title>
<link rel="stylesheet" href="">

<style>
div { padding: 20px; }
.azul { background: blue; }
.rojo { background: red; }
.amarillo { background: yellow; }
p { font-weight: bold; font-size: 20px; }
</style>
</head>
<body>
<div class="azul">

<div class="rojo">

<div class="amarillo">

</div>

</div>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur, sint nihil vero sit quaerat similique temporibus est non repellat ut illum ipsam aperiam hic commodi porro labore aliquam nostrum ullam.</p>

</div>
</body>
</html>

Veamos ahora cómo se ve, y cómo se ha formado el DOM.

Listo, problema resuelto.

Muchas veces, resolver un problema no va a ser tan sencillo como en este caso. Pero la pestaña de Elementos es el lugar para empezar.

Diseñando en vivo

Otra gran utilidad de la pestaña Elementos es el lado derecho; el de los Estilos. Aquí podemos ver todas las reglas de CSS que se le aplican a cada uno de los elementos de la página, en el orden en que se interpretan, y cuáles son pisados por otros estilos de mayor precedencia. También podemos ver los estilos finales del elemento (todos los que finalmente son aplicados), y podemos modificarlos y agregar nuevas reglas.

Para ver los estilos de un elemento en particular puedes hacer Clic derecho sobre el elemento > Inspeccionar elemento. Será seleccionado en el DOM en se mostrarán los estilos del lado derecho del panel. También puedes usar la utilidad de Seleccionar Elemento y hacer clic sobre él en la página.

En la parte de Estilos podemos modificar cualquiera de los valores de CSS que aparecen allí. Por ejemplo, demosle un estilo diferente al formulario de registro de Twitter.

http://www.youtube.com/watch?v=R_hsmv8gdfs

No solo es posible editar los valores de CSS que ya existen; también pueden agregarse nuevos. Incluso clases nuevas.

http://www.youtube.com/watch?v=N-Hxy6I4nfg

Comentarios finales

El Panel de herramientas de desarrollo tiene mucho más que ofrecer que lo que hemos visto en este post. Solamente la pestaña de Elementos tiene muchas más utilidades que no he mencionado, como el preview para desarrollo móvil, los seteos de estados de elementos del DOM, la edición de HTML, entre otras muchas cosas. Ahora es tu turno de abrir un sitio que te guste y navegarlo, pero mirando con los ojos de un web developer.

Bonus track: Instagram hacker

¿Te gusta una foto de Instagram pero no podés darle Click derecho > Guardar imágen? Te reto a que descargues esa foto usando el panel de herramientas.