Herramientas Programación de Chrome

Introducción

A la hora de programar en Javascript necesitamos pocas herramientas: un editor de texto para escribir nuestro código y un navegador para poder probarlo. El problema llega cuando nuestro código da algún error, entonces necesitamos alguna herramienta que nos diga algo sobre el error para saber como solucionarlo, sino podemos estar revisando nuestro código eternamente.

Por suerte todos los navegadores modernos han pensado en nosotros y ponen a nuestra disposición una serie de herramientas, ya sea de serie o mediante plugins, que son imprescindibles para nosotros. Vamos a ver algunas herramientas interesantes de Chrome para el desarrollo.

Herramientas de Chrome

Para acceder a las herramientas tenemos que pinchar sobre el menú herramientas, ahí encontraremos el submenú Herramientas para desarrolladores La forma más sencilla para mostrarlo es pulsando la tecla F12. Se mostrará una pantalla en la parte inferior del navegador, por defecto es esa posición, pero la podemos configurar para que se muestre a la derecha.

La Pestaña Consola

Al pulsar F12 se muestra la pantalla, seleccionamos el último icono de la barra de herramientas que es console. Ahí podemos ver mensaje los mensajes de error o nuestros logs, en la parte inferior se pueden filtrar el tipo de mensaje que mostrar. Ahora si nuestro script falla vemos el mensaje de error. 

En la siguiente imagen se puede observar la zona de errores y los filtros de selección de mensajes.

Además podemos utilizar la consola para mostrar mensajes desde nuestro código. Para ello podemos escribir el siguiente código:

  
  $("#btn").click(function(){
     console.log("Pulsado sobre el botón");
  });

Cada vez que pulsemos sobre el elemento al que hemos asociado el evento se mostrará nuestro mensaje por la consola. Esto nos permite mostrar mensajes de control en nuestro código mientras desarrollamos. Pero la consola además, nos permite ejecutar funciones que tengamos cargadas en nuestra página, así si cargamos la librería JQuery, podemos ejecutar en la consola la siguiente instrucción:

jQuery.fn.bind.toString()

Esto nos mostrará la definición de dicha función, y tal y como hemos realizado esta llamada podemos realizar de forma controlada cualquier llamada de código que tengamos cargado en nuestra página para comprobar su efecto

Pestaña Sources

En la pestaña Sources (fuentes), podemos ver los ficheros de script que se han cargado en la página. Para ver la lista hay que pulsar sobre el icono con una flecha que hay en la parte superior izquierda. Seleccionamos un fichero y vemos su contenido, en la siguiente imagen lo podemos ver:

En la imagen podemos ver el código fuente del fichero jQuery.min.js como vemos esta minificado, por suerte Chrome nos proporciona una utilidad para indentarlo y dejarlo con un aspecto un poco mas legible. Sólo hay que pulsar sobre el botón de prettyprint y el resultado es como lo vemos en la siguiente imagen:

Con esto podemos depurar nuestro código en producción, si ponemos un punto de parada en el debugger lo hace con el prettyprint activado.

Como ya he dicho, en esta sección se puede poner un punto de parada y examinar los valores de las variables en ese momentoy realizar una ejecución paso a paso, muy útil.

La Pestaña Network

La Pestaña Network (Red) muestra todas las peticiones que realiza la página web que estamos visualizando, viendo los tiempos de descarga de los diferentes elementos ne modo gráfico muy intuitivo.

Vale muy bonito, pero hasta ahora estabámos viendo secciones para poder depurar nuestro código javascript, entonces te preguntarás como nos ayuda esta sección, pues a parte de todos los elementos también nos muestra una completa información de las llamadas Ajax. En la parte inferior seleccionamos el filtro XHR y nos mostrará sólo este tipo de tráfico de red.

Como en los demás casos con una secuencia de tiempo mostrando el orden de las llamadas y el tiempo que ha tardado la petición. Si pinchamos sobre una llamada nos muestra información detallada sobre la misma:

Podemos observar que nos muestra la ruta completa de la llamada, así como los parámetros utilizados y las cabeceras enviadas y recibidas. En la pestaña Response veremos los datos que ha recibido nuestra petición. Con esta herramienta se pueden depurar y controlar el tiempo de nuestras llamadas asíncronas.

Las demás pestañas están mas enfocadas al diseño de la página y al control de tiempos. Con esto acabamos la entrada de hoy, en una próxima veremos algunas configuraciones interesantes de Chrome para el desarrollo.