Bit - loader

La depuración de JavaScript en navegadores (I)

   Artículo | JavaScript Development Bit - La depuración de JavaScript en navegadores (I)
Marino Posadas | 02/08/16

Javascript

JavaScript se ha convertido en la auténtica “lingua franca” de la web, ya que es el único lenguaje que realmente funciona en todos los dispositivos. En los últimos 6 años su nivel de aceptación y uso ha subido como la espuma, disponemos de miles de librerías para todo tipo de cosas y el lenguaje aparece en los “Top 10” de todas las encuestas sobre uso de lenguajes de programación. Esto pone de manifiesto la necesidad de contar con buenas herramientas tanto en desarrollo como en depuración.

Para aquellos que prefieren depurar en los navegadores, hay algunos trucos o técnicas que son de especial interés y me gustaría comentar aquí. Lo primero que habría que indicar es que todos los navegadores modernos disponen de versiones avanzadas para el desarrollador: para Chrome, tenemos Chrome Canary, para Firefox, Firefox Developer Edition, y para Edge, las versiones de desarrollador. Cada una de ellas aporta un montón de funcionalidades, y en algunos casos elementos “extra” que no encontramos en los otros. No hay problema de instalación, ya que todos ellos “conviven” estupendamente con sus versiones “de usuario”.

Se encuentran disponibles respectivamente en:

Chrome canary y firefox dev edition y microsoft edge

También es interesante tener en cuenta que podemos experimentar individualmente con los “motores” de algunos de ellos. Por ejemplo, Chrome dispone de motor V8 que está en código abierto (https://developers.google.com/v8/), al igual que sucede con Edge (https://developer.microsoft.com/en-us/microsoft-edge/platform/documentation/).

Como ya sabrás, el acceso a la “suite” del desarrollador es mediante la tecla F12 (en todos ellos), y eso nos presenta una zona inferior (configurable), donde podemos acceder a los elementos activos en la página que vemos en este momento.

En todos ellos, encontramos un bloque de elementos comunes: Visor del DOM (HTML), Visor de CSS (que podemos modificar dinámicamente, viendo los resultados de nuestros cambios instantáneamente en la página abierta), la Consola, una zona de depuración (que se llama de distinta forma dependiendo del navegador, pero que básicamente, hace lo mismo), la zona “Network“, que despliega los tiempos de carga de cada recurso de la página, un área de Análisis de Rendimiento, y otros elementos de menú, que varían según el navegador, y esta es una de las cosas que merece la pena conocer de cada uno de ellos.

En algunos casos, como en Canary, las opciones pueden variar de ubicación respecto a la versión tradicional de Chrome, así que es conveniente reconocer estos cambios.

Con todas las opciones disponibles, queda claro que estas herramientas no son sólo para el desarrollador, sino también para el analista de SEO, para diseñadores Web y para otros roles.

 

La depuración de JavaScript

Una de las cosas que más me gusta de Chrome Canary es su capacidad de establecer “DOM breakpoints“. Se trata de la capacidad de detectar cuando se producen cambios en la estructura del DOM de forma dinámica (algo absolutamente habitual cuando se programa con Angular, por ejemplo).

Pongamos que estamos en una aplicación Angular donde tenemos algo muy simple: una lista con un filtro que se aplica por el usuario seleccionando de un combo una opción. Podemos indicar al depurador que se detenga cuando Angular actúe y determinar de esa forma qué parte del motor de angular está cambiando los datos y cómo lo hace:

Dom breakpoints depuración de javascript

Automáticamente, cuando seleccionemos cualquier cambio en la interfaz, Angular entrará en acción, y, al detectar el cambio, nos encontraremos con que se abre la depuración de JavaScript con el fichero Angular.js abierto y detenido en la función responsable del cambio.

depuración de javascript con angular

Esta es una característica única de Chrome estándar y de Canary, aunque Canary tiene otras ventajas.

En la siguiente entrega continuaré analizado las excelentes posibilidades que nos ofrecen estos navegadores para una experiencia de depuración realmente avanzada.


Entradas relacionadas

Cursos relacionados
Nuestro sitio utiliza cookies para análisis. Si no estás seguro de ello, echa un vistazo a nuestra política de privacidad. ACEPTAR