Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Tools & Tips
Code

Chrome Dev Tools: Estructura y Estilo

by
Difficulty:BeginnerLength:LongLanguages:

Spanish (Español) translation by steven (you can also view the original English article)

Es necesario que los desarrolladores web entiendan y sepan cómo usar las herramientas de desarrollo del navegador, y en este tutorial, les presentaré las Herramientas de desarrollo de Chrome. Aprenderás algunos de los conceptos básicos, comenzando por estructurar y diseñar una página web.

Una nota rápida para los usuarios de herramientas de desarrollo existentes: el propósito de este tutorial es proporcionar una introducción relativamente básica a las herramientas de desarrollo de Chrome. Si utilizas alguna herramienta de desarrollo de navegadores, como Firebug en Firefox o las herramientas de desarrollo de IE, es posible que ya conozcas mucha de la información incluida en este tutorial en particular.


Introducción

Las herramientas de desarrollo del navegador te permiten profundizar en una página web e inspeccionar casi todo en la página. Por ejemplo, puedes:

  • Ver el código HTML correspondiente de un elemento (por ejemplo, un encabezado de algún tipo)
  • Obtener una descripción general del CSS utilizado en una página y cómo se aplica el CSS a un elemento
  • Modificar CSS en tiempo real y visualizar los cambios en el navegador
  • Ver las solicitudes HTTP realizadas por el navegador.
  • Ejecutar código JavaScript dentro del contexto de la página.
  • Identificar cuellos de botella en el rendimiento y recuperar una variedad de métricas de rendimiento
  • Hurgar con recursos fuera de línea para averiguar qué datos estás almacenando localmente la página en cuestión.

Herramientas para desarrolladores en el navegador

Antes de profundizar en las herramientas de desarrollo de Chrome, quiero darles un breve vistazo a las herramientas de desarrollo proporcionadas por los principales navegadores. Ten en cuenta que esta no es una visión integral de estas herramientas y sus características, pero sí proporciono información básica para cada herramienta.

Herramientas para desarrolladores de Chrome

Puede utilizar las herramientas de desarrollador en Chrome, Chrome Canary e incluso Chromium.

Inspector WebKit de Safari

Safari usa el código del repositorio de Inspector Web. Sin embargo, es posible que no se actualice tan a menudo como Chrome.

Herramientas para desarrolladores de Firefox

Firefox ahora viene con su propio conjunto de herramientas para desarrolladores que tiene un buen enfoque en el aspecto visual de las cosas. Para aquellos que están acostumbrados a Firebug, todavía está disponible como complemento.

Herramientas para desarrolladores en Internet Explorer

Opera Dragonfly


Empezando

Nota: Este tutorial utiliza la compilación de Chrome Canary. Por lo tanto, algunas de las características cubiertas en este artículo pueden o no estar disponibles en las versiones beta o estable.

Antes de echar un vistazo al contenido del panel Elementos, dediquemos un tiempo a comprender los pequeños controles que se encuentran cerca de la parte superior e inferior. Consulta la lista numerada debajo de la siguiente imagen que explica los diferentes elementos de la interfaz de usuario en la ventana de herramientas.

  1. Cerrar herramientas de desarrollo.
  2. Botones para seleccionar diferentes paneles de herramientas (Elementos está seleccionado actualmente).
  3. Una herramienta personalizada instalada por una extensión de terceros (PageSpeed).
  4. Cambiar el diseño de las herramientas de desarrollo.
  5. Mostrar la consola (se tratará en un tutorial diferente).
  6. Seleccionar un elemento en la herramienta haciendo clic en él en la página.
  7. Errores de JavaScript en la página.
  8. Abrir la pantalla de configuración de superposición.

Es bueno elegir un diseño con el que te sientas cómodo. Haz clic una vez en la esquina inferior izquierda y observa cómo el panel de herramientas del desarrollador se separa de la ventana principal, perfecto para configuraciones de varios monitores. Al hacer clic y mantener presionado en el icono de la parte inferior izquierda, se puede acoplar a la derecha, de esta manera:


Panel de elementos

El panel Elementos enumera el marcado de la página tal como se representa en el navegador. Cualquier cambio realizado en el DOM a través de JavaScript se refleja en los elementos que se encuentran en este panel.

Vamos a familiarizarnos con este panel. Como antes, consulta los elementos de la lista debajo de la siguiente captura de pantalla que identifica las diferentes partes del panel Elementos.

