Saltar navegación

Navegadores: Herramientas de desarrollador - Contenido educativo

Ajuste de pantalla

El ajuste de pantalla se aprecia al ver el vídeo en pantalla completa. Elige la presentación que más te guste:

Subido el 18 de julio de 2023 por Marta O.

10 visualizaciones

Este vídeo muestra cómo puede accederse a las herramientas de desarrollador de los navegadores y qué podemos hacer con ellas.
Destinado a alumnos de FPGS, de 1º de los ciclos de DAW y DAM, para el módulo "Lenguajes de Marcas y Sistemas de Gestión de la Información"

Más información Transcripción

Descargar la transcripción

Hola, buenas tardes. 00:00:00
Hoy vamos a ver de qué forma podemos utilizar las herramientas de desarrollador 00:00:02
que vienen integradas en los navegadores. 00:00:07
Como veis, tenemos abierta la página de la Wikipedia. 00:00:10
Este navegador es el Google Chrome. 00:00:13
Para poder acceder a las herramientas de desarrollador podemos hacerlo de dos formas. 00:00:16
Bien, haciendo clic derecho en cualquier zona de la página 00:00:21
y aquí abajo haciendo clic en inspeccionar 00:00:25
o bien aquí arriba a la derecha en el menú 00:00:29
accediendo a más herramientas, seleccionando herramientas para desarrolladores. 00:00:33
De estas dos formas se abre el inspector. 00:00:39
El inspector puede situarse a la derecha de la visualización de nuestra página web 00:00:43
o bien si clickeamos en su menú 00:00:49
podemos decir que lo coloquemos aquí en la parte inferior 00:00:52
o bien accediendo de nuevo al menú en la parte izquierda 00:00:57
o bien accediendo al menú en una ventana diferente, flotante 00:01:02
donde yo tendré todo lo que quiero ver. 00:01:08
De momento lo voy a situar a la derecha de la página. 00:01:11
¿Qué podemos hacer con las herramientas de desarrollador? 00:01:16
Aquí arriba hay varias pestañas. 00:01:20
En la pestaña primera, Elements, vemos el árbol del documento. 00:01:23
Ya sabéis que cuando una página web se carga en el navegador 00:01:28
el navegador la parcea y va generando un árbol con todos los elementos HTML que conforman la página. 00:01:32
Así podemos ver perfectamente el head y el body. 00:01:39
Además podemos modificar estos elementos. 00:01:43
No quedarían modificados en el HTML original 00:01:46
pero sí que podemos ver de qué forma se visualizaría si hubiera modificaciones. 00:01:49
Por ejemplo, en el head tenemos la etiqueta title 00:01:54
que dice el texto que aparecerá en la pestaña en el navegador. 00:01:59
Si vemos en la pestaña arriba a la derecha pone Wikipedia. 00:02:03
Nosotros podemos editar este texto con doble clic 00:02:09
y por ejemplo poner Wikipedia en mayúscula, Enter 00:02:13
y quedaría modificado. 00:02:17
Si ahora voy a la pestaña arriba veremos que pone Wikipedia en mayúscula. 00:02:19
Insisto, si queremos que estos cambios se reflejen tendremos que modificar el HTML original. 00:02:24
También tenemos en el body los elementos que se van marcando en la página web 00:02:32
según pasamos el ratón por encima. 00:02:39
En este div tenemos la franja superior. 00:02:41
Si nosotros, por ejemplo, hacemos clic en este recuadro 00:02:45
a la derecha veremos sus estilos. 00:02:50
Por ejemplo, podemos indicarle que no tengo un ancho máximo 00:02:53
o podemos indicarle que no tenga un margen automático centrado. 00:02:59
De esta manera, si os fijáis, si le quito el automático del margen centrado 00:03:04
aparecerían todos estos enlaces a la izquierda. 00:03:09
Y así podemos también depurar nuestro CSS. 00:03:12
Otra cosa que podemos ver es en la pestaña Network 00:03:16
lo que son las peticiones a servidor y sus respuestas, los request y response. 00:03:20
Haciendo un refresco de la página vemos que se ha hecho aquí un envío 00:03:25
de solicitud de información al servidor de la wikipedia.org 00:03:31
y aquí a la derecha podemos ver los headers de los request y los response. 00:03:36
Aquí están los headers del response, tiene 17 elementos. 00:03:42
Es lo que nos responde el servidor indicando que nos ha devuelto, por ejemplo, un texto HTML. 00:03:47
Y más información. 00:03:55
En las cabeceras de la petición del request que hacemos desde el navegador 00:03:57
para pedir la página de la wikipedia, veríamos también que se está solicitando 00:04:02
a este servidor wikipedia.org y una serie de información adicional. 00:04:07
En el inspector también podríamos ver las cookies. 00:04:13
Si vamos a la pestaña Application y hacemos clic en este servidor 00:04:16
veremos todas las cookies que se han traído, que el servidor nos ha enviado. 00:04:22
Voy a ampliar esta ventana del inspector. 00:04:27
Y aquí podemos ver que hay una primera cookie que se llama límite de red, 00:04:32
otra cookie de último acceso global 17 de julio, otra cookie último acceso 17 de julio. 00:04:37
Esta es una parte de lo que se puede hacer con estas herramientas de inspección. 00:04:45
Espero que os haya gustado. 00:04:49
Seguiremos viéndolo más en profundidad el próximo día. 00:04:51
Valoración:
  • 1
  • 2
  • 3
  • 4
  • 5
Eres el primero. Inicia sesión para valorar el vídeo.
Idioma/s:
es
Idioma/s subtítulos:
es
Autor/es:
Marta Olmedilla
Subido por:
Marta O.
Licencia:
Reconocimiento - No comercial - Compartir igual
Visualizaciones:
10
Fecha:
18 de julio de 2023 - 16:26
Visibilidad:
Clave
Centro:
IES EUROPA
Duración:
04′ 55″
Relación de aspecto:
1.78:1
Resolución:
1280x720 píxeles
Tamaño:
11.62 MBytes

Del mismo autor…

Ver más del mismo autor

Comentarios

Para publicar comentarios debes entrar con tu nombre de usuario de EducaMadrid.

Comentarios

Este vídeo todavía no tiene comentarios. Sé el primero en comentar.


EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid