GOOGLE CHROME DEBUGGER

Héctor De Castro Sendra y Antonio Cañas Poblete

1

Instalación y apertura

El depurador de Google Chrome viene integrado

en el navegador dentro del paquete Developer

Tools.

Para iniciarlo:

Control + Shift + I

Botón derecho + "Inspeccionar elemento"

2

Avanzar línea a línea

En Sources, buscamos los archivos Javascript que

tenga la página para ver las líneas de código.

Control + G, ir a la línea x.

3

Los errores de sintaxis aparecen en la consola. A la

derecha nos indica el documento y la línea donde

se encuentra y pinchando nos dirige directamente.

Buscar errores de sintaxis 4

Buscar errores de sintaxis

En resources vemos donde está el archivo y el error

aparece en rojo.

5

Definir puntos de interrupción

En source, en uno de los ficheros, por ej: script.js

hacemos click en una de las lineas para definir un

punto de interrupción.

Despues con el F8 o en botón derecho, continue to

here, el programa llega hasta esa función y se

detiene.

Y si es una función tipo mouseover, no dejará que el

programa continue hasta no desactivar el

breakpoint.

6

Definir puntos de interrupción 7

Definir puntos de interrupción

Hay una opción que permite pausar

automaticamente cuando encuentra una excepción.

Permite pasarlas todas por alto, sólo las

capturadas o no permitir omisión en ninguna.

8

Definir puntos de interrupción (XHR)

Se pueden añadir XHR breakpoints que consisten en

añadir la ruta de un enlace y cuando coincida con

algo del documento detiene la ejecución.

9

Inspeccionar variables

Haciendo click derecho>’inspeccionar elemento’, se nos

abre en la pestaña ‘elementos’ la parte del código html

donde está definido ese elemento, con sus características.

10

Validación de documentos

Google Chrome tiene una extensión 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

función para usarlo de validador como tal.

11

Depurando Javascript desde Eclipse

Google Chrome Developer Tools for Java ofrece

Herramientas de depuración para diferentes

soportes.

Habría que instalar Chromium JS Remote Debugger

Configurar los puertos en chrome y eclipse

Añadir el proyecto a depurar y selecionamos el

HTML en el Project Explorer.

Botón derecho, debug>debug on server. Y listo

12

Depurando Javascript desde Eclipse 13

Referencias

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

14