SlideShare una empresa de Scribd logo
1 de 92
Descargar para leer sin conexión
Mejora tu desarrollo web con Firefox
Developer Edition y Google Chrome DevTools
Iñaki Arenaza
Mondragon Unibertsitatea
iarenaza@mondragon.edu
https://twitter.com/iarenaza
https://linkedin.com/in/iarenaza
Creative Commons
Attribution Non-commercial Share Alike
3.0 Spain License
Objetivos
 Conocer las diferentes herramientas que proporcionan los
navegadores actuales para analizar y optimizar el código de
nuestras páginas web.
 Aplicar esas herramientas con Firefox Developer Tools (y
Firefox Developer Edition).
 Aplicar esas herramientas con Google Chrome DevTools.
2
Programa
 Introducción a las herramientas de depuración y análisis en el
navegador.
 La consola de errores de Javascript.
 El depurador de Javascript.
 El inspector de código HTML: visualiza y manipula el HTML
directamente en el navegador.
 El editor de estilos: analiza y modifica el CSS directamente en el
navegador.
 El analizador de conexiones de red: dónde se conecta mi navegador
y qué se descarga.
 Testeo de sitios web para tablets y smart phones con el navegador
(responsive web design / device mode).
 El analizador de rendimiento: en qué gasta el tiempo mi navegador.
 Herramientas relacionadas.
3
Programa
 Introducción a las herramientas de depuración y análisis en el
navegador.
 La consola de errores de Javascript.
 El depurador de Javascript.
 El inspector de código HTML: visualiza y manipula el HTML
directamente en el navegador.
 El editor de estilos: analiza y modifica el CSS directamente en el
navegador.
 El analizador de conexiones de red: dónde se conecta mi navegador
y qué se descarga.
 Testeo de sitios web para tablets y smart phones con el navegador
(responsive web design / device mode).
 El analizador de rendimiento: en qué gasta el tiempo mi navegador.
 Herramientas relacionadas.
4
Herramientas de depuración y análisis
 Conjunto de herramientas de depuración, análisis y
desarrollo incorporadas en los propios navegadores.
 Proporcionan acceso a (ciertas) partes internas del
navegador y nos permite interactuar con esas partes o
modificar su comportamiento.
 El objetivo es poder analizar y controlar qué hace la página
o aplicación web visualizada en el navegador.
5
Herramientas de depuración y análisis
 Para ello nos permiten analizar o controlar entre otras
cosas:
– El contenido mostrado en pantalla,
– Su disposición en pantalla (layout),
– La ejecución de contenido dinámico (Javascript),
– El tiempo que gasta la página o aplicación web en realizar cada
una de las acciones que lleva a cabo.
 En algunos casos, nos pueden dar sugerencias sobre como
optimizar la página o aplicación para que sea más eficiente.
6
Herramientas de depuración y análisis

Disponibles en los 3 navegadores mayoritarios (Chrome,
Firefox, Internet Explorer).

La mayoría de ellas disponibles en los 3. Algunas sólo en
uno o dos de ellos.

No todos tienen la misma funcionalidad disponible en
cada tipo de herramienta.

Conviene usar más de un navegador para poder cubrir
mejor nuestras necesidades.
7
Firefox Developer Edition
8
Firefox estándar con Developer Tools
9
Google Chrome DevTools
10
Programa
 Introducción a las herramientas de depuración y análisis en el
navegador.
 La consola de Javascript / consola web.
 El depurador de Javascript.
 El inspector de código HTML: visualiza y manipula el HTML
directamente en el navegador.
 El editor de estilos: analiza y modifica el CSS directamente en el
navegador.
 El analizador de conexiones de red: dónde se conecta mi navegador
y qué se descarga.
 Testeo de sitios web para tablets y smart phones con el navegador
(responsive web design / device mode).
 El analizador de rendimiento: en qué gasta el tiempo mi navegador.
 Herramientas relacionadas.
11
La consola de Javascript / consola web

La consola de Javascript o consola web integra los
mensajes de error y avisos de Javascript, CSS y otros
componentes como seguridad, red, etc. (depende del
navegador).

También integra los mensajes de error, aviso, información
y depuración del JavaScript ejecutado en el contexto de la
página.

Además permite interactuar con la página web ejecutando
expresiones de JavaScript en el contexto de la página.

Muestra sólo información asociada con la página en
cuestión.
12
La consola de Javascript / consola web

En Firefox, además de consola web, hay consola de
navegador. Muestra errores, avisos y mensajes de todas
las páginas web, del navegador y de las extensiones.

Para abrir la consola web se pueden usar 2 métodos:
– Menús:
●
Firefox: Herramientas >> Desarrollor Web >> Consola web
●
Firefox: Herramientas >> Desarrollor Web >> Consola del navegador
●
Chrome: Herramientas >> Más herramientas >> Consola JavaScript
– Atajos de teclado:
●
Firefox consola web: Ctrl + Shift + K (Mac OSX: Cmd + Opt + K)
●
Firefox consola navegador: Ctrl + Shift + J (Mac OSX: Cmd + Opt + J)
●
Chrome: Ctrl + Shift + J (en Mac OSX: Cmd + Opt + J)
13
La consola Javascript en Chrome

1: Mensajes visualizados

2: Ejecución de JavaScript

3: Borrar el contenido de la consola

4: Mantener mensajes entre peticiones de páginas

5: Selección de tipo de mensajes a mostrar.

6: Selección de frame/iframe con el que trabajar
14
La consola Javascript en Chrome

1: Filtrado de mensajes a mostrar, de entre los registrados.

2: Usar expresiones regulares para el filtrado

3: Selección del tipo de mensajes a mostrar para cada categoría (All,
Errors, Warnings, Info, Logs, Debug)

4: Ocultar los mensajes relacionados con la red.
15
La consola web en Firefox

1: Mensajes visualizados

2: Ejecución de JavaScript

3: Borrar el contenido de la consola

4: Selección del tipo de mensajes a mostrar para cada categoría (Red,
CSS, JS, etc.)

5: Filtrado de mensajes a mostrar, de entre los registrados.
16
La consola de navegador Firefox
17
Programa
 Introducción a las herramientas de depuración y análisis en el
navegador.
 La consola de Javascript / consola web.
 El depurador de Javascript.
 El inspector de código HTML: visualiza y manipula el HTML
directamente en el navegador.
 El editor de estilos: analiza y modifica el CSS directamente en el
navegador.
 El analizador de conexiones de red: dónde se conecta mi navegador
y qué se descarga.
 Testeo de sitios web para tablets y smart phones con el navegador
(responsive web design / device mode).
 El analizador de rendimiento: en qué gasta el tiempo mi navegador.
 Herramientas relacionadas.
18
El depurador de Javascript

Nos permite depurar el JavaScript de la página cargada.

Para ello nos ofrece:
– Puntos de ruptura
– Ejecución paso a paso
– Inspección y modificación de variables
– "Pretty-printing" del código de JavaScript (muy útil con
JavaScript minificado).
19
El depurador de Javascript en Chrome
20
El depurador de Javascript en Chrome
21

Para añadir o
manipular un break
point, click (normal o
derecho) con el
ratón en los números
de línea.

Se pueden usar
break points
condicionales
El depurador de Javascript en Chrome
22

Una vez
parados en un
break point,
podemos ver la
pila de llamadas
en el área "Call
Stack".

Para ver la ruta de ejecución incluyendo callbacks
asíncronas como los del timer o los eventos XHR,
marcar la casilla Async.
El depurador de Javascript en Chrome
23

1: Expresiones que estamos vigilando en los break points.

