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