El poder que nos dan las herramientas de desarrollo no es más que sorprendente.

  1. Los elementos tal como se representan dentro del documento.
  2. La flecha indica que el elemento tiene hijos. La posición de la flecha indica si el elemento está contraído o expandido.
  3. Migas de pan elementales que comienzan con el elemento del documento (<html/>) y terminan con el elemento seleccionado actualmente. Al pasar el ratón sobre cada miga, se resalta el elemento correspondiente en la ventana del navegador.
  4. Un divisor móvil para separar la lista de elementos de la información del estilo.
  5. Paneles conmutables que contienen información del estilo (y más).
  6. Los estilos computados muestran la información de estilo que el navegador calculó para el elemento seleccionado.
  7. Muestra los estilos heredados de los estilos predeterminados del navegador que se aplican al elemento seleccionado.
  8. Muestra los estilos agregados por el usuario, tales como: estilos recuperados del archivo styles.css correspondiente de la página, estilos agregados a través de JavaScript y estilos agregados a través de las herramientas para desarrolladores.
  9. El botón "Nueva regla de estilo". Crea una nueva regla de estilo para el elemento seleccionado.
  10. El estado del elemento de alternancia te permite activar estados iniciados por el usuario, tales como :hover (el usuario pasa el cursor, :active y más. La imagen muestra el botón en su estado "activo"; está desactivado de manera predeterminada.
  11. La sección de fuentes muestra solo las fuentes que el navegador ha tenido que descargar.

  12. Permite establecer el formato preferido para los valores de color. Puedes mantener el valor predeterminado ("como fue creado"), cambiar todo a hexadecimal, usar RGB o incluso establecerlo en HSL.
  13. Visualiza la caja del elemento teniendo en cuenta el margen, el borde y el relleno.

Información extra

  • Qué: El panel Elementos permite ver y editar elementos e información de estilo.
  • Dónde: Es el primer panel. También puedes acceder a él haciendo clic con el botón derecho en un elemento de la página y seleccionando Inspeccionar elemento.
  • Por qué: Hay una serie de casos de uso. Es posible que desees modificar el DOM eliminando un nodo o agregando uno nuevo. Aparte del marcado, el panel de elementos es un gran lugar para ver los estilos aplicados de un nodo específico. También puedes agregar y eliminar estilos, así como crear nuevas reglas para posiblemente agregar a tus hojas de estilo.

Modificacioens del DOM

Modificar el DOM dentro del panel Elementos es un proceso bastante sencillo. Para eliminar un nodo, simplemente haz clic derecho y selecciona Eliminar nodo. Como es de esperar, la eliminación de un nodo principal también elimina sus elementos secundarios. Consejo práctico: También puedes presionar la tecla eliminar en el teclado para eliminar el nodo seleccionado.

Es posible cambiar el tipo de un elemento haciendo doble clic en el nombre del elemento. Por ejemplo: la porción p en una etiqueta de párrafo. Naturalmente, cambiar un elemento de un tipo a otro hace que cambien tanto las etiquetas de apertura como las de cierre.

renaming an element

Ver los recursos de la página es esencial para la depuración.

Se pueden agregar atributos haciendo clic con el botón derecho en el elemento y seleccionando Agregar atributo. El cursor se coloca inmediatamente en el lugar en el que esperarías, y puedes comenzar a escribir los atributos que deseas agregar al elemento. Por ejemplo: class="title". Al presionar la tecla de tabulación en tu teclado, el cursor se posiciona en la siguiente posición de atributo.

Editar atributos es similar a agregarlos. Busca el atributo que deseas editar y haz doble clic en el nombre del atributo o en su valor. El primero resalta el nombre del atributo y el segundo resalta el valor.

La edición de HTML sin procesar se habilita haciendo clic con el botón derecho en un elemento y seleccionando Editar como HTML.

Elementos de localización

Las herramientas para desarrolladores proporcionan algunas técnicas útiles para ubicar elementos en el documento. Al pasar sobre los elementos en el panel Elementos, los elementos representados correspondientes se resaltan en la página. Esta es una excelente manera de encontrar qué elemento en las herramientas de desarrollador coincide con el elemento en la página.

Hovering over elements in the panel to locate them on the page

Naturalmente, no vemos elementos fuera de la vista del navegador resaltados cuando te desplazas sobre los elementos correspondientes en el panel Elementos. Afortunadamente, vemos una información sobre herramientas que indica la dirección del elemento fuera de la vista. Sin embargo, la guinda del pastel es la función. Desplazar a la vista que se encuentra dentro del menú contextual de un elemento. Hace exactamente lo que dice: desplaza el elemento a la vista.

Scrolling an element into view

Las herramientas de desarrollo también tiene una función de búsqueda. Mientras el panel de herramientas de desarrollo tiene el foco, presiona Control + f para abrir el cuadro de búsqueda. Este es un cuadro de búsqueda de texto simple; por lo tanto, al escribir "body" encontrará la primera instancia del texto "body" en el documento.

Visualización de información de estilo

Antes de llegar a los paneles de estilo (el lado derecho) de la pestaña Elementos, podemos acceder a cierta información del estilo directamente desde un elemento si tiene los tres márgenes, rellenos y bordes especificados en la hoja de estilo. Al pasar por encima de uno de estos elementos, podemos ver su modelo de caja, como este:

result of hovering over an element

Cuando te preguntas por qué algunos elementos flotantes no se comportan como lo esperas, ver la información del margen/relleno puede ayudar a diagnosticar el problema. Por ejemplo, puedes encontrar que un elemento es más ancho de lo que esperabas debido al relleno adicional.

Mientras estamos en el tema de márgenes/rellenos/bordes, vamos a pasar al área de estilos del panel Elementos y verificar el panel "Métricas".

the metrics pane

Esto te permite profundizar e identificar posibles problemas en cuanto a por qué un elemento se representa de la manera en que lo hace. También es una gran herramienta de aprendizaje; si no te has metido en CSS Box Model,  entonces el diagrama de Métricas es una gran ayuda visual.

El panel Métricas te permite ver las dimensiones de elementos, el relleno, los bordes y los márgenes. Observa cómo puedes resaltar sobre cada parte individual para obtener una representación visual de cómo se procesa en el navegador. El diagrama Métricas también proporciona medidas basadas en píxeles para cada parte del elemento, por ejemplo, una regla de estilo de padding: 10px 5px (10px en la parte superior e inferior, 5px derecha e izquierda) mostrará las medidas exactas para cada lado del elemento.

Configuración de información de estilo

Ver información sobre el estilo es divertido, pero ensayar de inmediato con el estilo de cualquier página es mucho más alto en el medidor de diversión. Ya sea para educarnos, experimentar con un diseño o incluso comunicar ideas a nuestros compañeros, el poder que nos brindan las herramientas de desarrollo no es nada menos que sorprendente.

Asegúrate de que el panel Estilos esté expandido y haz clic justo a la derecha del corchete de apertura. Notarás que un cursor se posiciona automáticamente para que puedas escribir una propiedad de estilo. Escribe un nombre de propiedad, presiona el tabulador para mover el cursor a la parte del valor y escribe el valor. Voy a añadir el siguiente CSS:

El panel Elementos enumera el marcado de la página tal como se representa en el navegador.

Cuando comienzas a escribir el nombre de la propiedad, Chrome proporciona sugerencias, lo que te brinda el beneficio de la finalización automática. ¡Increíble! Al presionar la pestaña selecciona la coincidencia más cercana a lo que escribiste y mueve el cursor a la posición de valor. Sin embargo, al presionar la tecla de flecha hacia la derecha el cursor permanece en la parte de la propiedad pero llena la coincidencia más cercana a lo que escribiste.

La finalización automática también funciona con valores de propiedad. Por ejemplo, al escribir en "pos" *tab* "fi" *tab* se crea una propiedad de estilo de position: fixed. Al ingresar valores basados en píxeles/porcentaje, como 15% o 10px, podemos incrementar y disminuir esos valores con las teclas de flecha hacia arriba y hacia abajo. Para incrementar en 10, usa la tecla Mayús + flecha arriba.

La modificación de los valores de color es muy sencilla gracias al selector de color. Después de ingresar un valor de color, haz clic en el pequeño cuadrado de color a la izquierda del valor para que aparezca la herramienta de selección de color. También puedes alternar entre los formatos de valores de color con la tecla Mayús + clic en el cuadrado de color pequeño.

Puedes crear una nueva regla de estilo haciendo clic en el icono pequeño + en el panel de estilos. Marcado que se parece a:

Genera automáticamente la siguiente regla de estilo:

Marcado que se parece a:

Genera automáticamente lo siguiente:

Marcado que se parece a:

Genera:

Marcado que se parece a:

Genera automáticamente:

Por supuesto, las reglas de estilo pueden ser modificadas a tu gusto.

El panel Elementos te brinda mucha potencia con la estructura y el estilo de la página, pero las herramientas de desarrollo nos brindan muchas más herramientas esenciales para nuestro trabajo.


Panel de recursos

El panel de Recursos muestra qué recursos utiliza una página. Echemos un vistazo a lo que proporciona.

El panel Métricas te permite ver las dimensiones de elementos, el relleno, los bordes y los márgenes.

  1. El botón para activar el panel de Recursos.
  2. El panel de categorías muestra los distintos tipos de recursos que podemos inspeccionar. Un encabezado de recurso (como "Frames" o "Almacenamiento de sesión") puede tener un error al lado. Esto indica que hay más información, y hacer clic en el encabezado revela esa información. Este panel es de tamaño variable; así que hazlo tan grande o pequeño como quieras.
  3. Los recursos de la página, incluyendo fuentes, imágenes, JavaScript, CSS y la página en sí, se pueden encontrar aquí. Si la página utiliza varios marcos (por ejemplo, mediante un conjunto de frames), entonces cada marco aparece como una carpeta separada dentro de la carpeta principal "Frames". Esto es útil para comprender la relación entre un marco y sus recursos.
  4. Si se utilizan bases de datos web SQL en la página, esto muestra su contenido.
  5. Similar a Web SQL, IndexedDB muestra el contenido de la base de datos IndexedDB.
  6. Muestra los key/value almacenados en localStorage.
  7. Muestra los pares key/value almacenados en sessionStorage.
  8. Enumera las cookies creadas por el dominio.
  9. Muestra los recursos en caché de acuerdo con el manifiesto de caché. Esta sección contiene mucha información útil. Por ejemplo, un recurso como una biblioteca JavaScript mostrará la ruta del recurso, el tamaño del archivo y el tipo de archivo.
  10. Muestra los detalles del recurso seleccionado en el panel de la izquierda.

Información extra

Las herramientas de desarrollo también tiene una función de búsqueda.

  • Qué: El panel de recursos muestra los recursos asociados con la página.
  • Donde: El segundo panel, directamente después del panel Elementos y antes del panel Red.
  • Por qué: Ver los recursos de la página es esencial para la depuración. También puedes tener curiosidad por saber qué información almacenan otros sitios web en localStorage, cookies o cualquier otro mecanismo de almacenamiento de datos. Además, ciertos recursos, como localStorage se pueden modificar a través de las herramientas del desarrollador.

Visualización individual de contenidos Frame

A pesar de la falta de uso de marcos en los sitios web de hoy en día, comprender una forma de inspeccionar una página con varios marcos es una habilidad valiosa. En la siguiente captura de pantalla, notarás una página con columnas donde cada columna representa un marco diferente:

viewing multiple frames

Puedes guardar un recurso en tu computadora

Cada cuadro se coloca dentro de su propia carpeta. Cada carpeta contiene los recursos de cada página, y puedes hacer clic en cada página para mostrar su contenido. Ver los contenidos de una página HTML es útil, pero podemos profundizar más en cada página y ver sus recursos. JavaScript, CSS, imágenes, ¡e incluso se pueden ver las fuentes! Los recursos que contienen código se muestran en el visor de código de las herramientas del desarrollador, que incluye resaltado de sintaxis y números de línea.

Fuentes

Es importante tener en cuenta que las fuentes del sistema, como Arial o Helvetica, no se enumeran en Fuentes; la sección de fuentes muestra solo las fuentes que el navegador ha tenido que descargar.

Viewing the fonts of a page

La fuente se escala para que pueda caber dentro del área de contenido del recurso; por lo tanto, cambiar el tamaño del área de contenido del recurso también cambia el tamaño del recurso!

Imágenes

Está claro que algo de pensamiento entró en la imagen de la interfaz de usuario.

Images within a page from the resources panel

Las herramientas del desarrollador muestran la imagen en el área de contenido y la imagen se ajusta según el tamaño del área de contenido. Las imágenes con transparencia (como la de la captura de pantalla anterior) se muestran con un tablero de ajedrez en el fondo, lo que facilita la visualización de la imagen. Debajo de la imagen se muestra otra información útil, como las dimensiones, el tamaño del archivo y el tipo MIME.

Scripts

¡El JavaScript! Al hacer clic en un archivo de secuencia de comandos muestra su contenido, pero no mucho más.

JavaScript that a page has loaded

Pero no desesperes; ver los recursos es simplemente eso: ver recursos. En un futuro tutorial, veremos el soporte y las capacidades de JavaScript de las herramientas dev.

Hojas de estilo

Puedes ver las diferentes hojas de estilo que el navegador cargó para la página web.

Stylesheets from Chrome dev tools

Al igual que con los archivos JavaScript, no puedes hacer mucho con los recursos de la hoja de estilo.

Recursos que no pudieron cargar

Ocasionalmente, el navegador no podrá cargar un recurso en particular debido a problemas de red o error del desarrollador.

A resource which has not been found

Cuando esto sucede, aparece una pequeña notificación roja a la derecha del recurso. El número indica cuántos errores se produjeron, y el panel de contenido proporciona más detalles sobre el error.

Guardar y ver recursos

Cada recurso tiene un menú contextual; simplemente haciendo clic derecho en un recurso muestra un menú similar a este:

the context menu shown for assets

Puedes guardar un recurso en tu computadora, abrir un recurso en una nueva pestaña y realizar muchas otras tareas. Al hacer doble clic en el recurso, se abre el recurso en una nueva pestaña.

Cookies

Como mencioné anteriormente, puedes ver la información de las cookies para un sitio web en particular. Por ejemplo, navegar a Twitter mientras estás conectado puede presentar información similar a la que se muestra en esta captura de pantalla:

viewing the cookies on a page

Aquí vemos:

Cuando te preguntas por qué algunos elementos flotantes no se comportan como se espera, ver la información de margen/relleno puede ayudar a diagnosticar el problema.

  • Name - el nombre de la cookie. Por ejemplo, hay un nombre con "recordar marcado" que tiene un valor de 1. Es probable que indique si el usuario ha marcado una casilla de verificación "Recordarme" durante el proceso de inicio de sesión.
  • Value - el valor de la cookie. Para la cookie denominada "_twitter_sess", hay un ID de sesión encriptado largo para el valor.
  • Domain - el dominio de la cookie .twitter.com permite cualquier subdominio en twitter.com.
  • Path  - similar al dominio, el campo de ruta indica rutas válidas. "/" permite todos los caminos.
  • Expires - la fecha en que el navegador borra la cookie.
  • Size - el tamaño de la cookie en bytes.
  • HTTP - obliga a la cookie a acceder solo a través del protocolo HTTP. Esto evita el acceso a las cookies a través de JavaScript y puede ayudar a combatir el robo de cookies a través de scripts entre sitios.
  • Secure - indica al navegador que comunique datos de cookies solo a través de conexiones cifradas como HTTPS.

Puedes eliminar una cookie haciendo clic con el botón derecho en una cookie y seleccionando Eliminar en el menú contextual.

Es interesante observar cómo los navegadores utilizan la información de las cookies para determinar si eres un usuario autenticado. Cuando inicies sesión en Twitter, la eliminación de las cookies "auth_token" y "_twitter_sess" nos solicita iniciar sesión después de actualizar la página. Es probable que Twitter almacene nuestro estado de inicio de sesión y otras partes de información confidencial en esas cookies.

Almacenamiento local

Almacenar y ver pares key/value en localStorage es bastante fácil. En lugar de almacenar nuestras propias claves, usaremos un sitio web existente como ejemplo. La siguiente captura de pantalla muestra la vista de almacenamiento local de Kitchen Sink Example App realizada con el framework de aplicación web móvil Sencha Touch.

Viewing the local storage on a page

Al ver la página por primera vez, el navegador realiza una solicitud de un archivo CSS. Actualizar la página se siente mucho más ágil porque Sencha almacenó el CSS en el almacenamiento local. Kitchen sink app tiene algunos pares interesantes de key/value. Por ejemplo, una clave se ve así:

El valor para esa clave comienza con esto:

Steve Souders escribió sobre el almacenamiento de recursos en el almacenamiento local; es un uso interesante y emocionante del almacenamiento local que puede mejorar el rendimiento, especialmente en dispositivos móviles.

Caché de aplicación

La caché de la aplicación le dice al navegador qué recursos debe almacenar, y la categoría de la caché de la aplicación nos permite ver lo que se ha almacenado en la caché.

the application cache view in the resources panel

Hay tres columnas con esta vista:

  • Resource - la ruta completa del recurso. Las extensiones de archivo suelen ser recursos y archivos HTML. Uno de los recursos es el propio archivo manifiest.
  • Type - puede variar. El tipo "Manifest" es un tipo único dado al propio archivo de manifiesto. Otro tipo es explicit: los recursos que se definen explícitamente en el archivo de manifiesto. El tipo fallback indica un recurso que actúa como reserva para otro recurso. El tipo Master es el recurso que inició la caché: la página en sí.
  • Size - el tamaño del recurso en kilobytes o bytes.

Consulta este tutorial si no estás familiarizado con la caché de aplicaciones HTML5.


Te veo pronto

Estamos empezando. En la Parte dos, veremos más paneles con un ligero enfoque en el rendimiento, de modo que podamos proporcionar una mejor experiencia de usuario.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.