2: Para añadir nuevas expresiones a vigilar (para eliminarlas, botón
derecho y "Delete watch expression).

3: Lista de variables locales a la función, o globales a la página. No sólo
para consultar valores, también podemos modificar el valor.
El depurador de Javascript en Chrome
24

Podemos pedirle al depurador de Javascript que trate un script como
una caja negra, y no nos cuente nada de lo que pasa dentro, ignore los
break points, no pare en las excepciones, etc.

Seleccionar la fuente del script, pulsar botón derecho, elegir
"Blackbox script".

Para deshacer, seleccionar la fuente del script, pulsar botón derecho,
elegir "Stop Blackboxing".
El depurador de Javascript en Chrome
25

1: Pretty-Print
El depurador de Javascript en Firefox
26
El depurador de Javascript en Firefox
27
El depurador de Javascript en Firefox
28
Events with listeners
El depurador de Javascript en Firefox
29

Para añadir o
manipular un break
point, click (normal o
derecho) con el
ratón en los números
de línea.

Break points
condicionales: botón
derecho en el
número de línea y
luego "Añadir punto
de ruptura
condicional"
El depurador de Javascript en Firefox
30

Una vez
parados en un
break point,
podemos ver la
pila de llamadas
en el área "Call
Stack".

Al contrario que en Chrome, no se puede ver la ruta de ejecución incluyendo
las callbacks asíncronas como los del timer o los eventos XHR.
El depurador de Javascript en Firefox
31

1: Expresiones que estamos vigilando en los break points.

2: Para añadir nuevas expresiones a vigilar (para eliminarlas, pulsar la 'x'
marcada con el número 5).

3: Lista de variables locales a la función. No sólo para consultar valores,
también podemos modificar el valor.

4: Lista de variables globales a la página. Idem que en el caso anterior.
El depurador de Javascript en Firefox
32

Podemos pedirle al depurador de Javascript que trate un script como
una caja negra, y no nos cuente nada de lo que pasa dentro, ignore los
break points, no pare en las excepciones, etc.
Programa
 Introducción a las herramientas de depuración y análisis en el
navegador.
 La consola de Javascript / consola web.
 El depurador de Javascript.
 El inspector de código HTML: visualiza y manipula el HTML
directamente en el navegador.
 El editor de estilos: analiza y modifica el CSS directamente en el
navegador.
 El analizador de conexiones de red: dónde se conecta mi navegador
y qué se descarga.
 Testeo de sitios web para tablets y smart phones con el navegador
(responsive web design / device mode).
 El analizador de rendimiento: en qué gasta el tiempo mi navegador.
 Herramientas relacionadas.
33
El inspector de código HTML

El inspector de código HTML nos permite ver la
información estructural de la página actual.

Importante: el HTML fuente enviado por el servidor web
no tienen porqué ser el HTML que estemos viendo en la
página:
– El código JavaScript puede estar cambiando el HTML de forma
dinámica a través del árbol DOM (Document Object Model)
– Por tanto "Ver código fuente" o inspeccionar el HTML pueden
mostrar cosas diferentes.
34
El inspector de código HTML

La inspección del código HTML nos muestra una
representación en tiempo real del HTML mostrado por el
navegador.

Podemos usar la inspección para:
– Inspeccionar el HTML real de la página en cada momento.
– Modificar el HTML en el navegador directamente, para probar
diferentes contenidos y formatos de forma rápida.
35
El inspector de código HTML en Chrome

Podemos navegar por el ábol DOM en el panel "Elements" o inspeccionar
un elemento individual de forma visual con el botón derecho (3).
36
El inspector de código HTML en Chrome

O de forma interactiva pulsando el botón de la lupa (2) y moviendo el
ratón por la página para selccionar el elemento deseado.
37
El inspector de código HTML en Chrome

Podemos navegar por los elementos del árbol DOM pulsando en los iconos
de flecha(1) y (2) que hay en cada elemento, para expandir su
contenido o colapsarlo respectivamente.

También se pueden usar los cursores del teclado (↑: elemento anterior,
↓: elemento siguiente, →: expandir, ←: colapsar).

En todo momento podemos consultar la ruta del árbol DOM del elemento
inspeccionado actualmente (3)
38
El inspector de código HTML en Chrome

Podemos editar los elementos (nodos) y sus atributos
directamente en el navegador.

Para editar un nodo, hacer doble clic en la etiqueta de
apertura del nodo y aceptar los cambios pulsando Enter o
clicando en otro sitio.

Para los atributos:
– hacer doble clic en el nombre del atributo para cambiar su
nombre.
– hacer doble clic en el valor del atributo para cambiar su valor.
– o botón derecho sobre el atributo y "Edit attribute"

Para añadir atributos, botón derecho sobre el nodo y "Add
attribute".
39
El inspector de código HTML en Chrome

Podemos editar el nodo como HTML puro y duro.

Botón derecho sobre el nodo y "Edit as HTML"

Pulsar fuera de la zona de edición para aceptar los
cambios, o pulsar Esc para desecharlos.
40
El inspector de código HTML en Chrome

Podemos borrar nodos pulsando con el botón derecho
sobre el nodo y "Delete".

Podemos reordenar nodos arrastranto y soltando los
nodos.

Podemos asignar break points ligados a la modificación del
nodo:
– Para modificaciones del subárbol (si es un elemento contenedor
como div, ul, etc.)
– Para modificaciones de sus atributos
– Para la eliminación del nodo

Botón derecho sobre el nodo y "Break on..." y elegir la
opción deseada.
41
El inspector de código HTML en Firefox

Podemos navegar por el ábol DOM en el panel "Inspector" o inspeccionar
un elemento individual de forma visual con el botón derecho (3).
42
El inspector de código HTML en Firefox

O de forma interactiva pulsando el botón de inspección (2) y moviendo el
ratón por la página para selccionar el elemento deseado.
43
El inspector de código HTML en Firefox

Podemos navegar por los elementos del árbol DOM pulsando en los iconos
de flecha(1) y (2) que hay en cada elemento, para expandir su
contenido o colapsarlo respectivamente.

También se pueden usar los cursores del teclado (↑: elemento anterior,
↓: elemento siguiente, →: expandir, ←: colapsar).

En todo momento podemos consultar la ruta del árbol DOM del elemento
inspeccionado actualmente (3)
44
El inspector de código HTML en Firefox

Podemos editar los elementos (nodos) y sus atributos
directamente en el navegador.

Para editar un nodo, hacer doble clic en la etiqueta de
apertura del nodo y aceptar los cambios pulsando Enter o
clicando en otro sitio.

Para los atributos:
– hacer doble clic en el nombre del atributo para cambiar su
nombre.
– hacer doble clic en el valor del atributo para cambiar su valor.

Para añadir atributos, doble clic sobre el último atributo y
luego pulsar Tab hasta que aparece un recuadro punteado
vacío para el nuevo atributo. Luego doble clic en él.
45
El inspector de código HTML en Firefox

Podemos editar el nodo como HTML puro y duro.

Botón derecho sobre el nodo y "Editar como HTML"

Pulsar fuera de la zona de edición para aceptar los
cambios, o pulsar Esc para desecharlos.
46
El inspector de código HTML en Firefox

Podemos borrar nodos pulsando con el botón derecho
sobre el nodo y "Eliminar nodo".

Por ahora en Firenox no se puede reordenar nodos
arrastranto y soltando los nodos (será posible a partir de la
version 39).

Por ahora tampoco podemos asignar break points ligados
a la modificación del nodo. Para poder hacerlo
necesitamos la extensión Firebug.
47
Programa
 Introducción a las herramientas de depuración y análisis en el
navegador.
 La consola de Javascript / consola web.
 El depurador de Javascript.
 El inspector de código HTML: visualiza y manipula el HTML
directamente en el navegador.
 El editor de estilos: analiza y modifica el CSS directamente en el
navegador.
 El analizador de conexiones de red: dónde se conecta mi navegador
y qué se descarga.
 Testeo de sitios web para tablets y smart phones con el navegador
(responsive web design / device mode).
 El analizador de rendimiento: en qué gasta el tiempo mi navegador.
 Herramientas relacionadas.
48
El editor de estilos

Nos muestra una representación en tiempo real del CSS
utilizado por el navegador para componer y visualizar los
contenidos de la página.

Podemos usar el editor de estilos CSS para diferentes:
– Inspeccionar el CSS real de cada elemento de la página en el
instante actual.
– Modificar el CSS en el navegador directamente, para probar
diferentes composiciones y disposiciones (layouts) de forma
rápida.
– Añadir nuevas reglas al CSS que se nos ha enviado desde el
navegador, o que se han creado usando JavaScript.

Podemos ver qué conjuntos de reglas y con qué
precedencia se están aplicando a un elemento dado, así
como la herencia de éstas. 49
El editor de estilos en Chrome

1: estilo asociado con el selector
que coincide con el elemento

2: regla con elemento sobrescrito
por una regla con mayor
precedencia o especificidad

3: las reglas de la hoja de estilos
del "user agent" se marcan
claramente.

4: los estilos del autor tiene mayor
prioridad que los del "user agent",
por lo que se sobrescriben.
50

5: Los estilos heredados se muestran con una cabecera "Inherited from [node]".

6: El selector ":root body" tiene más prioridad que sólo "body", por tanto su
declaración es preferente.

7: La propiedad "font-family" del nodo "body" se sobrescribe (en el selector
"div"). Pasa lo mismo con la propiedad "font-size" (en el selector ":root body")
El editor de estilos en Chrome
51

Podemos deshabilitar temporalmente propiedades específicas marcando o
desmarcando sus casillas asociadas (1).
El editor de estilos en Chrome
52

Podemos editar cambiar la propiedad asociada a un estilo (selector) pulsando
sobre su nombre(1).

Podemos cambiar el valor de la propiedad pulsando sobre su valor (2)

Podemos añadir nuevas propiedades haciendo clic en cualquier zona en blanco
dentro del estilo (p.ej. debajo de la última propiedad definida) (3)

Y podemos añadir nuevos estilos pulsando en el icono "+" de cualquier regla
existente (4).

Todos los cambios son temporales. Se pierden al recargar la página.
El editor de estilos en Chrome
53

Si la propiedad es para especificar un color, lo podemos editar también de forma
visual pulsando sobre la muestra del color (1). Luego podemos seleccionar el
color con el ratón pinchando en la zona de color deseado (2). En todo momento
se nos muestra el color en el formato RGB (3) usado por las propiedades CSS.
El editor de estilos en Chrome
54

El apartado de métricas (al finl del panel de "Styles", o directamente en el panel
"Computed"), muestra visualmente con los estilos afectan al modelo de caja de
CSS (2) del elemento seleccionado (1).
El editor de estilos en Firefox
55

1: estilo asociado con el selector del elemento.

2 y 3: propiedades que sobrescribe regla con menor prioridad o especificidad.

4 y 5: los estilos del autor (2 y 3) tiene mayor prioridad que los heredados, por lo
que se sobrescriben.

6 y 7: Los estilos heredados se muestran con una cabecera "Heredado de [nodo]".

8: Fichero y línea del mismo donde se definie el estilo (selector).
El editor de estilos en Firefox
56

Podemos deshabilitar temporalmente propiedades específicas marcando o
desmarcando sus casillas asociadas (1).
El editor de estilos en Firefox
57

Podemos editar cambiar la propiedad asociada a un estilo (selector) pulsando
sobre su nombre(1).

Podemos cambiar el valor de la propiedad pulsando sobre su valor (2)

Podemos añadir nuevas propiedades haciendo clic en cualquier zona en blanco
dentro del estilo (p.ej. debajo de la última propiedad definida) (3)

Y podemos añadir nuevos estilos pulsando el botón derecho en cualquier parte
del panel de reglas y eligiendo "Añadir regla".

Todos los cambios son temporales. Se pierden al recargar la página.
El editor de estilos en Firefox
58

Si la propiedad es para especificar un color, lo podemos editar también de forma
visual pulsando sobre la muestra del color (1). Luego podemos seleccionar el
color con el ratón pinchando en la zona de color deseado (2). En todo momento
se nos muestra el color en el formato RGB (3) usado por las propiedades CSS.
El editor de estilos en Firefox
59

El panel "Modelo de caja", muestra visualmente con los estilos afectan al modelo
de caja de CSS (2) del elemento seleccionado (1).
Programa
 Introducción a las herramientas de depuración y análisis en el
navegador.
 La consola de Javascript / consola web.
 El depurador de Javascript.
 El inspector de código HTML: visualiza y manipula el HTML
directamente en el navegador.
 El editor de estilos: analiza y modifica el CSS directamente en el
navegador.
 El analizador de conexiones de red: dónde se conecta mi navegador
y qué se descarga.
 Testeo de sitios web para tablets y smart phones con el navegador
(responsive web design / device mode).
 El analizador de rendimiento: en qué gasta el tiempo mi navegador.
 Herramientas relacionadas.
60
El analizador de conexiones de red

En analizador de conexiones de red registra información
sobre cada operación de red de la página web, incluyendo:
– temporización detallada,
– cabeceras HTTP de solicitudes y respuestas,
– cookies
– datos de WebSockets
– y más.
61
El analizador de conexiones de red

El analizador de conexiones nos permite obtener
información para preguntas como:
– qué recurso fue el más lento en recibir su primer byte,
– qué recursos necesitaron más tiempo para cargarse,
– quién inicio una solicitud de red determinada
– Cuánto tiempo se gastó en cada una de las varias fases de red
para un recurso determinado.
62
El analizador de conexiones de red en Chrome
63
El analizador de conexiones de red en Chrome

Name and Path: nombre y URL del recurso, respectivamente.

Method: método HTTP usado para la solicitud. P.ej. GET o POST.

Status and Text: El estado HTTP y el mensaje de texto asociado.

Domain: el dominio del recurso solicitado.

Type: el tipo MIME del recurso solicitado

Initiator: el objeto o proceso que ha iniciado la solicitud. Puede
tener uno de los siguientes valores:
– Parser: el parser HTML de Chrome ha iniciado la solicitud.
– Redirect: una redirección HTTP ha iniciado la solicitud.
– Script: un script de JavaScript ha iniciado la solicitud.
– Other: algún otro proceso o acción ha iniciado la solicitud, tal como el
usuario pulsando un enlace, o introduciendo una URL en la barra de
direcciones.
64
El analizador de conexiones de red en Chrome

Cookies: El número de cookies transferida en la solicitud. Corresponden
con las cookies mostradas en la pestaña "Cookies" cuando se ven los
detalles de un recurso determinado.

Set-Cookies: El número de cookies enviadas en la solicitud HTTP.

Size and Content: "Size" es el tamaño combinado de las cabeceras de la
respuesta más el cuerpo de la respuesta, tal y como los envia el servidor.
"Content" es el tamaño del contenido decodificado del recurso. Si el
recurso se ha cargado de la caché del navegador, este campo contendrá el
texto "(from cache)".

Time and Latency: "Time" es la duración total, desde el inicio de la
solicitud hasta la recepción del último byte de la respuesta. "Latency" es el
tiempo hasta la recepción del primer byte de la respuesta.

Timeline: La columna "Timeline" muestra de forma visual las solicitudes de
red. Pulsando en la cabecera de esta columna se muestra un menú con
opciones adicionales de ordenación.
65
El analizador de conexiones de red en Chrome

Pulsando en las cabeceras de cada columna se pueden ordenar las
peticiones en función de ese criterio, de forma ascendente o descendente.

Se pueden filtrar las solicitudes mostradas pulsando el icono de botones
filtrado (el embudo).

Se pueden usar filtros avanzados usando la casilla "Filter". Ver opciones en
https://developer.chrome.com/devtools/docs/network#advanced-filtering
66
El analizador de conexiones de red en Chrome

Si en la columna de "Timeline" pasamos el ratón sobre una solicitud
cualquiera, obtenemos información detallada sobre los tiempos gastados
en cada una de las fases de red de esa petición.

Para interpretar los diferentes tiempos, ver
https://developer.chrome.com/devtools/docs/network#resource-network-
timing
67
El analizador de conexiones de red en Chrome

Si pulsamos sobre una solicitud cualquiera, se nos muestran las cabeceras
de la solicitud, una previsualización de la respuesta, la respuesta en sí, las
cookies intercambiadas en la solicitud, y los tiempos comentados
anterioremente (para los websockets la información es ligeramente
diferente).
68
El analizador de conexiones de red en Firefox
69
El analizador de conexiones de red en Firefox

√: el código de estado HTTP devuelto. Se muestra con un código de
colores: verde para éxito (códigos 2XX), naranja para redirecciones
(3XX), o rojo para errores(4XX and 5XX). También se muestra el
código exacto

Method (método): método de solicitud HTTP usado (GET, POST, etc.)

File (Archivo): nombre base del fichero solicitado.

Domain (dominio): dominio de la ruta solicitada. A partir de Firefox
38, si se usa SSL/TLS y la conexión tiene debilidades de seguridad, se
muestra un triángulo de advertencia junto al dominio. Se pueden
ver más detalles en la pestaña de Seguridad.

Type (Tipo): tipo MIME de la respuesta.

Size (Tamaño): el tamaño del recurso, después de ser
descomprimido (si era necesario).

También se muestra de forma visual las solicitudes de red
70
El analizador de conexiones de red en Firefox

Pulsando en las cabeceras de cada columna se pueden ordenar las
peticiones en función de ese criterio, de forma ascendente o descendente.

Se pueden filtrar las solicitudes por tipo de solicidu pulsando en los
botones de la zona inferior del panel:
71
El analizador de conexiones de red en Firefox

Si pulsamos sobre una solicitud cualquiera, se nos muestran las cabeceras
de la solicitud, las cookies intercambiadas en la solicitud, los parámetros
de la solicitud, la respuesta en sí, los tiempos gastados por la solicitud y
una previsualización de la respuesta.
72
El analizador de conexiones de red en Firefox

Si pulsamos en la pestaña "Temporizaciones" (Timings)obtenemos
información detallada sobre los tiempos gastados en cada una de las fases
de red de esa petición.
73
El analizador de conexiones de red en Firefox

Podemos activar el análisis de rendimiento de red (pulsando en el icono
del reloj mostrado junto al número de solicitudes, tamaño y tiempo
transcurrido).

El analizador de conexiones carga dos veces el sitio: una con la caché del
navegador vacía, y otra con la caché cargada. Esto simula la primera vez
que alguien visita el siito, y las visitas posteriores. Luego grafica los
resultados para poder compararlos:
74
Programa
 Introducción a las herramientas de depuración y análisis en el
navegador.
 La consola de Javascript / consola web.
 El depurador de Javascript.
 El inspector de código HTML: visualiza y manipula el HTML
directamente en el navegador.
 El editor de estilos: analiza y modifica el CSS directamente en el
navegador.
 El analizador de conexiones de red: dónde se conecta mi navegador
y qué se descarga.
 Testeo de sitios web para tablets y smart phones con el navegador
(responsive web design / device mode).
 El analizador de rendimiento: en qué gasta el tiempo mi navegador.
 Herramientas relacionadas.
75
Responsive Web Design / Device Mode

El diseño adaptable o responsive designs se adapta a diferentes tamaños
de pantalla para proporcionar una presentación que sea adecuada para los
diferentes tipos de dispositivos como teléfonos móviles o tables.

La vista de diseño adaptable hace sencillo ver como e visualizará la página
web o aplicación web en diferentes tamaños de pantalla.

Permite simular eventos de "pulsaciones" o "gestos" típicos de los
dispositivos móviles.

En el caso de Chrome, el modo de dispositivo no solo permite comprobar
como se visualizará la página en un dispositivo determinado, sino que se
puede simular las condiciones de red disponibles en dicho tipo de
dispositivos (redes GPRS, 2G, 3G, etc.)
76

Para habilitar este modo, pulsar sobre el icono o pulsar
Ctrl + Shift + M (Mac OSX: Cmd + Opt + M)
Device Mode en Chrome
77

1: Tipo de dispositivo a simular (en los ajustes de Chrome
DevTools, sección "Devices" se pueden añadir nuevos
tipos)

2: Tipo de conectividad a simular

3: Dimensiones de pantalla a simular

4: "User-Agent" a simular para la petición

5: Mostrar (o no) las media-queries.

6: Detalles de las media-queries usadas por la página. Si
ponemos el ratón por encima de ellas, se nos ofrecen los
detalles. Con el botón derecho, nos lleva a la definición en
los CSS (ver
https://developer.chrome.com/devtools/docs/device-
mode#media-queries).
Device Mode en Chrome
78

Podemos emular los gestos de pulsaciones (por ahora hay
que arrancar Chrome con la opción –touch-events por un
bug):
– Pulsar y mover el ratón para simular arrastar el dedo.
– Pulsar Shift y mover el ratón para simular un "pinch".
Device Mode en Chrome
79

Es mucho más limitado que en Chrome.

Para habilitar este modo, pulsar sobre el icono o pulsar
Ctrl + Shift + M (Mac OSX: Cmd + Opt + M)
Responsive Web Desgins en Firefox
80

Podemos seleccionar o definir (tecleando las dimensiones)
el tamaño de pantalla, o redimensionarla con el ratón,
podemos rotarla (apaisado, vertical), simular eventos de
toque o sacar un pantallazo de la página:
Responsive Web Desgins en Firefox
81
Programa
 Introducción a las herramientas de depuración y análisis en el
navegador.
 La consola de Javascript / consola web.
 El depurador de Javascript.
 El inspector de código HTML: visualiza y manipula el HTML
directamente en el navegador.
 El editor de estilos: analiza y modifica el CSS directamente en el
navegador.
 El analizador de conexiones de red: dónde se conecta mi navegador
y qué se descarga.
 Testeo de sitios web para tablets y smart phones con el navegador
(responsive web design / device mode).
 El analizador de rendimiento: en qué gasta el tiempo mi navegador.
 Herramientas relacionadas.
82
El analizador de rendimiento en Chrome

El panel "Timeline" nos da una visión completa de dónde se gasta el tiempo
cuando se carga y usa una página o aplicación web. Todos los eventos, desde la
carga de los recursos hasta el parseo de JavaScript, el cálculo de los estilos o el
repintado de las diferentes partes de la página se grafican en una línea temporal
(ver https://developer.chrome.com/devtools/docs/timeline):
83
El perfilador en Chrome

Nos permite perfilar el tiempo de ejecución y el uso de memoria de una página o
aplicación web. Así podemos saber dónde se gastan los recursos y poder
optimizar el código (ver https://developer.chrome.com/devtools/docs/profiles).

Se puede visualizar como listado de funciones por consumo de CPU:
84
El perfilador en Chrome

O se puede visualizar como un gráfico de consumos por llamadas a lo largo del
tiempo:
85
El analizador de rendimiento en Firefox

Proporciona informaciones similares al caso de Chrome
86
El perfilador en Firefox

Proporciona informaciones similares al caso de Chrome (ver detalles
exactos en https://developer.mozilla.org/en-US/docs/Tools/Performance)
87
Programa
 Introducción a las herramientas de depuración y análisis en el
navegador.
 La consola de Javascript / consola web.
 El depurador de Javascript.
 El inspector de código HTML: visualiza y manipula el HTML
directamente en el navegador.
 El editor de estilos: analiza y modifica el CSS directamente en el
navegador.
 El analizador de conexiones de red: dónde se conecta mi navegador
y qué se descarga.
 Testeo de sitios web para tablets y smart phones con el navegador
(responsive web design / device mode).
 El analizador de rendimiento: en qué gasta el tiempo mi navegador.
 Herramientas relacionadas.
88
Herramientas relacionadas para Firefox
 Firebug: https://www.getfirebug.com/
 DOM Inspector: https://developer.mozilla.org/en-
US/docs/Tools/Add-ons/DOM_Inspector
 Web Developer: https://addons.mozilla.org/en-
US/firefox/addon/web-developer/
 Webmaker Tools: https://webmaker.org/en-
US/tools/
 Más herramientas en la categoría "Web
development" en https://addons.mozilla.org/en-
US/firefox/extensions/web-development/
89
Herramientas relacionadas para Chrome
 Extensiones para Chrome DevTools:
https://developer.chrome.com/devtools/docs/exte
nsions-gallery
90
Herramientas relacionadas independientes del
navegador
 JSHint: http://www.jshint.com/
 W3C validators:
– HTML validator: http://validator.w3.org/source/
– CSS validator: http://jigsaw.w3.org/css-
validator/
– Integrated validator:
http://validator.w3.org/unicorn
91
Documentación adicional
 Documentación oficial de Firefox Developer Tools:
https://developer.mozilla.org/en-US/docs/Tools
 Tutoriales de desarrollo web:
https://developer.mozilla.org/en-
US/docs/Web/Tutorials
 Documentación oficial de Chrome DevTools:
https://developer.chrome.com/devtools
 Curso gratuito online en inglés, con subtitulos en
español disponibles, sobre Chome DevTools:
– http://discover-devtools.codeschool.com/
92

Más contenido relacionado

La actualidad más candente

Presentacion chrome os. a mayen
Presentacion chrome os. a mayenPresentacion chrome os. a mayen
Presentacion chrome os. a mayenillpwnya
 
Forjas y repositorios de código en la nube. Euskal Encounter 2015
Forjas y repositorios de código en la nube. Euskal Encounter 2015Forjas y repositorios de código en la nube. Euskal Encounter 2015
Forjas y repositorios de código en la nube. Euskal Encounter 2015Iñaki Arenaza
 
Google Chrome OS
Google Chrome OSGoogle Chrome OS
Google Chrome OSxxexa
 
Sistema Operativo Google Chrome OS
Sistema Operativo Google Chrome OSSistema Operativo Google Chrome OS
Sistema Operativo Google Chrome OSaleceles
 
Monografía Sistema Operativo Google Chrome OS
Monografía Sistema Operativo Google Chrome OSMonografía Sistema Operativo Google Chrome OS
Monografía Sistema Operativo Google Chrome OSAdrianJoseVegas
 
Los sistemas operativos en la nube
Los sistemas operativos en la nubeLos sistemas operativos en la nube
Los sistemas operativos en la nubeDiego Castiglioni
 
Actividad 2 tecnologìa educativa
Actividad 2 tecnologìa educativaActividad 2 tecnologìa educativa
Actividad 2 tecnologìa educativapilywily
 
NavegadoresIvanVergel
NavegadoresIvanVergelNavegadoresIvanVergel
NavegadoresIvanVergelIvAn Vergel
 
Tecnología educativa ii
Tecnología educativa iiTecnología educativa ii
Tecnología educativa iiamoradry
 
Sistemas operativos google chrome os
Sistemas operativos google chrome osSistemas operativos google chrome os
Sistemas operativos google chrome osJorge ALOS
 
Exploradores navegadores de internet
Exploradores navegadores de internetExploradores navegadores de internet
Exploradores navegadores de internetValentin Flores
 
Navegadores comunes en la red
Navegadores comunes en la redNavegadores comunes en la red
Navegadores comunes en la redjessydutan1
 
Navegadores de internet
Navegadores de internetNavegadores de internet
Navegadores de internetMaura Benitez
 
Tecnología educativa ii
Tecnología educativa iiTecnología educativa ii
Tecnología educativa iiamoradry
 

La actualidad más candente (20)

Presentacion chrome os. a mayen
Presentacion chrome os. a mayenPresentacion chrome os. a mayen
Presentacion chrome os. a mayen
 
Google Chrome os
Google Chrome osGoogle Chrome os
Google Chrome os
 
Forjas y repositorios de código en la nube. Euskal Encounter 2015
Forjas y repositorios de código en la nube. Euskal Encounter 2015Forjas y repositorios de código en la nube. Euskal Encounter 2015
Forjas y repositorios de código en la nube. Euskal Encounter 2015
 
En 20 minutos ... Chrome Developer Tools
En 20 minutos ... Chrome Developer ToolsEn 20 minutos ... Chrome Developer Tools
En 20 minutos ... Chrome Developer Tools
 
Google Chrome OS
Google Chrome OSGoogle Chrome OS
Google Chrome OS
 
Google chrome os
Google chrome osGoogle chrome os
Google chrome os
 
Sistema Operativo Google Chrome OS
Sistema Operativo Google Chrome OSSistema Operativo Google Chrome OS
Sistema Operativo Google Chrome OS
 
Google crome os
Google crome osGoogle crome os
Google crome os
 
Monografía Sistema Operativo Google Chrome OS
Monografía Sistema Operativo Google Chrome OSMonografía Sistema Operativo Google Chrome OS
Monografía Sistema Operativo Google Chrome OS
 
Los sistemas operativos en la nube
Los sistemas operativos en la nubeLos sistemas operativos en la nube
Los sistemas operativos en la nube
 
Actividad 2 tecnologìa educativa
Actividad 2 tecnologìa educativaActividad 2 tecnologìa educativa
Actividad 2 tecnologìa educativa
 
NavegadoresIvanVergel
NavegadoresIvanVergelNavegadoresIvanVergel
NavegadoresIvanVergel
 
Tipos de navegadores de internet
Tipos de navegadores de internetTipos de navegadores de internet
Tipos de navegadores de internet
 
Tecnología educativa ii
Tecnología educativa iiTecnología educativa ii
Tecnología educativa ii
 
Sistemas operativos google chrome os
Sistemas operativos google chrome osSistemas operativos google chrome os
Sistemas operativos google chrome os
 
Maria teresa morelos (3)
Maria teresa morelos (3)Maria teresa morelos (3)
Maria teresa morelos (3)
 
Exploradores navegadores de internet
Exploradores navegadores de internetExploradores navegadores de internet
Exploradores navegadores de internet
 
Navegadores comunes en la red
Navegadores comunes en la redNavegadores comunes en la red
Navegadores comunes en la red
 
Navegadores de internet
Navegadores de internetNavegadores de internet
Navegadores de internet
 
Tecnología educativa ii
Tecnología educativa iiTecnología educativa ii
Tecnología educativa ii
 

Destacado

Personalizar google chrome y añadir marcadores
Personalizar google chrome y añadir marcadoresPersonalizar google chrome y añadir marcadores
Personalizar google chrome y añadir marcadoresTomás Martí
 
Limpiar Windows, Internet Explorer y Chrome
Limpiar Windows, Internet Explorer y ChromeLimpiar Windows, Internet Explorer y Chrome
Limpiar Windows, Internet Explorer y ChromeJuan Astudillo
 
Catalogue Aspirateur centralisé ZCV
Catalogue Aspirateur centralisé ZCV Catalogue Aspirateur centralisé ZCV
Catalogue Aspirateur centralisé ZCV Homexity
 
Tutorial google chrome
Tutorial google chromeTutorial google chrome
Tutorial google chromeFabiola López
 
Planification de la gestion et de l’entretien d’infrastructures à...
Planification de la gestion et de l’entretien d’infrastructures à...Planification de la gestion et de l’entretien d’infrastructures à...
Planification de la gestion et de l’entretien d’infrastructures à...VisionGÉOMATIQUE2012
 
Case 580 k_schema_hydraulique
Case 580 k_schema_hydrauliqueCase 580 k_schema_hydraulique
Case 580 k_schema_hydrauliqueelmandoub
 
Le contrôle des Petites Installations d’Assainissement
Le contrôle des Petites Installations d’AssainissementLe contrôle des Petites Installations d’Assainissement
Le contrôle des Petites Installations d’Assainissementidealconnaissances
 
Assainissement du sol_epfl
Assainissement du sol_epflAssainissement du sol_epfl
Assainissement du sol_epfltchamouz
 
Litiges et contentieux entre les acteurs de l’ANC, causes récurrentes et cons...
Litiges et contentieux entre les acteurs de l’ANC, causes récurrentes et cons...Litiges et contentieux entre les acteurs de l’ANC, causes récurrentes et cons...
Litiges et contentieux entre les acteurs de l’ANC, causes récurrentes et cons...idealconnaissances
 
Leather Tanning
Leather TanningLeather Tanning
Leather Tanningsblack0206
 
Burberry: Digitale Küsse mit Google verschicken
Burberry: Digitale Küsse mit Google verschickenBurberry: Digitale Küsse mit Google verschicken
Burberry: Digitale Küsse mit Google verschickenTWT
 
TWT Trendradar: Project Naptha
TWT Trendradar: Project Naptha TWT Trendradar: Project Naptha
TWT Trendradar: Project Naptha TWT
 
Das Web zum Mitmachen: Barrieren in der Praxis
Das Web zum Mitmachen: Barrieren in der PraxisDas Web zum Mitmachen: Barrieren in der Praxis
Das Web zum Mitmachen: Barrieren in der PraxisTomas Caspers
 
Comment créer des Chrome Apps ou Packaged Chrome Apps
Comment créer des Chrome Apps ou Packaged Chrome AppsComment créer des Chrome Apps ou Packaged Chrome Apps
Comment créer des Chrome Apps ou Packaged Chrome AppsBruno Soufo
 
Les vaccinations rappel calendrier vaccinal 2008
Les vaccinations rappel calendrier vaccinal 2008Les vaccinations rappel calendrier vaccinal 2008
Les vaccinations rappel calendrier vaccinal 2008esf3
 

Destacado (18)

BSI Lagebericht 2014
BSI Lagebericht 2014BSI Lagebericht 2014
BSI Lagebericht 2014
 
Personalizar google chrome y añadir marcadores
Personalizar google chrome y añadir marcadoresPersonalizar google chrome y añadir marcadores
Personalizar google chrome y añadir marcadores
 
Limpiar Windows, Internet Explorer y Chrome
Limpiar Windows, Internet Explorer y ChromeLimpiar Windows, Internet Explorer y Chrome
Limpiar Windows, Internet Explorer y Chrome
 
Sonaca : La collaboration Universités-Entreprises
Sonaca : La collaboration Universités-EntreprisesSonaca : La collaboration Universités-Entreprises
Sonaca : La collaboration Universités-Entreprises
 
Catalogue Aspirateur centralisé ZCV
Catalogue Aspirateur centralisé ZCV Catalogue Aspirateur centralisé ZCV
Catalogue Aspirateur centralisé ZCV
 
Tutorial google chrome
Tutorial google chromeTutorial google chrome
Tutorial google chrome
 
Planification de la gestion et de l’entretien d’infrastructures à...
Planification de la gestion et de l’entretien d’infrastructures à...Planification de la gestion et de l’entretien d’infrastructures à...
Planification de la gestion et de l’entretien d’infrastructures à...
 
Case 580 k_schema_hydraulique
Case 580 k_schema_hydrauliqueCase 580 k_schema_hydraulique
Case 580 k_schema_hydraulique
 
Le contrôle des Petites Installations d’Assainissement
Le contrôle des Petites Installations d’AssainissementLe contrôle des Petites Installations d’Assainissement
Le contrôle des Petites Installations d’Assainissement
 
Assainissement du sol_epfl
Assainissement du sol_epflAssainissement du sol_epfl
Assainissement du sol_epfl
 
Litiges et contentieux entre les acteurs de l’ANC, causes récurrentes et cons...
Litiges et contentieux entre les acteurs de l’ANC, causes récurrentes et cons...Litiges et contentieux entre les acteurs de l’ANC, causes récurrentes et cons...
Litiges et contentieux entre les acteurs de l’ANC, causes récurrentes et cons...
 
Leather Tanning
Leather TanningLeather Tanning
Leather Tanning
 
Burberry: Digitale Küsse mit Google verschicken
Burberry: Digitale Küsse mit Google verschickenBurberry: Digitale Küsse mit Google verschicken
Burberry: Digitale Küsse mit Google verschicken
 
Chrome for Work | CLOUDPILOTS FastTrack Update
Chrome for Work | CLOUDPILOTS FastTrack UpdateChrome for Work | CLOUDPILOTS FastTrack Update
Chrome for Work | CLOUDPILOTS FastTrack Update
 
TWT Trendradar: Project Naptha
TWT Trendradar: Project Naptha TWT Trendradar: Project Naptha
TWT Trendradar: Project Naptha
 
Das Web zum Mitmachen: Barrieren in der Praxis
Das Web zum Mitmachen: Barrieren in der PraxisDas Web zum Mitmachen: Barrieren in der Praxis
Das Web zum Mitmachen: Barrieren in der Praxis
 
Comment créer des Chrome Apps ou Packaged Chrome Apps
Comment créer des Chrome Apps ou Packaged Chrome AppsComment créer des Chrome Apps ou Packaged Chrome Apps
Comment créer des Chrome Apps ou Packaged Chrome Apps
 
Les vaccinations rappel calendrier vaccinal 2008
Les vaccinations rappel calendrier vaccinal 2008Les vaccinations rappel calendrier vaccinal 2008
Les vaccinations rappel calendrier vaccinal 2008
 

Similar a Mejora tu desarrollo web con Firefox Developer Edition y Google Chrome DevTools

Similar a Mejora tu desarrollo web con Firefox Developer Edition y Google Chrome DevTools (20)

Programación en ambiente web - Semana 2.pptx
Programación en ambiente web - Semana 2.pptxProgramación en ambiente web - Semana 2.pptx
Programación en ambiente web - Semana 2.pptx
 
Karen.pptxvgfgwer
Karen.pptxvgfgwerKaren.pptxvgfgwer
Karen.pptxvgfgwer
 
Karen.
Karen.Karen.
Karen.
 
Depurando Java Script - Programador PHP
Depurando Java Script - Programador PHPDepurando Java Script - Programador PHP
Depurando Java Script - Programador PHP
 
Taller Open Cms Instalacion
Taller Open Cms InstalacionTaller Open Cms Instalacion
Taller Open Cms Instalacion
 
Clientes web
Clientes webClientes web
Clientes web
 
Clientesweb 100623183305-phpapp02
Clientesweb 100623183305-phpapp02Clientesweb 100623183305-phpapp02
Clientesweb 100623183305-phpapp02
 
Colegio nacional nicolas esguerra
Colegio nacional nicolas esguerraColegio nacional nicolas esguerra
Colegio nacional nicolas esguerra
 
Colegio nacional nicolas esguerra
Colegio nacional nicolas esguerraColegio nacional nicolas esguerra
Colegio nacional nicolas esguerra
 
Aleinfo
AleinfoAleinfo
Aleinfo
 
Kompozer.
Kompozer.Kompozer.
Kompozer.
 
Navegadores web
Navegadores webNavegadores web
Navegadores web
 
Camila
CamilaCamila
Camila
 
Unidad 3
Unidad 3Unidad 3
Unidad 3
 
Tema 1. aplicaciones web
Tema 1. aplicaciones webTema 1. aplicaciones web
Tema 1. aplicaciones web
 
Tema 1. aplicaciones web
Tema 1. aplicaciones webTema 1. aplicaciones web
Tema 1. aplicaciones web
 
Programación del lado del cliente
Programación del lado del clienteProgramación del lado del cliente
Programación del lado del cliente
 
Unidad 3
Unidad 3Unidad 3
Unidad 3
 
Diferencias entre navegadores
Diferencias entre navegadoresDiferencias entre navegadores
Diferencias entre navegadores
 
Navegadores
NavegadoresNavegadores
Navegadores
 

Más de Iñaki Arenaza

Las claves para optimizar la seguridad de tu sitio WordPress
Las claves para optimizar la seguridad de tu sitio WordPressLas claves para optimizar la seguridad de tu sitio WordPress
Las claves para optimizar la seguridad de tu sitio WordPressIñaki Arenaza
 
10 Claves para mejorar la seguridad de tu WP
10 Claves para mejorar la seguridad de tu WP10 Claves para mejorar la seguridad de tu WP
10 Claves para mejorar la seguridad de tu WPIñaki Arenaza
 
Mahara, el bosón de Higgs, los horizontes de sucesos y los agujeros de gusano
Mahara, el bosón de Higgs, los horizontes de sucesos y los agujeros de gusanoMahara, el bosón de Higgs, los horizontes de sucesos y los agujeros de gusano
Mahara, el bosón de Higgs, los horizontes de sucesos y los agujeros de gusanoIñaki Arenaza
 
Forjas de Software: qué son y para que sirven
Forjas de Software: qué son y para que sirvenForjas de Software: qué son y para que sirven
Forjas de Software: qué son y para que sirvenIñaki Arenaza
 
Internacionalización con WordPress (WordPress Euskadi 2014)
Internacionalización con WordPress (WordPress Euskadi 2014)Internacionalización con WordPress (WordPress Euskadi 2014)
Internacionalización con WordPress (WordPress Euskadi 2014)Iñaki Arenaza
 
Móntate un sitio web completo con WordPress en 4 horas
Móntate un sitio web completo con WordPress en 4 horasMóntate un sitio web completo con WordPress en 4 horas
Móntate un sitio web completo con WordPress en 4 horasIñaki Arenaza
 
Buddypress: Social Networking, in a Box
Buddypress: Social Networking, in a BoxBuddypress: Social Networking, in a Box
Buddypress: Social Networking, in a BoxIñaki Arenaza
 
Git: Aprovecha las ventajas del control de versiones distribuido
Git: Aprovecha las ventajas del control de versiones distribuidoGit: Aprovecha las ventajas del control de versiones distribuido
Git: Aprovecha las ventajas del control de versiones distribuidoIñaki Arenaza
 
Monta WordPress en tu empresa
Monta WordPress en tu empresaMonta WordPress en tu empresa
Monta WordPress en tu empresaIñaki Arenaza
 
Mahara y Moodle - EDUSOL 2011
Mahara y Moodle - EDUSOL 2011Mahara y Moodle - EDUSOL 2011
Mahara y Moodle - EDUSOL 2011Iñaki Arenaza
 
Uso de git (Cursos de e-ghost 2011)
Uso de git (Cursos de e-ghost 2011)Uso de git (Cursos de e-ghost 2011)
Uso de git (Cursos de e-ghost 2011)Iñaki Arenaza
 
Integración de Mahara con Moodle (MoodleMoot España 2010)
Integración de Mahara con Moodle (MoodleMoot España 2010)Integración de Mahara con Moodle (MoodleMoot España 2010)
Integración de Mahara con Moodle (MoodleMoot España 2010)Iñaki Arenaza
 
Lo nuevo de Moodle 2.0 (MoodleMoot Colombia 2010)
Lo nuevo de Moodle 2.0 (MoodleMoot Colombia 2010)Lo nuevo de Moodle 2.0 (MoodleMoot Colombia 2010)
Lo nuevo de Moodle 2.0 (MoodleMoot Colombia 2010)Iñaki Arenaza
 
Mahoodle moot-colombia-2010
Mahoodle moot-colombia-2010Mahoodle moot-colombia-2010
Mahoodle moot-colombia-2010Iñaki Arenaza
 
Moodle: Un ejemplo del modelo de desarrollo y gestión de proyectos open source
Moodle: Un ejemplo del modelo de desarrollo y gestión de proyectos open sourceMoodle: Un ejemplo del modelo de desarrollo y gestión de proyectos open source
Moodle: Un ejemplo del modelo de desarrollo y gestión de proyectos open sourceIñaki Arenaza
 
Uso de Mahara con Moodle
Uso de Mahara con MoodleUso de Mahara con Moodle
Uso de Mahara con MoodleIñaki Arenaza
 
Uso de git para el mantenimiento de parches locales o públicos
Uso de git para el mantenimiento  de parches locales o públicosUso de git para el mantenimiento  de parches locales o públicos
Uso de git para el mantenimiento de parches locales o públicosIñaki Arenaza
 
Sesión formativa sobre web 2.0 MGEP-MU (5 y 6 Mayo 2008)
Sesión formativa sobre web 2.0 MGEP-MU (5 y 6 Mayo 2008)Sesión formativa sobre web 2.0 MGEP-MU (5 y 6 Mayo 2008)
Sesión formativa sobre web 2.0 MGEP-MU (5 y 6 Mayo 2008)Iñaki Arenaza
 

Más de Iñaki Arenaza (20)

Las claves para optimizar la seguridad de tu sitio WordPress
Las claves para optimizar la seguridad de tu sitio WordPressLas claves para optimizar la seguridad de tu sitio WordPress
Las claves para optimizar la seguridad de tu sitio WordPress
 
10 Claves para mejorar la seguridad de tu WP
10 Claves para mejorar la seguridad de tu WP10 Claves para mejorar la seguridad de tu WP
10 Claves para mejorar la seguridad de tu WP
 
Mahara, el bosón de Higgs, los horizontes de sucesos y los agujeros de gusano
Mahara, el bosón de Higgs, los horizontes de sucesos y los agujeros de gusanoMahara, el bosón de Higgs, los horizontes de sucesos y los agujeros de gusano
Mahara, el bosón de Higgs, los horizontes de sucesos y los agujeros de gusano
 
Forjas de Software: qué son y para que sirven
Forjas de Software: qué son y para que sirvenForjas de Software: qué son y para que sirven
Forjas de Software: qué son y para que sirven
 
Internacionalización con WordPress (WordPress Euskadi 2014)
Internacionalización con WordPress (WordPress Euskadi 2014)Internacionalización con WordPress (WordPress Euskadi 2014)
Internacionalización con WordPress (WordPress Euskadi 2014)
 
Móntate un sitio web completo con WordPress en 4 horas
Móntate un sitio web completo con WordPress en 4 horasMóntate un sitio web completo con WordPress en 4 horas
Móntate un sitio web completo con WordPress en 4 horas
 
Buddypress: Social Networking, in a Box
Buddypress: Social Networking, in a BoxBuddypress: Social Networking, in a Box
Buddypress: Social Networking, in a Box
 
Tunea tu wordpress
Tunea tu wordpressTunea tu wordpress
Tunea tu wordpress
 
Git: Aprovecha las ventajas del control de versiones distribuido
Git: Aprovecha las ventajas del control de versiones distribuidoGit: Aprovecha las ventajas del control de versiones distribuido
Git: Aprovecha las ventajas del control de versiones distribuido
 
Monta WordPress en tu empresa
Monta WordPress en tu empresaMonta WordPress en tu empresa
Monta WordPress en tu empresa
 
Mahara y Moodle - EDUSOL 2011
Mahara y Moodle - EDUSOL 2011Mahara y Moodle - EDUSOL 2011
Mahara y Moodle - EDUSOL 2011
 
Uso de git (Cursos de e-ghost 2011)
Uso de git (Cursos de e-ghost 2011)Uso de git (Cursos de e-ghost 2011)
Uso de git (Cursos de e-ghost 2011)
 
Mahoodle (English)
Mahoodle (English)Mahoodle (English)
Mahoodle (English)
 
Integración de Mahara con Moodle (MoodleMoot España 2010)
Integración de Mahara con Moodle (MoodleMoot España 2010)Integración de Mahara con Moodle (MoodleMoot España 2010)
Integración de Mahara con Moodle (MoodleMoot España 2010)
 
Lo nuevo de Moodle 2.0 (MoodleMoot Colombia 2010)
Lo nuevo de Moodle 2.0 (MoodleMoot Colombia 2010)Lo nuevo de Moodle 2.0 (MoodleMoot Colombia 2010)
Lo nuevo de Moodle 2.0 (MoodleMoot Colombia 2010)
 
Mahoodle moot-colombia-2010
Mahoodle moot-colombia-2010Mahoodle moot-colombia-2010
Mahoodle moot-colombia-2010
 
Moodle: Un ejemplo del modelo de desarrollo y gestión de proyectos open source
Moodle: Un ejemplo del modelo de desarrollo y gestión de proyectos open sourceMoodle: Un ejemplo del modelo de desarrollo y gestión de proyectos open source
Moodle: Un ejemplo del modelo de desarrollo y gestión de proyectos open source
 
Uso de Mahara con Moodle
Uso de Mahara con MoodleUso de Mahara con Moodle
Uso de Mahara con Moodle
 
Uso de git para el mantenimiento de parches locales o públicos
Uso de git para el mantenimiento  de parches locales o públicosUso de git para el mantenimiento  de parches locales o públicos
Uso de git para el mantenimiento de parches locales o públicos
 
Sesión formativa sobre web 2.0 MGEP-MU (5 y 6 Mayo 2008)
Sesión formativa sobre web 2.0 MGEP-MU (5 y 6 Mayo 2008)Sesión formativa sobre web 2.0 MGEP-MU (5 y 6 Mayo 2008)
Sesión formativa sobre web 2.0 MGEP-MU (5 y 6 Mayo 2008)
 

Último

EXPERIENCIA DE APRENDIZAJE 3 EPT - SECUNDARIA-2024.docx
EXPERIENCIA DE APRENDIZAJE 3  EPT - SECUNDARIA-2024.docxEXPERIENCIA DE APRENDIZAJE 3  EPT - SECUNDARIA-2024.docx
EXPERIENCIA DE APRENDIZAJE 3 EPT - SECUNDARIA-2024.docxssuser9be75b1
 
Manual guía Liderazgo y Equipo Ciclo 2024 - UPF Argentina
Manual guía Liderazgo y Equipo Ciclo 2024 - UPF ArgentinaManual guía Liderazgo y Equipo Ciclo 2024 - UPF Argentina
Manual guía Liderazgo y Equipo Ciclo 2024 - UPF ArgentinaUPF Argentina
 
Dia internacional de peliculas iberoamericanas.pptx 2
Dia internacional de peliculas iberoamericanas.pptx 2Dia internacional de peliculas iberoamericanas.pptx 2
Dia internacional de peliculas iberoamericanas.pptx 2xc025079
 
La Planificacion en Educacion Inicial EDU7 Ccesa007.pdf
La Planificacion en Educacion Inicial   EDU7    Ccesa007.pdfLa Planificacion en Educacion Inicial   EDU7    Ccesa007.pdf
La Planificacion en Educacion Inicial EDU7 Ccesa007.pdfDemetrio Ccesa Rayme
 
Actividades El Hombrecito de jengibre.pdf
Actividades El Hombrecito de jengibre.pdfActividades El Hombrecito de jengibre.pdf
Actividades El Hombrecito de jengibre.pdfDaiaJansen
 
3. ¡Promoviendo la Paternidad Responsable en La Recoleta!
3. ¡Promoviendo la Paternidad Responsable en La Recoleta!3. ¡Promoviendo la Paternidad Responsable en La Recoleta!
3. ¡Promoviendo la Paternidad Responsable en La Recoleta!ProfesorGualberto
 
5. ¡Promoviendo la Paternidad Responsable en La Recoleta!
5. ¡Promoviendo la Paternidad Responsable en La Recoleta!5. ¡Promoviendo la Paternidad Responsable en La Recoleta!
5. ¡Promoviendo la Paternidad Responsable en La Recoleta!ProfesorGualberto
 
7. ¡Promoviendo la Paternidad Responsable en La Recoleta!
7. ¡Promoviendo la Paternidad Responsable en La Recoleta!7. ¡Promoviendo la Paternidad Responsable en La Recoleta!
7. ¡Promoviendo la Paternidad Responsable en La Recoleta!ProfesorGualberto
 
2. ¡Promoviendo la Paternidad Responsable en La Recoleta!
2. ¡Promoviendo la Paternidad Responsable en La Recoleta!2. ¡Promoviendo la Paternidad Responsable en La Recoleta!
2. ¡Promoviendo la Paternidad Responsable en La Recoleta!ProfesorGualberto
 
10. ¡Promoviendo la Paternidad Responsable en La Recoleta!
10. ¡Promoviendo la Paternidad Responsable en La Recoleta!10. ¡Promoviendo la Paternidad Responsable en La Recoleta!
10. ¡Promoviendo la Paternidad Responsable en La Recoleta!ProfesorGualberto
 
Dia internacional de peliculas iberoamericanas.pptx
Dia internacional de peliculas iberoamericanas.pptxDia internacional de peliculas iberoamericanas.pptx
Dia internacional de peliculas iberoamericanas.pptxxc025079
 
2024-orientaciones-para-la-evaluacion-diagnostica-2024-en-las-iiee-publicas-d...
2024-orientaciones-para-la-evaluacion-diagnostica-2024-en-las-iiee-publicas-d...2024-orientaciones-para-la-evaluacion-diagnostica-2024-en-las-iiee-publicas-d...
2024-orientaciones-para-la-evaluacion-diagnostica-2024-en-las-iiee-publicas-d...William Henry Vegazo Muro
 
Proyecto del via crucis para semana s.docx
Proyecto del via crucis para semana s.docxProyecto del via crucis para semana s.docx
Proyecto del via crucis para semana s.docxYANETH ARENAS VALDIVIA
 
4. ¡Promoviendo la Paternidad Responsable en La Recoleta!
4. ¡Promoviendo la Paternidad Responsable en La Recoleta!4. ¡Promoviendo la Paternidad Responsable en La Recoleta!
4. ¡Promoviendo la Paternidad Responsable en La Recoleta!ProfesorGualberto
 
UNIDAD DE APRENIZAJE CERO QUINTO GRADO - 2024.docx
UNIDAD DE APRENIZAJE CERO QUINTO GRADO - 2024.docxUNIDAD DE APRENIZAJE CERO QUINTO GRADO - 2024.docx
UNIDAD DE APRENIZAJE CERO QUINTO GRADO - 2024.docxGLADYSP4
 

Último (20)

EXPERIENCIA DE APRENDIZAJE 3 EPT - SECUNDARIA-2024.docx
EXPERIENCIA DE APRENDIZAJE 3  EPT - SECUNDARIA-2024.docxEXPERIENCIA DE APRENDIZAJE 3  EPT - SECUNDARIA-2024.docx
EXPERIENCIA DE APRENDIZAJE 3 EPT - SECUNDARIA-2024.docx
 
Manual guía Liderazgo y Equipo Ciclo 2024 - UPF Argentina
Manual guía Liderazgo y Equipo Ciclo 2024 - UPF ArgentinaManual guía Liderazgo y Equipo Ciclo 2024 - UPF Argentina
Manual guía Liderazgo y Equipo Ciclo 2024 - UPF Argentina
 
Dia internacional de peliculas iberoamericanas.pptx 2
Dia internacional de peliculas iberoamericanas.pptx 2Dia internacional de peliculas iberoamericanas.pptx 2
Dia internacional de peliculas iberoamericanas.pptx 2
 
La Planificacion en Educacion Inicial EDU7 Ccesa007.pdf
La Planificacion en Educacion Inicial   EDU7    Ccesa007.pdfLa Planificacion en Educacion Inicial   EDU7    Ccesa007.pdf
La Planificacion en Educacion Inicial EDU7 Ccesa007.pdf
 
Actividades El Hombrecito de jengibre.pdf
Actividades El Hombrecito de jengibre.pdfActividades El Hombrecito de jengibre.pdf
Actividades El Hombrecito de jengibre.pdf
 
3. ¡Promoviendo la Paternidad Responsable en La Recoleta!
3. ¡Promoviendo la Paternidad Responsable en La Recoleta!3. ¡Promoviendo la Paternidad Responsable en La Recoleta!
3. ¡Promoviendo la Paternidad Responsable en La Recoleta!
 
5. ¡Promoviendo la Paternidad Responsable en La Recoleta!
5. ¡Promoviendo la Paternidad Responsable en La Recoleta!5. ¡Promoviendo la Paternidad Responsable en La Recoleta!
5. ¡Promoviendo la Paternidad Responsable en La Recoleta!
 
7. ¡Promoviendo la Paternidad Responsable en La Recoleta!
7. ¡Promoviendo la Paternidad Responsable en La Recoleta!7. ¡Promoviendo la Paternidad Responsable en La Recoleta!
7. ¡Promoviendo la Paternidad Responsable en La Recoleta!
 
GUIA MULTIPLICACION MATEMATICA SEGUNDO CICLO
GUIA MULTIPLICACION MATEMATICA SEGUNDO CICLOGUIA MULTIPLICACION MATEMATICA SEGUNDO CICLO
GUIA MULTIPLICACION MATEMATICA SEGUNDO CICLO
 
2. ¡Promoviendo la Paternidad Responsable en La Recoleta!
2. ¡Promoviendo la Paternidad Responsable en La Recoleta!2. ¡Promoviendo la Paternidad Responsable en La Recoleta!
2. ¡Promoviendo la Paternidad Responsable en La Recoleta!
 
El anhelo de Dios en Sion (Sesión de clase)
El anhelo de Dios en Sion (Sesión de clase)El anhelo de Dios en Sion (Sesión de clase)
El anhelo de Dios en Sion (Sesión de clase)
 
10. ¡Promoviendo la Paternidad Responsable en La Recoleta!
10. ¡Promoviendo la Paternidad Responsable en La Recoleta!10. ¡Promoviendo la Paternidad Responsable en La Recoleta!
10. ¡Promoviendo la Paternidad Responsable en La Recoleta!
 
Dia internacional de peliculas iberoamericanas.pptx
Dia internacional de peliculas iberoamericanas.pptxDia internacional de peliculas iberoamericanas.pptx
Dia internacional de peliculas iberoamericanas.pptx
 
2024-orientaciones-para-la-evaluacion-diagnostica-2024-en-las-iiee-publicas-d...
2024-orientaciones-para-la-evaluacion-diagnostica-2024-en-las-iiee-publicas-d...2024-orientaciones-para-la-evaluacion-diagnostica-2024-en-las-iiee-publicas-d...
2024-orientaciones-para-la-evaluacion-diagnostica-2024-en-las-iiee-publicas-d...
 
El anhelo de Dios en Sion, porque nos ama
El anhelo de Dios en Sion, porque nos amaEl anhelo de Dios en Sion, porque nos ama
El anhelo de Dios en Sion, porque nos ama
 
Proyecto del via crucis para semana s.docx
Proyecto del via crucis para semana s.docxProyecto del via crucis para semana s.docx
Proyecto del via crucis para semana s.docx
 
Tema 4.- Cultura corporativa: Comunicacion e imagen de marca.pdf
Tema 4.- Cultura corporativa: Comunicacion e imagen de marca.pdfTema 4.- Cultura corporativa: Comunicacion e imagen de marca.pdf
Tema 4.- Cultura corporativa: Comunicacion e imagen de marca.pdf
 
Tema 4.- INSFRAESTRUCTURAS DE TI Y TECNOLOGIAS EMERGENTES.pdf
Tema 4.- INSFRAESTRUCTURAS DE TI Y TECNOLOGIAS EMERGENTES.pdfTema 4.- INSFRAESTRUCTURAS DE TI Y TECNOLOGIAS EMERGENTES.pdf
Tema 4.- INSFRAESTRUCTURAS DE TI Y TECNOLOGIAS EMERGENTES.pdf
 
4. ¡Promoviendo la Paternidad Responsable en La Recoleta!
4. ¡Promoviendo la Paternidad Responsable en La Recoleta!4. ¡Promoviendo la Paternidad Responsable en La Recoleta!
4. ¡Promoviendo la Paternidad Responsable en La Recoleta!
 
UNIDAD DE APRENIZAJE CERO QUINTO GRADO - 2024.docx
UNIDAD DE APRENIZAJE CERO QUINTO GRADO - 2024.docxUNIDAD DE APRENIZAJE CERO QUINTO GRADO - 2024.docx
UNIDAD DE APRENIZAJE CERO QUINTO GRADO - 2024.docx
 

Mejora tu desarrollo web con Firefox Developer Edition y Google Chrome DevTools

  • 1. Mejora tu desarrollo web con Firefox Developer Edition y Google Chrome DevTools Iñaki Arenaza Mondragon Unibertsitatea iarenaza@mondragon.edu https://twitter.com/iarenaza https://linkedin.com/in/iarenaza Creative Commons Attribution Non-commercial Share Alike 3.0 Spain License
  • 2. Objetivos  Conocer las diferentes herramientas que proporcionan los navegadores actuales para analizar y optimizar el código de nuestras páginas web.  Aplicar esas herramientas con Firefox Developer Tools (y Firefox Developer Edition).  Aplicar esas herramientas con Google Chrome DevTools. 2
  • 3. Programa  Introducción a las herramientas de depuración y análisis en el navegador.  La consola de errores de Javascript.  El depurador de Javascript.  El inspector de código HTML: visualiza y manipula el HTML directamente en el navegador.  El editor de estilos: analiza y modifica el CSS directamente en el navegador.  El analizador de conexiones de red: dónde se conecta mi navegador y qué se descarga.  Testeo de sitios web para tablets y smart phones con el navegador (responsive web design / device mode).  El analizador de rendimiento: en qué gasta el tiempo mi navegador.  Herramientas relacionadas. 3
  • 4. Programa  Introducción a las herramientas de depuración y análisis en el navegador.  La consola de errores de Javascript.  El depurador de Javascript.  El inspector de código HTML: visualiza y manipula el HTML directamente en el navegador.  El editor de estilos: analiza y modifica el CSS directamente en el navegador.  El analizador de conexiones de red: dónde se conecta mi navegador y qué se descarga.  Testeo de sitios web para tablets y smart phones con el navegador (responsive web design / device mode).  El analizador de rendimiento: en qué gasta el tiempo mi navegador.  Herramientas relacionadas. 4
  • 5. Herramientas de depuración y análisis  Conjunto de herramientas de depuración, análisis y desarrollo incorporadas en los propios navegadores.  Proporcionan acceso a (ciertas) partes internas del navegador y nos permite interactuar con esas partes o modificar su comportamiento.  El objetivo es poder analizar y controlar qué hace la página o aplicación web visualizada en el navegador. 5
  • 6. Herramientas de depuración y análisis  Para ello nos permiten analizar o controlar entre otras cosas: – El contenido mostrado en pantalla, – Su disposición en pantalla (layout), – La ejecución de contenido dinámico (Javascript), – El tiempo que gasta la página o aplicación web en realizar cada una de las acciones que lleva a cabo.  En algunos casos, nos pueden dar sugerencias sobre como optimizar la página o aplicación para que sea más eficiente. 6
  • 7. Herramientas de depuración y análisis  Disponibles en los 3 navegadores mayoritarios (Chrome, Firefox, Internet Explorer).  La mayoría de ellas disponibles en los 3. Algunas sólo en uno o dos de ellos.  No todos tienen la misma funcionalidad disponible en cada tipo de herramienta.  Conviene usar más de un navegador para poder cubrir mejor nuestras necesidades. 7
  • 9. Firefox estándar con Developer Tools 9
  • 11. Programa  Introducción a las herramientas de depuración y análisis en el navegador.  La consola de Javascript / consola web.  El depurador de Javascript.  El inspector de código HTML: visualiza y manipula el HTML directamente en el navegador.  El editor de estilos: analiza y modifica el CSS directamente en el navegador.  El analizador de conexiones de red: dónde se conecta mi navegador y qué se descarga.  Testeo de sitios web para tablets y smart phones con el navegador (responsive web design / device mode).  El analizador de rendimiento: en qué gasta el tiempo mi navegador.  Herramientas relacionadas. 11
  • 12. La consola de Javascript / consola web  La consola de Javascript o consola web integra los mensajes de error y avisos de Javascript, CSS y otros componentes como seguridad, red, etc. (depende del navegador).  También integra los mensajes de error, aviso, información y depuración del JavaScript ejecutado en el contexto de la página.  Además permite interactuar con la página web ejecutando expresiones de JavaScript en el contexto de la página.  Muestra sólo información asociada con la página en cuestión. 12
  • 13. La consola de Javascript / consola web  En Firefox, además de consola web, hay consola de navegador. Muestra errores, avisos y mensajes de todas las páginas web, del navegador y de las extensiones.  Para abrir la consola web se pueden usar 2 métodos: – Menús: ● Firefox: Herramientas >> Desarrollor Web >> Consola web ● Firefox: Herramientas >> Desarrollor Web >> Consola del navegador ● Chrome: Herramientas >> Más herramientas >> Consola JavaScript – Atajos de teclado: ● Firefox consola web: Ctrl + Shift + K (Mac OSX: Cmd + Opt + K) ● Firefox consola navegador: Ctrl + Shift + J (Mac OSX: Cmd + Opt + J) ● Chrome: Ctrl + Shift + J (en Mac OSX: Cmd + Opt + J) 13
  • 14. La consola Javascript en Chrome  1: Mensajes visualizados  2: Ejecución de JavaScript  3: Borrar el contenido de la consola  4: Mantener mensajes entre peticiones de páginas  5: Selección de tipo de mensajes a mostrar.  6: Selección de frame/iframe con el que trabajar 14
  • 15. La consola Javascript en Chrome  1: Filtrado de mensajes a mostrar, de entre los registrados.  2: Usar expresiones regulares para el filtrado  3: Selección del tipo de mensajes a mostrar para cada categoría (All, Errors, Warnings, Info, Logs, Debug)  4: Ocultar los mensajes relacionados con la red. 15
  • 16. La consola web en Firefox  1: Mensajes visualizados  2: Ejecución de JavaScript  3: Borrar el contenido de la consola  4: Selección del tipo de mensajes a mostrar para cada categoría (Red, CSS, JS, etc.)  5: Filtrado de mensajes a mostrar, de entre los registrados. 16
  • 17. La consola de navegador Firefox 17
  • 18. Programa  Introducción a las herramientas de depuración y análisis en el navegador.  La consola de Javascript / consola web.  El depurador de Javascript.  El inspector de código HTML: visualiza y manipula el HTML directamente en el navegador.  El editor de estilos: analiza y modifica el CSS directamente en el navegador.  El analizador de conexiones de red: dónde se conecta mi navegador y qué se descarga.  Testeo de sitios web para tablets y smart phones con el navegador (responsive web design / device mode).  El analizador de rendimiento: en qué gasta el tiempo mi navegador.  Herramientas relacionadas. 18
  • 19. El depurador de Javascript  Nos permite depurar el JavaScript de la página cargada.  Para ello nos ofrece: – Puntos de ruptura – Ejecución paso a paso – Inspección y modificación de variables – "Pretty-printing" del código de JavaScript (muy útil con JavaScript minificado). 19
  • 20. El depurador de Javascript en Chrome 20
  • 21. El depurador de Javascript en Chrome 21  Para añadir o manipular un break point, click (normal o derecho) con el ratón en los números de línea.  Se pueden usar break points condicionales
  • 22. El depurador de Javascript en Chrome 22  Una vez parados en un break point, podemos ver la pila de llamadas en el área "Call Stack".  Para ver la ruta de ejecución incluyendo callbacks asíncronas como los del timer o los eventos XHR, marcar la casilla Async.
  • 23. El depurador de Javascript en Chrome 23  1: Expresiones que estamos vigilando en los break points.  2: Para añadir nuevas expresiones a vigilar (para eliminarlas, botón derecho y "Delete watch expression).  3: Lista de variables locales a la función, o globales a la página. No sólo para consultar valores, también podemos modificar el valor.
  • 24. El depurador de Javascript en Chrome 24  Podemos pedirle al depurador de Javascript que trate un script como una caja negra, y no nos cuente nada de lo que pasa dentro, ignore los break points, no pare en las excepciones, etc.  Seleccionar la fuente del script, pulsar botón derecho, elegir "Blackbox script".  Para deshacer, seleccionar la fuente del script, pulsar botón derecho, elegir "Stop Blackboxing".
  • 25. El depurador de Javascript en Chrome 25  1: Pretty-Print
  • 26. El depurador de Javascript en Firefox 26
  • 27. El depurador de Javascript en Firefox 27
  • 28. El depurador de Javascript en Firefox 28 Events with listeners
  • 29. El depurador de Javascript en Firefox 29  Para añadir o manipular un break point, click (normal o derecho) con el ratón en los números de línea.  Break points condicionales: botón derecho en el número de línea y luego "Añadir punto de ruptura condicional"
  • 30. El depurador de Javascript en Firefox 30  Una vez parados en un break point, podemos ver la pila de llamadas en el área "Call Stack".  Al contrario que en Chrome, no se puede ver la ruta de ejecución incluyendo las callbacks asíncronas como los del timer o los eventos XHR.
  • 31. El depurador de Javascript en Firefox 31  1: Expresiones que estamos vigilando en los break points.  2: Para añadir nuevas expresiones a vigilar (para eliminarlas, pulsar la 'x' marcada con el número 5).  3: Lista de variables locales a la función. No sólo para consultar valores, también podemos modificar el valor.  4: Lista de variables globales a la página. Idem que en el caso anterior.
  • 32. El depurador de Javascript en Firefox 32  Podemos pedirle al depurador de Javascript que trate un script como una caja negra, y no nos cuente nada de lo que pasa dentro, ignore los break points, no pare en las excepciones, etc.
  • 33. Programa  Introducción a las herramientas de depuración y análisis en el navegador.  La consola de Javascript / consola web.  El depurador de Javascript.  El inspector de código HTML: visualiza y manipula el HTML directamente en el navegador.  El editor de estilos: analiza y modifica el CSS directamente en el navegador.  El analizador de conexiones de red: dónde se conecta mi navegador y qué se descarga.  Testeo de sitios web para tablets y smart phones con el navegador (responsive web design / device mode).  El analizador de rendimiento: en qué gasta el tiempo mi navegador.  Herramientas relacionadas. 33
  • 34. El inspector de código HTML  El inspector de código HTML nos permite ver la información estructural de la página actual.  Importante: el HTML fuente enviado por el servidor web no tienen porqué ser el HTML que estemos viendo en la página: – El código JavaScript puede estar cambiando el HTML de forma dinámica a través del árbol DOM (Document Object Model) – Por tanto "Ver código fuente" o inspeccionar el HTML pueden mostrar cosas diferentes. 34
  • 35. El inspector de código HTML  La inspección del código HTML nos muestra una representación en tiempo real del HTML mostrado por el navegador.  Podemos usar la inspección para: – Inspeccionar el HTML real de la página en cada momento. – Modificar el HTML en el navegador directamente, para probar diferentes contenidos y formatos de forma rápida. 35
  • 36. El inspector de código HTML en Chrome  Podemos navegar por el ábol DOM en el panel "Elements" o inspeccionar un elemento individual de forma visual con el botón derecho (3). 36
  • 37. El inspector de código HTML en Chrome  O de forma interactiva pulsando el botón de la lupa (2) y moviendo el ratón por la página para selccionar el elemento deseado. 37
  • 38. El inspector de código HTML en Chrome  Podemos navegar por los elementos del árbol DOM pulsando en los iconos de flecha(1) y (2) que hay en cada elemento, para expandir su contenido o colapsarlo respectivamente.  También se pueden usar los cursores del teclado (↑: elemento anterior, ↓: elemento siguiente, →: expandir, ←: colapsar).  En todo momento podemos consultar la ruta del árbol DOM del elemento inspeccionado actualmente (3) 38
  • 39. El inspector de código HTML en Chrome  Podemos editar los elementos (nodos) y sus atributos directamente en el navegador.  Para editar un nodo, hacer doble clic en la etiqueta de apertura del nodo y aceptar los cambios pulsando Enter o clicando en otro sitio.  Para los atributos: – hacer doble clic en el nombre del atributo para cambiar su nombre. – hacer doble clic en el valor del atributo para cambiar su valor. – o botón derecho sobre el atributo y "Edit attribute"  Para añadir atributos, botón derecho sobre el nodo y "Add attribute". 39
  • 40. El inspector de código HTML en Chrome  Podemos editar el nodo como HTML puro y duro.  Botón derecho sobre el nodo y "Edit as HTML"  Pulsar fuera de la zona de edición para aceptar los cambios, o pulsar Esc para desecharlos. 40
  • 41. El inspector de código HTML en Chrome  Podemos borrar nodos pulsando con el botón derecho sobre el nodo y "Delete".  Podemos reordenar nodos arrastranto y soltando los nodos.  Podemos asignar break points ligados a la modificación del nodo: – Para modificaciones del subárbol (si es un elemento contenedor como div, ul, etc.) – Para modificaciones de sus atributos – Para la eliminación del nodo  Botón derecho sobre el nodo y "Break on..." y elegir la opción deseada. 41
  • 42. El inspector de código HTML en Firefox  Podemos navegar por el ábol DOM en el panel "Inspector" o inspeccionar un elemento individual de forma visual con el botón derecho (3). 42
  • 43. El inspector de código HTML en Firefox  O de forma interactiva pulsando el botón de inspección (2) y moviendo el ratón por la página para selccionar el elemento deseado. 43
  • 44. El inspector de código HTML en Firefox  Podemos navegar por los elementos del árbol DOM pulsando en los iconos de flecha(1) y (2) que hay en cada elemento, para expandir su contenido o colapsarlo respectivamente.  También se pueden usar los cursores del teclado (↑: elemento anterior, ↓: elemento siguiente, →: expandir, ←: colapsar).  En todo momento podemos consultar la ruta del árbol DOM del elemento inspeccionado actualmente (3) 44
  • 45. El inspector de código HTML en Firefox  Podemos editar los elementos (nodos) y sus atributos directamente en el navegador.  Para editar un nodo, hacer doble clic en la etiqueta de apertura del nodo y aceptar los cambios pulsando Enter o clicando en otro sitio.  Para los atributos: – hacer doble clic en el nombre del atributo para cambiar su nombre. – hacer doble clic en el valor del atributo para cambiar su valor.  Para añadir atributos, doble clic sobre el último atributo y luego pulsar Tab hasta que aparece un recuadro punteado vacío para el nuevo atributo. Luego doble clic en él. 45
  • 46. El inspector de código HTML en Firefox  Podemos editar el nodo como HTML puro y duro.  Botón derecho sobre el nodo y "Editar como HTML"  Pulsar fuera de la zona de edición para aceptar los cambios, o pulsar Esc para desecharlos. 46
  • 47. El inspector de código HTML en Firefox  Podemos borrar nodos pulsando con el botón derecho sobre el nodo y "Eliminar nodo".  Por ahora en Firenox no se puede reordenar nodos arrastranto y soltando los nodos (será posible a partir de la version 39).  Por ahora tampoco podemos asignar break points ligados a la modificación del nodo. Para poder hacerlo necesitamos la extensión Firebug. 47
  • 48. Programa  Introducción a las herramientas de depuración y análisis en el navegador.  La consola de Javascript / consola web.  El depurador de Javascript.  El inspector de código HTML: visualiza y manipula el HTML directamente en el navegador.  El editor de estilos: analiza y modifica el CSS directamente en el navegador.  El analizador de conexiones de red: dónde se conecta mi navegador y qué se descarga.  Testeo de sitios web para tablets y smart phones con el navegador (responsive web design / device mode).  El analizador de rendimiento: en qué gasta el tiempo mi navegador.  Herramientas relacionadas. 48
  • 49. El editor de estilos  Nos muestra una representación en tiempo real del CSS utilizado por el navegador para componer y visualizar los contenidos de la página.  Podemos usar el editor de estilos CSS para diferentes: – Inspeccionar el CSS real de cada elemento de la página en el instante actual. – Modificar el CSS en el navegador directamente, para probar diferentes composiciones y disposiciones (layouts) de forma rápida. – Añadir nuevas reglas al CSS que se nos ha enviado desde el navegador, o que se han creado usando JavaScript.  Podemos ver qué conjuntos de reglas y con qué precedencia se están aplicando a un elemento dado, así como la herencia de éstas. 49
  • 50. El editor de estilos en Chrome  1: estilo asociado con el selector que coincide con el elemento  2: regla con elemento sobrescrito por una regla con mayor precedencia o especificidad  3: las reglas de la hoja de estilos del "user agent" se marcan claramente.  4: los estilos del autor tiene mayor prioridad que los del "user agent", por lo que se sobrescriben. 50  5: Los estilos heredados se muestran con una cabecera "Inherited from [node]".  6: El selector ":root body" tiene más prioridad que sólo "body", por tanto su declaración es preferente.  7: La propiedad "font-family" del nodo "body" se sobrescribe (en el selector "div"). Pasa lo mismo con la propiedad "font-size" (en el selector ":root body")
  • 51. El editor de estilos en Chrome 51  Podemos deshabilitar temporalmente propiedades específicas marcando o desmarcando sus casillas asociadas (1).
  • 52. El editor de estilos en Chrome 52  Podemos editar cambiar la propiedad asociada a un estilo (selector) pulsando sobre su nombre(1).  Podemos cambiar el valor de la propiedad pulsando sobre su valor (2)  Podemos añadir nuevas propiedades haciendo clic en cualquier zona en blanco dentro del estilo (p.ej. debajo de la última propiedad definida) (3)  Y podemos añadir nuevos estilos pulsando en el icono "+" de cualquier regla existente (4).  Todos los cambios son temporales. Se pierden al recargar la página.
  • 53. El editor de estilos en Chrome 53  Si la propiedad es para especificar un color, lo podemos editar también de forma visual pulsando sobre la muestra del color (1). Luego podemos seleccionar el color con el ratón pinchando en la zona de color deseado (2). En todo momento se nos muestra el color en el formato RGB (3) usado por las propiedades CSS.
  • 54. El editor de estilos en Chrome 54  El apartado de métricas (al finl del panel de "Styles", o directamente en el panel "Computed"), muestra visualmente con los estilos afectan al modelo de caja de CSS (2) del elemento seleccionado (1).
  • 55. El editor de estilos en Firefox 55  1: estilo asociado con el selector del elemento.  2 y 3: propiedades que sobrescribe regla con menor prioridad o especificidad.  4 y 5: los estilos del autor (2 y 3) tiene mayor prioridad que los heredados, por lo que se sobrescriben.  6 y 7: Los estilos heredados se muestran con una cabecera "Heredado de [nodo]".  8: Fichero y línea del mismo donde se definie el estilo (selector).
  • 56. El editor de estilos en Firefox 56  Podemos deshabilitar temporalmente propiedades específicas marcando o desmarcando sus casillas asociadas (1).
  • 57. El editor de estilos en Firefox 57  Podemos editar cambiar la propiedad asociada a un estilo (selector) pulsando sobre su nombre(1).  Podemos cambiar el valor de la propiedad pulsando sobre su valor (2)  Podemos añadir nuevas propiedades haciendo clic en cualquier zona en blanco dentro del estilo (p.ej. debajo de la última propiedad definida) (3)  Y podemos añadir nuevos estilos pulsando el botón derecho en cualquier parte del panel de reglas y eligiendo "Añadir regla".  Todos los cambios son temporales. Se pierden al recargar la página.
  • 58. El editor de estilos en Firefox 58  Si la propiedad es para especificar un color, lo podemos editar también de forma visual pulsando sobre la muestra del color (1). Luego podemos seleccionar el color con el ratón pinchando en la zona de color deseado (2). En todo momento se nos muestra el color en el formato RGB (3) usado por las propiedades CSS.
  • 59. El editor de estilos en Firefox 59  El panel "Modelo de caja", muestra visualmente con los estilos afectan al modelo de caja de CSS (2) del elemento seleccionado (1).
  • 60. Programa  Introducción a las herramientas de depuración y análisis en el navegador.  La consola de Javascript / consola web.  El depurador de Javascript.  El inspector de código HTML: visualiza y manipula el HTML directamente en el navegador.  El editor de estilos: analiza y modifica el CSS directamente en el navegador.  El analizador de conexiones de red: dónde se conecta mi navegador y qué se descarga.  Testeo de sitios web para tablets y smart phones con el navegador (responsive web design / device mode).  El analizador de rendimiento: en qué gasta el tiempo mi navegador.  Herramientas relacionadas. 60
  • 61. El analizador de conexiones de red  En analizador de conexiones de red registra información sobre cada operación de red de la página web, incluyendo: – temporización detallada, – cabeceras HTTP de solicitudes y respuestas, – cookies – datos de WebSockets – y más. 61
  • 62. El analizador de conexiones de red  El analizador de conexiones nos permite obtener información para preguntas como: – qué recurso fue el más lento en recibir su primer byte, – qué recursos necesitaron más tiempo para cargarse, – quién inicio una solicitud de red determinada – Cuánto tiempo se gastó en cada una de las varias fases de red para un recurso determinado. 62
  • 63. El analizador de conexiones de red en Chrome 63
  • 64. El analizador de conexiones de red en Chrome  Name and Path: nombre y URL del recurso, respectivamente.  Method: método HTTP usado para la solicitud. P.ej. GET o POST.  Status and Text: El estado HTTP y el mensaje de texto asociado.  Domain: el dominio del recurso solicitado.  Type: el tipo MIME del recurso solicitado  Initiator: el objeto o proceso que ha iniciado la solicitud. Puede tener uno de los siguientes valores: – Parser: el parser HTML de Chrome ha iniciado la solicitud. – Redirect: una redirección HTTP ha iniciado la solicitud. – Script: un script de JavaScript ha iniciado la solicitud. – Other: algún otro proceso o acción ha iniciado la solicitud, tal como el usuario pulsando un enlace, o introduciendo una URL en la barra de direcciones. 64
  • 65. El analizador de conexiones de red en Chrome  Cookies: El número de cookies transferida en la solicitud. Corresponden con las cookies mostradas en la pestaña "Cookies" cuando se ven los detalles de un recurso determinado.  Set-Cookies: El número de cookies enviadas en la solicitud HTTP.  Size and Content: "Size" es el tamaño combinado de las cabeceras de la respuesta más el cuerpo de la respuesta, tal y como los envia el servidor. "Content" es el tamaño del contenido decodificado del recurso. Si el recurso se ha cargado de la caché del navegador, este campo contendrá el texto "(from cache)".  Time and Latency: "Time" es la duración total, desde el inicio de la solicitud hasta la recepción del último byte de la respuesta. "Latency" es el tiempo hasta la recepción del primer byte de la respuesta.  Timeline: La columna "Timeline" muestra de forma visual las solicitudes de red. Pulsando en la cabecera de esta columna se muestra un menú con opciones adicionales de ordenación. 65
  • 66. El analizador de conexiones de red en Chrome  Pulsando en las cabeceras de cada columna se pueden ordenar las peticiones en función de ese criterio, de forma ascendente o descendente.  Se pueden filtrar las solicitudes mostradas pulsando el icono de botones filtrado (el embudo).  Se pueden usar filtros avanzados usando la casilla "Filter". Ver opciones en https://developer.chrome.com/devtools/docs/network#advanced-filtering 66
  • 67. El analizador de conexiones de red en Chrome  Si en la columna de "Timeline" pasamos el ratón sobre una solicitud cualquiera, obtenemos información detallada sobre los tiempos gastados en cada una de las fases de red de esa petición.  Para interpretar los diferentes tiempos, ver https://developer.chrome.com/devtools/docs/network#resource-network- timing 67
  • 68. El analizador de conexiones de red en Chrome  Si pulsamos sobre una solicitud cualquiera, se nos muestran las cabeceras de la solicitud, una previsualización de la respuesta, la respuesta en sí, las cookies intercambiadas en la solicitud, y los tiempos comentados anterioremente (para los websockets la información es ligeramente diferente). 68
  • 69. El analizador de conexiones de red en Firefox 69
  • 70. El analizador de conexiones de red en Firefox  √: el código de estado HTTP devuelto. Se muestra con un código de colores: verde para éxito (códigos 2XX), naranja para redirecciones (3XX), o rojo para errores(4XX and 5XX). También se muestra el código exacto  Method (método): método de solicitud HTTP usado (GET, POST, etc.)  File (Archivo): nombre base del fichero solicitado.  Domain (dominio): dominio de la ruta solicitada. A partir de Firefox 38, si se usa SSL/TLS y la conexión tiene debilidades de seguridad, se muestra un triángulo de advertencia junto al dominio. Se pueden ver más detalles en la pestaña de Seguridad.  Type (Tipo): tipo MIME de la respuesta.  Size (Tamaño): el tamaño del recurso, después de ser descomprimido (si era necesario).  También se muestra de forma visual las solicitudes de red 70
  • 71. El analizador de conexiones de red en Firefox  Pulsando en las cabeceras de cada columna se pueden ordenar las peticiones en función de ese criterio, de forma ascendente o descendente.  Se pueden filtrar las solicitudes por tipo de solicidu pulsando en los botones de la zona inferior del panel: 71
  • 72. El analizador de conexiones de red en Firefox  Si pulsamos sobre una solicitud cualquiera, se nos muestran las cabeceras de la solicitud, las cookies intercambiadas en la solicitud, los parámetros de la solicitud, la respuesta en sí, los tiempos gastados por la solicitud y una previsualización de la respuesta. 72
  • 73. El analizador de conexiones de red en Firefox  Si pulsamos en la pestaña "Temporizaciones" (Timings)obtenemos información detallada sobre los tiempos gastados en cada una de las fases de red de esa petición. 73
  • 74. El analizador de conexiones de red en Firefox  Podemos activar el análisis de rendimiento de red (pulsando en el icono del reloj mostrado junto al número de solicitudes, tamaño y tiempo transcurrido).  El analizador de conexiones carga dos veces el sitio: una con la caché del navegador vacía, y otra con la caché cargada. Esto simula la primera vez que alguien visita el siito, y las visitas posteriores. Luego grafica los resultados para poder compararlos: 74
  • 75. Programa  Introducción a las herramientas de depuración y análisis en el navegador.  La consola de Javascript / consola web.  El depurador de Javascript.  El inspector de código HTML: visualiza y manipula el HTML directamente en el navegador.  El editor de estilos: analiza y modifica el CSS directamente en el navegador.  El analizador de conexiones de red: dónde se conecta mi navegador y qué se descarga.  Testeo de sitios web para tablets y smart phones con el navegador (responsive web design / device mode).  El analizador de rendimiento: en qué gasta el tiempo mi navegador.  Herramientas relacionadas. 75
  • 76. Responsive Web Design / Device Mode  El diseño adaptable o responsive designs se adapta a diferentes tamaños de pantalla para proporcionar una presentación que sea adecuada para los diferentes tipos de dispositivos como teléfonos móviles o tables.  La vista de diseño adaptable hace sencillo ver como e visualizará la página web o aplicación web en diferentes tamaños de pantalla.  Permite simular eventos de "pulsaciones" o "gestos" típicos de los dispositivos móviles.  En el caso de Chrome, el modo de dispositivo no solo permite comprobar como se visualizará la página en un dispositivo determinado, sino que se puede simular las condiciones de red disponibles en dicho tipo de dispositivos (redes GPRS, 2G, 3G, etc.) 76
  • 77.  Para habilitar este modo, pulsar sobre el icono o pulsar Ctrl + Shift + M (Mac OSX: Cmd + Opt + M) Device Mode en Chrome 77
  • 78.  1: Tipo de dispositivo a simular (en los ajustes de Chrome DevTools, sección "Devices" se pueden añadir nuevos tipos)  2: Tipo de conectividad a simular  3: Dimensiones de pantalla a simular  4: "User-Agent" a simular para la petición  5: Mostrar (o no) las media-queries.  6: Detalles de las media-queries usadas por la página. Si ponemos el ratón por encima de ellas, se nos ofrecen los detalles. Con el botón derecho, nos lleva a la definición en los CSS (ver https://developer.chrome.com/devtools/docs/device- mode#media-queries). Device Mode en Chrome 78
  • 79.  Podemos emular los gestos de pulsaciones (por ahora hay que arrancar Chrome con la opción –touch-events por un bug): – Pulsar y mover el ratón para simular arrastar el dedo. – Pulsar Shift y mover el ratón para simular un "pinch". Device Mode en Chrome 79
  • 80.  Es mucho más limitado que en Chrome.  Para habilitar este modo, pulsar sobre el icono o pulsar Ctrl + Shift + M (Mac OSX: Cmd + Opt + M) Responsive Web Desgins en Firefox 80
  • 81.  Podemos seleccionar o definir (tecleando las dimensiones) el tamaño de pantalla, o redimensionarla con el ratón, podemos rotarla (apaisado, vertical), simular eventos de toque o sacar un pantallazo de la página: Responsive Web Desgins en Firefox 81
  • 82. Programa  Introducción a las herramientas de depuración y análisis en el navegador.  La consola de Javascript / consola web.  El depurador de Javascript.  El inspector de código HTML: visualiza y manipula el HTML directamente en el navegador.  El editor de estilos: analiza y modifica el CSS directamente en el navegador.  El analizador de conexiones de red: dónde se conecta mi navegador y qué se descarga.  Testeo de sitios web para tablets y smart phones con el navegador (responsive web design / device mode).  El analizador de rendimiento: en qué gasta el tiempo mi navegador.  Herramientas relacionadas. 82
  • 83. El analizador de rendimiento en Chrome  El panel "Timeline" nos da una visión completa de dónde se gasta el tiempo cuando se carga y usa una página o aplicación web. Todos los eventos, desde la carga de los recursos hasta el parseo de JavaScript, el cálculo de los estilos o el repintado de las diferentes partes de la página se grafican en una línea temporal (ver https://developer.chrome.com/devtools/docs/timeline): 83
  • 84. El perfilador en Chrome  Nos permite perfilar el tiempo de ejecución y el uso de memoria de una página o aplicación web. Así podemos saber dónde se gastan los recursos y poder optimizar el código (ver https://developer.chrome.com/devtools/docs/profiles).  Se puede visualizar como listado de funciones por consumo de CPU: 84
  • 85. El perfilador en Chrome  O se puede visualizar como un gráfico de consumos por llamadas a lo largo del tiempo: 85
  • 86. El analizador de rendimiento en Firefox  Proporciona informaciones similares al caso de Chrome 86
  • 87. El perfilador en Firefox  Proporciona informaciones similares al caso de Chrome (ver detalles exactos en https://developer.mozilla.org/en-US/docs/Tools/Performance) 87
  • 88. Programa  Introducción a las herramientas de depuración y análisis en el navegador.  La consola de Javascript / consola web.  El depurador de Javascript.  El inspector de código HTML: visualiza y manipula el HTML directamente en el navegador.  El editor de estilos: analiza y modifica el CSS directamente en el navegador.  El analizador de conexiones de red: dónde se conecta mi navegador y qué se descarga.  Testeo de sitios web para tablets y smart phones con el navegador (responsive web design / device mode).  El analizador de rendimiento: en qué gasta el tiempo mi navegador.  Herramientas relacionadas. 88
  • 89. Herramientas relacionadas para Firefox  Firebug: https://www.getfirebug.com/  DOM Inspector: https://developer.mozilla.org/en- US/docs/Tools/Add-ons/DOM_Inspector  Web Developer: https://addons.mozilla.org/en- US/firefox/addon/web-developer/  Webmaker Tools: https://webmaker.org/en- US/tools/  Más herramientas en la categoría "Web development" en https://addons.mozilla.org/en- US/firefox/extensions/web-development/ 89
  • 90. Herramientas relacionadas para Chrome  Extensiones para Chrome DevTools: https://developer.chrome.com/devtools/docs/exte nsions-gallery 90
  • 91. Herramientas relacionadas independientes del navegador  JSHint: http://www.jshint.com/  W3C validators: – HTML validator: http://validator.w3.org/source/ – CSS validator: http://jigsaw.w3.org/css- validator/ – Integrated validator: http://validator.w3.org/unicorn 91
  • 92. Documentación adicional  Documentación oficial de Firefox Developer Tools: https://developer.mozilla.org/en-US/docs/Tools  Tutoriales de desarrollo web: https://developer.mozilla.org/en- US/docs/Web/Tutorials  Documentación oficial de Chrome DevTools: https://developer.chrome.com/devtools  Curso gratuito online en inglés, con subtitulos en español disponibles, sobre Chome DevTools: – http://discover-devtools.codeschool.com/ 92