Post on 02-Aug-2015
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