1

GOOGLE CHROME DEBUGGER

Hctor De Castro Sendra y Antonio Caas Poblete

Instalacin y apertura
2

El depurador de Google Chrome viene integrado en el navegador dentro del paquete Developer Tools.
Para iniciarlo:
Control

+ Shift + I Botn derecho + "Inspeccionar elemento"

Avanzar lnea a lnea

3

En Sources, buscamos los archivos Javascript que tenga la pgina para ver las lneas de cdigo. Control + G, ir a la lnea x.

Buscar errores de sintaxis

4

Los errores de sintaxis aparecen en la consola. A la derecha nos indica el documento y la lnea donde se encuentra y pinchando nos dirige directamente.

Buscar errores de sintaxis

5

En resources vemos donde est el archivo y el error aparece en rojo.

Definir puntos de interrupcin

6

En source, en uno de los ficheros, por ej: script.js hacemos click en una de las lineas para definir un punto de interrupcin. Despues con el F8 o en botn derecho, continue to here, el programa llega hasta esa funcin y se detiene. Y si es una funcin tipo mouseover, no dejar que el programa continue hasta no desactivar el breakpoint.

Definir puntos de interrupcin

7

Definir puntos de interrupcin

8

Hay una opcin que permite pausar automaticamente cuando encuentra una excepcin. Permite pasarlas todas por alto, slo las capturadas o no permitir omisin en ninguna.

Definir puntos de interrupcin (XHR)

9

Se pueden aadir XHR breakpoints que consisten en aadir la ruta de un enlace y cuando coincida con algo del documento detiene la ejecucin.

Inspeccionar variables
10

Haciendo click derecho>inspeccionar elemento, se nos abre en la pestaa elementos la parte del cdigo html donde est definido ese elemento, con sus caractersticas.

Validacin de documentos
11

Google Chrome tiene una extensin muy buena llamada HTML Validator para hacer lo que su nombre indica. Desde el Chrome debugger podemos encontrar los errores de sintaxis y warnings, pero no hay una funcin para usarlo de validador como tal.

Depurando Javascript desde Eclipse

12

Google Chrome Developer Tools for Java ofrece Herramientas de depuracin para diferentes soportes. Habra que instalar Chromium JS Remote Debugger Configurar los puertos en chrome y eclipse Aadir el proyecto a depurar y selecionamos el HTML en el Project Explorer. Botn derecho, debug>debug on server. Y listo

Depurando Javascript desde Eclipse

13

Referencias
14

www.adictosaltrabajo.com/tutoriales http://www.codeandbeyond.org https://developers.google.com/ http://www.desa http://blogdavidrodriguez.piensaennaranja.com http://www.nsbasic.com https://unpocodejava.wordpress.com http://www.aprendiendonodejs.com