La consola JavaScript del navegador (II)

Facebooktwittergoogle_pluslinkedinmailFacebooktwittergoogle_pluslinkedinmail

En el artículo anterior empezamos a conocer algunas de las formas en que la consola de JavaScript del navegador puede ayudarnos durante la depuración.

En este artículo vamos a centrarnos en la inspección de los distintos elementos de la página en tiempo real, así como la modificación de algunas de sus características, para comprobar cómo responden.

LA INSPECCIÓN DE ELEMENTOS

Inspeccionar un elemento es analizar su código, en tiempo de ejecución, es decir, con la página cargada en el navegador, de modo que podamos, entre otras cosas, hacer lo siguiente:

  • Ver el código HTML con el que ha sido generado.
  • Ver el anidamiento, es decir, dentro de que elementos se encuentra, o que otros elementos se encuentran dentro de él.
  • Ver la(s) clase(s) CSS que tiene asignada(s).
  • Ver y alterar cada una de las reglas CSS que le afectan, para comprobar cómo reacciona (por ejemplo, en un texto podemos cambiar su color o su tamaño).
  • Agregarle o eliminarle estilos CSS.
  • Ver eventos que puede detectar.
  • Copiar el código de un elemento de la página para llevárnoslo a otro documento web.

boton_de_seleccion_de_elementosPara acceder al inspector de elementos, podemos hacer clic sobre el botón de selección de elemenots que está en la parte superior izquierda de la consola, y que vemos a la izquierda de este texto. Se un botón toggle, es decir, que pulsando se activa el modo de inspección y volviendo a pulsar se desactiva. Con el modo de inspección activado, haremos clic sobre un elemento de la página. Otro modo de activar la inspección de elementos es hacer clic derecho sobre un elemento de la página, y elegir la opción Inspeccionar....

Con cualquiera de los dos modos se activa la pestaña Elements de la consola. También puedes activarla desde luego, pulsando directamente sobre ella.

Ahora, si pulsamos con el ratón sobre un texto, o una imagen, una capa, o cualquier otro elemento de la página, vemos su código en la zona principal de la consola, así:

inspección_de_elementos_html

Pulsa sobre la imagen para ampliarla.

Cómo ves en la sección donde aparece el código HTML, los elementos que tienen otros elementos anidados (por ejemplo, una capa que contiene un botón), tiene una flechita a la izquierda, para desplegarlos, y poder ver el código del contenido.

Si haces clic sobre una línea de código se resalta en azul, cómo ves. A partir de ahí puedes pulsar CTRL-C y todo el código seleccionado pasará al portapapeles. Si la línea tiene una flechita plegada, lo que indica que tiene más elementos anidados, el código de todos ellos pasará al portapapeles.

A la derecha hay una ventama más interesante. Contiene todos los estilos que afectan al elemento seleccionado. Podemos desactivar cualquiera de ellos, mediante un checkbox que le aparece al pasar el puntero por encima. También podemos cambiar valores, y ver cómo reaccionan los elementos afectados, o añadir estilos que no estén presentes, todo a base de clics, de una forma muy cómoda.

La inspección de elementos es una funcionalidad crucial durante el desarrollo, sobre todo en proyectos más complejos, que requieran un diseño más cuidado.

LA AUDITORÍA

La pestaña Audits es muy interensante en la consola de Chrome, ya que nos informa de lo que “ve”, o lo que “opina” Google de nuestra página. Si la pulsas verás lo siguiente:

solicitar_auditoriaPulsa el botón Run y, pasados unos segundos, verás un informe resumido de aquello que “le llama la atención” a Google, como en la siguiente imagen:

informe_de_auditoria

Pulsa sobre la imagen para ampliarla

Piensa que, cuanto mejor “vea” Google tu página, mejor la indexará.

TODAS LAS FUENTES

Pulsa sobre la pestaña Sources de la consola. Esta es especialmente útil cuando tu página incluye otros documentos, o dependencias (lo que ocurre en todas las páginas actuales). A la izquierda ves el mapa del sitio, organizado en directorios y archivos, y en la zona principal puedes ver el código fuente de cualquier archivo incluido en tu página. Observa la siguiente imagen, que lo ilustra:

Pulsa sobre la imagen para ampliarla.

Pulsa sobre la imagen para ampliarla.

La lista de funciones auxiliares de la consola es mucho más amplia. A lo largo de este artículo y el anterior hemos conocido las más relevantes a la hora de desarrollar y depurar. Espero que te resulten tan útiles cómo a mí cada día.

     

2 comentarios:

  1. Pingback: La tecnología JSON – El desván de Jose

  2. Pingback: El plugin DataTables (XIV). Más tipos de datos desplegables. – El desván de Jose

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *