Herramientas de Desarrollador Web en Mozilla Firefox - Recursos p.1

Esta sera una breve introducción de los recursos que descargan las web para su correcto funcionamiento, en entradas posteriores veremos toda la información sobre ellos.

De momento solo mostrare como verlos y que tipos existen. Esto es tan sencillo como abrir el menú de herramientas pulsando F12, una vez hecho eso nos dirigiremos a la pestaña llamada "red".

Aquí nos aparecerán todos los recursos descargados:


En la zona superior podemos filtrar los recursos, existiendo un total de 8 tipos bien especificados y 1 tipo que engloba otros varios. A continuación explicare que es cada tipo:

HTML: es bastante obvio, son todos los documentos HTML que se han descargado.


CSS: nos mostrara todas las hojas de estilo que la web ha descargado por necesidad.


JS: son todos los archivos javascript con las funciones para el correcto funcionamiento de la web.


XHR (XMLHttpRequest): es una interfaz empleada para realizar peticiones HTTP y HTTPS a servidores Web. Para los datos transferidos se usa cualquier codificación basada en texto, incluyendo 
texto plano, XML, JSON, HTML y codificaciones particulares específicas.


Tipografía: son fuentes que la pagina utiliza.


Imagenes: imagenes usadas en la web. 


Medios: aparecen cuando se descarga algún vídeo. 


WS (Web Service): es una tecnología que utiliza un conjunto de protocolos y estándares que sirven para intercambiar datos entre aplicaciones. Distintas aplicaciones de software desarrolladas en lenguajes de programación diferentes, y ejecutadas sobre cualquier plataforma, pueden utilizar los servicios web para intercambiar datos en redes de ordenadores como Internet.


Otros: son recursos que no contemplados entre los 8 anteriores. 


Con esto concluiría la primera parte de los recursos.

Comentarios

Publicar un comentario

Entradas populares de este blog

Herramientas de Desarrollador Web en Mozilla Firefox - Debugger p.2

Imagen
En este tutorial veremos como ver en todo momento el valor de nuestras variables a la hora de ejecutar una función de javascript. En este ejemplo usare una función muy simple "suma", esta función realiza la suma de dos variables que se le pasan cuando se llama a la misma. Los primeros pasos de como abrir la herramienta debugger ya se vio en la primera parte, así que saltare directamente a ensañar como se ven las variables. 1º Debemos poner un punto de ruptura donde queramos parar la ejecución del script: 2º Iniciaremos la depuración, en la zona de la derecha aparecerán las variables que maneja la función en recuadro con el nombre de "ámbitos": Durante el depurado veremos como las variables van cambiando:  Y así es como se ven las variables a lo largo de la función.
Leer más

Herramientas de Desarrollador Web en Mozilla Firefox - Recursos p.2

Imagen
En esta segunda parte sobre los recursos explicare todos los campos que componen un recursos y  los detalles de la solicitud. Comenzando por los campos nos encontramos los siguientes: - Estado: aquí se nos muestra si se ha obtenido correctamente el recurso, mostrara un circulo verde y un código 2XX si es correcto, naranja y un código 3XX si se a redireccionado o rojo y un código 4XX/5XX si han ocurrido errores. - Método: el método de solicitud HTTP. - Archivo: nombre del archivo descargado. - Dominio: dominio del PATH solicitado. -Tipo: el content-type de la respuesta. -Tamaño: el tamaña del recurso. Además de todos estos campos hay una linea temporal donde se nos muestra, en ella podemos ver el tiempo que tardo en cargar la pagina y en que momento se cargo cada recurso. Si hacemos click en alguno de los recursos se nos abrirá una ventana en la derecha de las herramientas. En esta ventana se nos muestran los ...
Leer más

Herramientas de Desarrollador Web en Mozilla Firefox - Cabeceras

Imagen
Las cabeceras o headers permiten al cliente y al servidor el envio de información adicional junto a una petición o respuesta.  Las cabeceras pueden agruparse según su contexto de la siguiente manera:  - Cabecera General: se aplican tanto a las peticiones como a las respuestas, pero no se relacionan con los datos que se finalmente se transmiten en el cuerpo de la petición. - Cabecera de Petición: se puede usar en una solicitud HTTP y no se relaciona con el contenido del mensaje - Cabecera de Respuesta: se puede usar en una respuesta HTTP y que no se relaciona con el contenido del mensaje. Los encabezados de respuesta, como Age , Location o Server se utilizan para proporcionar un contexto más detallado de la respuesta.  - Cabecera de Entidad: es un encabezado HTTP que describe el contenido del cuerpo del mensaje. Los encabezados de entidad se utilizan tanto en solicitudes HTTP como en respuestas. Los encabezados como Content-Length, Content-Languag...
Leer más