Mejora tu desarrollo web con Firefox Developer Edition y Google Chrome DevTools
-
Upload
inaki-arenaza -
Category
Education
-
view
152 -
download
1
Transcript of Mejora tu desarrollo web con Firefox Developer Edition y Google Chrome DevTools
![Page 1: Mejora tu desarrollo web con Firefox Developer Edition y Google Chrome DevTools](https://reader034.fdocuments.es/reader034/viewer/2022042607/55aef9281a28ab260a8b47f1/html5/thumbnails/1.jpg)
Mejora tu desarrollo web con Firefox Developer Edition y Google Chrome DevTools
Iñaki ArenazaMondragon [email protected]
https://twitter.com/iarenazahttps://linkedin.com/in/iarenaza
Creative CommonsAttribution Non-commercial Share Alike
3.0 Spain License
![Page 2: Mejora tu desarrollo web con Firefox Developer Edition y Google Chrome DevTools](https://reader034.fdocuments.es/reader034/viewer/2022042607/55aef9281a28ab260a8b47f1/html5/thumbnails/2.jpg)
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
![Page 3: Mejora tu desarrollo web con Firefox Developer Edition y Google Chrome DevTools](https://reader034.fdocuments.es/reader034/viewer/2022042607/55aef9281a28ab260a8b47f1/html5/thumbnails/3.jpg)
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
![Page 4: Mejora tu desarrollo web con Firefox Developer Edition y Google Chrome DevTools](https://reader034.fdocuments.es/reader034/viewer/2022042607/55aef9281a28ab260a8b47f1/html5/thumbnails/4.jpg)
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
![Page 5: Mejora tu desarrollo web con Firefox Developer Edition y Google Chrome DevTools](https://reader034.fdocuments.es/reader034/viewer/2022042607/55aef9281a28ab260a8b47f1/html5/thumbnails/5.jpg)
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
![Page 6: Mejora tu desarrollo web con Firefox Developer Edition y Google Chrome DevTools](https://reader034.fdocuments.es/reader034/viewer/2022042607/55aef9281a28ab260a8b47f1/html5/thumbnails/6.jpg)
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
![Page 7: Mejora tu desarrollo web con Firefox Developer Edition y Google Chrome DevTools](https://reader034.fdocuments.es/reader034/viewer/2022042607/55aef9281a28ab260a8b47f1/html5/thumbnails/7.jpg)
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
![Page 8: Mejora tu desarrollo web con Firefox Developer Edition y Google Chrome DevTools](https://reader034.fdocuments.es/reader034/viewer/2022042607/55aef9281a28ab260a8b47f1/html5/thumbnails/8.jpg)
Firefox Developer Edition
8
![Page 9: Mejora tu desarrollo web con Firefox Developer Edition y Google Chrome DevTools](https://reader034.fdocuments.es/reader034/viewer/2022042607/55aef9281a28ab260a8b47f1/html5/thumbnails/9.jpg)
Firefox estándar con Developer Tools
9
![Page 10: Mejora tu desarrollo web con Firefox Developer Edition y Google Chrome DevTools](https://reader034.fdocuments.es/reader034/viewer/2022042607/55aef9281a28ab260a8b47f1/html5/thumbnails/10.jpg)
Google Chrome DevTools
10
![Page 11: Mejora tu desarrollo web con Firefox Developer Edition y Google Chrome DevTools](https://reader034.fdocuments.es/reader034/viewer/2022042607/55aef9281a28ab260a8b47f1/html5/thumbnails/11.jpg)
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
![Page 12: Mejora tu desarrollo web con Firefox Developer Edition y Google Chrome DevTools](https://reader034.fdocuments.es/reader034/viewer/2022042607/55aef9281a28ab260a8b47f1/html5/thumbnails/12.jpg)
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
![Page 13: Mejora tu desarrollo web con Firefox Developer Edition y Google Chrome DevTools](https://reader034.fdocuments.es/reader034/viewer/2022042607/55aef9281a28ab260a8b47f1/html5/thumbnails/13.jpg)
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
![Page 14: Mejora tu desarrollo web con Firefox Developer Edition y Google Chrome DevTools](https://reader034.fdocuments.es/reader034/viewer/2022042607/55aef9281a28ab260a8b47f1/html5/thumbnails/14.jpg)
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
![Page 15: Mejora tu desarrollo web con Firefox Developer Edition y Google Chrome DevTools](https://reader034.fdocuments.es/reader034/viewer/2022042607/55aef9281a28ab260a8b47f1/html5/thumbnails/15.jpg)
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
![Page 16: Mejora tu desarrollo web con Firefox Developer Edition y Google Chrome DevTools](https://reader034.fdocuments.es/reader034/viewer/2022042607/55aef9281a28ab260a8b47f1/html5/thumbnails/16.jpg)
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
![Page 17: Mejora tu desarrollo web con Firefox Developer Edition y Google Chrome DevTools](https://reader034.fdocuments.es/reader034/viewer/2022042607/55aef9281a28ab260a8b47f1/html5/thumbnails/17.jpg)
La consola de navegador Firefox
17
![Page 18: Mejora tu desarrollo web con Firefox Developer Edition y Google Chrome DevTools](https://reader034.fdocuments.es/reader034/viewer/2022042607/55aef9281a28ab260a8b47f1/html5/thumbnails/18.jpg)
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
![Page 19: Mejora tu desarrollo web con Firefox Developer Edition y Google Chrome DevTools](https://reader034.fdocuments.es/reader034/viewer/2022042607/55aef9281a28ab260a8b47f1/html5/thumbnails/19.jpg)
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
![Page 20: Mejora tu desarrollo web con Firefox Developer Edition y Google Chrome DevTools](https://reader034.fdocuments.es/reader034/viewer/2022042607/55aef9281a28ab260a8b47f1/html5/thumbnails/20.jpg)
El depurador de Javascript en Chrome
20
![Page 21: Mejora tu desarrollo web con Firefox Developer Edition y Google Chrome DevTools](https://reader034.fdocuments.es/reader034/viewer/2022042607/55aef9281a28ab260a8b47f1/html5/thumbnails/21.jpg)
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
![Page 22: Mejora tu desarrollo web con Firefox Developer Edition y Google Chrome DevTools](https://reader034.fdocuments.es/reader034/viewer/2022042607/55aef9281a28ab260a8b47f1/html5/thumbnails/22.jpg)
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.
![Page 23: Mejora tu desarrollo web con Firefox Developer Edition y Google Chrome DevTools](https://reader034.fdocuments.es/reader034/viewer/2022042607/55aef9281a28ab260a8b47f1/html5/thumbnails/23.jpg)
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.
![Page 24: Mejora tu desarrollo web con Firefox Developer Edition y Google Chrome DevTools](https://reader034.fdocuments.es/reader034/viewer/2022042607/55aef9281a28ab260a8b47f1/html5/thumbnails/24.jpg)
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".
![Page 25: Mejora tu desarrollo web con Firefox Developer Edition y Google Chrome DevTools](https://reader034.fdocuments.es/reader034/viewer/2022042607/55aef9281a28ab260a8b47f1/html5/thumbnails/25.jpg)
El depurador de Javascript en Chrome
25
1: Pretty-Print
![Page 26: Mejora tu desarrollo web con Firefox Developer Edition y Google Chrome DevTools](https://reader034.fdocuments.es/reader034/viewer/2022042607/55aef9281a28ab260a8b47f1/html5/thumbnails/26.jpg)
El depurador de Javascript en Firefox
26
![Page 27: Mejora tu desarrollo web con Firefox Developer Edition y Google Chrome DevTools](https://reader034.fdocuments.es/reader034/viewer/2022042607/55aef9281a28ab260a8b47f1/html5/thumbnails/27.jpg)
El depurador de Javascript en Firefox
27
![Page 28: Mejora tu desarrollo web con Firefox Developer Edition y Google Chrome DevTools](https://reader034.fdocuments.es/reader034/viewer/2022042607/55aef9281a28ab260a8b47f1/html5/thumbnails/28.jpg)
El depurador de Javascript en Firefox
28
Events with listeners
![Page 29: Mejora tu desarrollo web con Firefox Developer Edition y Google Chrome DevTools](https://reader034.fdocuments.es/reader034/viewer/2022042607/55aef9281a28ab260a8b47f1/html5/thumbnails/29.jpg)
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"
![Page 30: Mejora tu desarrollo web con Firefox Developer Edition y Google Chrome DevTools](https://reader034.fdocuments.es/reader034/viewer/2022042607/55aef9281a28ab260a8b47f1/html5/thumbnails/30.jpg)
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.
![Page 31: Mejora tu desarrollo web con Firefox Developer Edition y Google Chrome DevTools](https://reader034.fdocuments.es/reader034/viewer/2022042607/55aef9281a28ab260a8b47f1/html5/thumbnails/31.jpg)
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.
![Page 32: Mejora tu desarrollo web con Firefox Developer Edition y Google Chrome DevTools](https://reader034.fdocuments.es/reader034/viewer/2022042607/55aef9281a28ab260a8b47f1/html5/thumbnails/32.jpg)
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.
![Page 33: Mejora tu desarrollo web con Firefox Developer Edition y Google Chrome DevTools](https://reader034.fdocuments.es/reader034/viewer/2022042607/55aef9281a28ab260a8b47f1/html5/thumbnails/33.jpg)
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
![Page 34: Mejora tu desarrollo web con Firefox Developer Edition y Google Chrome DevTools](https://reader034.fdocuments.es/reader034/viewer/2022042607/55aef9281a28ab260a8b47f1/html5/thumbnails/34.jpg)
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
![Page 35: Mejora tu desarrollo web con Firefox Developer Edition y Google Chrome DevTools](https://reader034.fdocuments.es/reader034/viewer/2022042607/55aef9281a28ab260a8b47f1/html5/thumbnails/35.jpg)
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
![Page 36: Mejora tu desarrollo web con Firefox Developer Edition y Google Chrome DevTools](https://reader034.fdocuments.es/reader034/viewer/2022042607/55aef9281a28ab260a8b47f1/html5/thumbnails/36.jpg)
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
![Page 37: Mejora tu desarrollo web con Firefox Developer Edition y Google Chrome DevTools](https://reader034.fdocuments.es/reader034/viewer/2022042607/55aef9281a28ab260a8b47f1/html5/thumbnails/37.jpg)
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
![Page 38: Mejora tu desarrollo web con Firefox Developer Edition y Google Chrome DevTools](https://reader034.fdocuments.es/reader034/viewer/2022042607/55aef9281a28ab260a8b47f1/html5/thumbnails/38.jpg)
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
![Page 39: Mejora tu desarrollo web con Firefox Developer Edition y Google Chrome DevTools](https://reader034.fdocuments.es/reader034/viewer/2022042607/55aef9281a28ab260a8b47f1/html5/thumbnails/39.jpg)
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
![Page 40: Mejora tu desarrollo web con Firefox Developer Edition y Google Chrome DevTools](https://reader034.fdocuments.es/reader034/viewer/2022042607/55aef9281a28ab260a8b47f1/html5/thumbnails/40.jpg)
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
![Page 41: Mejora tu desarrollo web con Firefox Developer Edition y Google Chrome DevTools](https://reader034.fdocuments.es/reader034/viewer/2022042607/55aef9281a28ab260a8b47f1/html5/thumbnails/41.jpg)
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
![Page 42: Mejora tu desarrollo web con Firefox Developer Edition y Google Chrome DevTools](https://reader034.fdocuments.es/reader034/viewer/2022042607/55aef9281a28ab260a8b47f1/html5/thumbnails/42.jpg)
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
![Page 43: Mejora tu desarrollo web con Firefox Developer Edition y Google Chrome DevTools](https://reader034.fdocuments.es/reader034/viewer/2022042607/55aef9281a28ab260a8b47f1/html5/thumbnails/43.jpg)
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
![Page 44: Mejora tu desarrollo web con Firefox Developer Edition y Google Chrome DevTools](https://reader034.fdocuments.es/reader034/viewer/2022042607/55aef9281a28ab260a8b47f1/html5/thumbnails/44.jpg)
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
![Page 45: Mejora tu desarrollo web con Firefox Developer Edition y Google Chrome DevTools](https://reader034.fdocuments.es/reader034/viewer/2022042607/55aef9281a28ab260a8b47f1/html5/thumbnails/45.jpg)
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
![Page 46: Mejora tu desarrollo web con Firefox Developer Edition y Google Chrome DevTools](https://reader034.fdocuments.es/reader034/viewer/2022042607/55aef9281a28ab260a8b47f1/html5/thumbnails/46.jpg)
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
![Page 47: Mejora tu desarrollo web con Firefox Developer Edition y Google Chrome DevTools](https://reader034.fdocuments.es/reader034/viewer/2022042607/55aef9281a28ab260a8b47f1/html5/thumbnails/47.jpg)
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
![Page 48: Mejora tu desarrollo web con Firefox Developer Edition y Google Chrome DevTools](https://reader034.fdocuments.es/reader034/viewer/2022042607/55aef9281a28ab260a8b47f1/html5/thumbnails/48.jpg)
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
![Page 49: Mejora tu desarrollo web con Firefox Developer Edition y Google Chrome DevTools](https://reader034.fdocuments.es/reader034/viewer/2022042607/55aef9281a28ab260a8b47f1/html5/thumbnails/49.jpg)
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
![Page 50: Mejora tu desarrollo web con Firefox Developer Edition y Google Chrome DevTools](https://reader034.fdocuments.es/reader034/viewer/2022042607/55aef9281a28ab260a8b47f1/html5/thumbnails/50.jpg)
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")
![Page 51: Mejora tu desarrollo web con Firefox Developer Edition y Google Chrome DevTools](https://reader034.fdocuments.es/reader034/viewer/2022042607/55aef9281a28ab260a8b47f1/html5/thumbnails/51.jpg)
El editor de estilos en Chrome
51
Podemos deshabilitar temporalmente propiedades específicas marcando o desmarcando sus casillas asociadas (1).
![Page 52: Mejora tu desarrollo web con Firefox Developer Edition y Google Chrome DevTools](https://reader034.fdocuments.es/reader034/viewer/2022042607/55aef9281a28ab260a8b47f1/html5/thumbnails/52.jpg)
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.
![Page 53: Mejora tu desarrollo web con Firefox Developer Edition y Google Chrome DevTools](https://reader034.fdocuments.es/reader034/viewer/2022042607/55aef9281a28ab260a8b47f1/html5/thumbnails/53.jpg)
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.
![Page 54: Mejora tu desarrollo web con Firefox Developer Edition y Google Chrome DevTools](https://reader034.fdocuments.es/reader034/viewer/2022042607/55aef9281a28ab260a8b47f1/html5/thumbnails/54.jpg)
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).
![Page 55: Mejora tu desarrollo web con Firefox Developer Edition y Google Chrome DevTools](https://reader034.fdocuments.es/reader034/viewer/2022042607/55aef9281a28ab260a8b47f1/html5/thumbnails/55.jpg)
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).
![Page 56: Mejora tu desarrollo web con Firefox Developer Edition y Google Chrome DevTools](https://reader034.fdocuments.es/reader034/viewer/2022042607/55aef9281a28ab260a8b47f1/html5/thumbnails/56.jpg)
El editor de estilos en Firefox
56
Podemos deshabilitar temporalmente propiedades específicas marcando o desmarcando sus casillas asociadas (1).
![Page 57: Mejora tu desarrollo web con Firefox Developer Edition y Google Chrome DevTools](https://reader034.fdocuments.es/reader034/viewer/2022042607/55aef9281a28ab260a8b47f1/html5/thumbnails/57.jpg)
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.
![Page 58: Mejora tu desarrollo web con Firefox Developer Edition y Google Chrome DevTools](https://reader034.fdocuments.es/reader034/viewer/2022042607/55aef9281a28ab260a8b47f1/html5/thumbnails/58.jpg)
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.
![Page 59: Mejora tu desarrollo web con Firefox Developer Edition y Google Chrome DevTools](https://reader034.fdocuments.es/reader034/viewer/2022042607/55aef9281a28ab260a8b47f1/html5/thumbnails/59.jpg)
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).
![Page 60: Mejora tu desarrollo web con Firefox Developer Edition y Google Chrome DevTools](https://reader034.fdocuments.es/reader034/viewer/2022042607/55aef9281a28ab260a8b47f1/html5/thumbnails/60.jpg)
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
![Page 61: Mejora tu desarrollo web con Firefox Developer Edition y Google Chrome DevTools](https://reader034.fdocuments.es/reader034/viewer/2022042607/55aef9281a28ab260a8b47f1/html5/thumbnails/61.jpg)
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
![Page 62: Mejora tu desarrollo web con Firefox Developer Edition y Google Chrome DevTools](https://reader034.fdocuments.es/reader034/viewer/2022042607/55aef9281a28ab260a8b47f1/html5/thumbnails/62.jpg)
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
![Page 63: Mejora tu desarrollo web con Firefox Developer Edition y Google Chrome DevTools](https://reader034.fdocuments.es/reader034/viewer/2022042607/55aef9281a28ab260a8b47f1/html5/thumbnails/63.jpg)
El analizador de conexiones de red en Chrome
63
![Page 64: Mejora tu desarrollo web con Firefox Developer Edition y Google Chrome DevTools](https://reader034.fdocuments.es/reader034/viewer/2022042607/55aef9281a28ab260a8b47f1/html5/thumbnails/64.jpg)
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
![Page 65: Mejora tu desarrollo web con Firefox Developer Edition y Google Chrome DevTools](https://reader034.fdocuments.es/reader034/viewer/2022042607/55aef9281a28ab260a8b47f1/html5/thumbnails/65.jpg)
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
![Page 66: Mejora tu desarrollo web con Firefox Developer Edition y Google Chrome DevTools](https://reader034.fdocuments.es/reader034/viewer/2022042607/55aef9281a28ab260a8b47f1/html5/thumbnails/66.jpg)
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
![Page 67: Mejora tu desarrollo web con Firefox Developer Edition y Google Chrome DevTools](https://reader034.fdocuments.es/reader034/viewer/2022042607/55aef9281a28ab260a8b47f1/html5/thumbnails/67.jpg)
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
![Page 68: Mejora tu desarrollo web con Firefox Developer Edition y Google Chrome DevTools](https://reader034.fdocuments.es/reader034/viewer/2022042607/55aef9281a28ab260a8b47f1/html5/thumbnails/68.jpg)
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
![Page 69: Mejora tu desarrollo web con Firefox Developer Edition y Google Chrome DevTools](https://reader034.fdocuments.es/reader034/viewer/2022042607/55aef9281a28ab260a8b47f1/html5/thumbnails/69.jpg)
El analizador de conexiones de red en Firefox
69
![Page 70: Mejora tu desarrollo web con Firefox Developer Edition y Google Chrome DevTools](https://reader034.fdocuments.es/reader034/viewer/2022042607/55aef9281a28ab260a8b47f1/html5/thumbnails/70.jpg)
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
![Page 71: Mejora tu desarrollo web con Firefox Developer Edition y Google Chrome DevTools](https://reader034.fdocuments.es/reader034/viewer/2022042607/55aef9281a28ab260a8b47f1/html5/thumbnails/71.jpg)
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
![Page 72: Mejora tu desarrollo web con Firefox Developer Edition y Google Chrome DevTools](https://reader034.fdocuments.es/reader034/viewer/2022042607/55aef9281a28ab260a8b47f1/html5/thumbnails/72.jpg)
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
![Page 73: Mejora tu desarrollo web con Firefox Developer Edition y Google Chrome DevTools](https://reader034.fdocuments.es/reader034/viewer/2022042607/55aef9281a28ab260a8b47f1/html5/thumbnails/73.jpg)
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
![Page 74: Mejora tu desarrollo web con Firefox Developer Edition y Google Chrome DevTools](https://reader034.fdocuments.es/reader034/viewer/2022042607/55aef9281a28ab260a8b47f1/html5/thumbnails/74.jpg)
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
![Page 75: Mejora tu desarrollo web con Firefox Developer Edition y Google Chrome DevTools](https://reader034.fdocuments.es/reader034/viewer/2022042607/55aef9281a28ab260a8b47f1/html5/thumbnails/75.jpg)
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
![Page 76: Mejora tu desarrollo web con Firefox Developer Edition y Google Chrome DevTools](https://reader034.fdocuments.es/reader034/viewer/2022042607/55aef9281a28ab260a8b47f1/html5/thumbnails/76.jpg)
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
![Page 77: Mejora tu desarrollo web con Firefox Developer Edition y Google Chrome DevTools](https://reader034.fdocuments.es/reader034/viewer/2022042607/55aef9281a28ab260a8b47f1/html5/thumbnails/77.jpg)
Para habilitar este modo, pulsar sobre el icono o pulsar Ctrl + Shift + M (Mac OSX: Cmd + Opt + M)
Device Mode en Chrome
77
![Page 78: Mejora tu desarrollo web con Firefox Developer Edition y Google Chrome DevTools](https://reader034.fdocuments.es/reader034/viewer/2022042607/55aef9281a28ab260a8b47f1/html5/thumbnails/78.jpg)
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
![Page 79: Mejora tu desarrollo web con Firefox Developer Edition y Google Chrome DevTools](https://reader034.fdocuments.es/reader034/viewer/2022042607/55aef9281a28ab260a8b47f1/html5/thumbnails/79.jpg)
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
![Page 80: Mejora tu desarrollo web con Firefox Developer Edition y Google Chrome DevTools](https://reader034.fdocuments.es/reader034/viewer/2022042607/55aef9281a28ab260a8b47f1/html5/thumbnails/80.jpg)
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
![Page 81: Mejora tu desarrollo web con Firefox Developer Edition y Google Chrome DevTools](https://reader034.fdocuments.es/reader034/viewer/2022042607/55aef9281a28ab260a8b47f1/html5/thumbnails/81.jpg)
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
![Page 82: Mejora tu desarrollo web con Firefox Developer Edition y Google Chrome DevTools](https://reader034.fdocuments.es/reader034/viewer/2022042607/55aef9281a28ab260a8b47f1/html5/thumbnails/82.jpg)
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
![Page 83: Mejora tu desarrollo web con Firefox Developer Edition y Google Chrome DevTools](https://reader034.fdocuments.es/reader034/viewer/2022042607/55aef9281a28ab260a8b47f1/html5/thumbnails/83.jpg)
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
![Page 84: Mejora tu desarrollo web con Firefox Developer Edition y Google Chrome DevTools](https://reader034.fdocuments.es/reader034/viewer/2022042607/55aef9281a28ab260a8b47f1/html5/thumbnails/84.jpg)
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
![Page 85: Mejora tu desarrollo web con Firefox Developer Edition y Google Chrome DevTools](https://reader034.fdocuments.es/reader034/viewer/2022042607/55aef9281a28ab260a8b47f1/html5/thumbnails/85.jpg)
El perfilador en Chrome O se puede visualizar como un gráfico de consumos por llamadas a lo largo del
tiempo:
85
![Page 86: Mejora tu desarrollo web con Firefox Developer Edition y Google Chrome DevTools](https://reader034.fdocuments.es/reader034/viewer/2022042607/55aef9281a28ab260a8b47f1/html5/thumbnails/86.jpg)
El analizador de rendimiento en Firefox Proporciona informaciones similares al caso de Chrome
86
![Page 87: Mejora tu desarrollo web con Firefox Developer Edition y Google Chrome DevTools](https://reader034.fdocuments.es/reader034/viewer/2022042607/55aef9281a28ab260a8b47f1/html5/thumbnails/87.jpg)
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
![Page 88: Mejora tu desarrollo web con Firefox Developer Edition y Google Chrome DevTools](https://reader034.fdocuments.es/reader034/viewer/2022042607/55aef9281a28ab260a8b47f1/html5/thumbnails/88.jpg)
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
![Page 89: Mejora tu desarrollo web con Firefox Developer Edition y Google Chrome DevTools](https://reader034.fdocuments.es/reader034/viewer/2022042607/55aef9281a28ab260a8b47f1/html5/thumbnails/89.jpg)
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
![Page 90: Mejora tu desarrollo web con Firefox Developer Edition y Google Chrome DevTools](https://reader034.fdocuments.es/reader034/viewer/2022042607/55aef9281a28ab260a8b47f1/html5/thumbnails/90.jpg)
Herramientas relacionadas para Chrome
Extensiones para Chrome DevTools: https://developer.chrome.com/devtools/docs/extensions-gallery
90
![Page 91: Mejora tu desarrollo web con Firefox Developer Edition y Google Chrome DevTools](https://reader034.fdocuments.es/reader034/viewer/2022042607/55aef9281a28ab260a8b47f1/html5/thumbnails/91.jpg)
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
![Page 92: Mejora tu desarrollo web con Firefox Developer Edition y Google Chrome DevTools](https://reader034.fdocuments.es/reader034/viewer/2022042607/55aef9281a28ab260a8b47f1/html5/thumbnails/92.jpg)
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