Las cookies nos permiten ofrecer nuestros servicios. Al utilizar nuestros servicios, aceptas el uso que hacemos de las cookies. Más Información. Aceptar

Herramientas para desarrolladores del navegador

Juan Diego Pérez Jiménez
  • Escrito por Juan Diego Pérez Jiménez el 18 de Febrero de 2019
  • 1 min de lectura | Desarrollo Web
Herramientas para desarrolladores del navegador
El reproductor de video será cargado en breves instantes.

Qué son estas herramientas y qué nos permiten hacer

Las herramientas para desarrolladores que nos proporcionan los distintos navegadores básicamente son unas extensiones que nos van a permitir, entre otras cosas, jugar con los estilos y con el código HTML de nuestra página para visualizar cómo va quedando, ver qué archivos se han descargado cuando hemos obtenido una página y muchas otras cosas más.

Cómo empezar a trabajar con ellas

Todos los navegadores actuales nos ofrecen estas herramientas para desarrolladores. Para acceder a ellas solo hay que pulsar el botón derecho y elegir la opción Inspeccionar elemento sobre cualquier elemento de la web.

En Google Chrome también se accede a las mismas pulsando la combinación de teclas Ctrl+Mays+J. Una vez abierta la consola podemos colocarla en la parte inferior de la pantalla, en cualquiera de los dos lados e incluso separarla en una nueva ventana si tenemos dos monitores, utilizando la opción Dock side del menú.

Diferentes zonas de la consola

En la consola de Google Chrome tenemos varias pestañas diferentes:

Sources Aquí podemos ver todos los archivos que se han descargado para la página correspondiente, ya sean archivos JavaScript, HTML entre otros tipos.

Network En esta pestaña se nos muestran las cabeceras y lo que han tardado en cargarse entre otras cosas.

Performance Aquí podemos ver datos del rendimiento vale, como por ejemplo hacer un profile de cuánto tarda en cargar la página.

  • Elements Aquí podemos visualizar el código HTML, además de poder eliminar o modificar partes del mismo de forma local, para así ver cómo queda la página. Incluso podemos mover bloques de código dentro del HTML, para jugar con los mismos y ver el resultado. En la ventana derecha, dentro de Elements, también tenemos varias opciones, como por ejemplo Styles, dónde podemos ver qué estilos se están aplicando. También podemos cambiar esos estilos, quitando o añadiendo propiedades, incluso borrando elementos, para realizar pruebas.
  • Console En esta pestaña se nos habilita una consola en la que podemos insertar código JavaScript para realizar todo tipo de pruebas.
  • Memory Desde aquí podemos comprobar la memoria que ocupa la web que se ha cargado.
  • Application Aquí podemos ver, por ejemplo, las cookies que tenemos.
  • Security Dónde podemos ver todo lo relacionado con la seguridad de la web.
  • Audits En esta pestaña podemos realizar auditorías de la página web. En el caso de utilizar Firefox la consola es también muy similar a la de Chrome. Para el curso de HTML y CSS la pestaña que principalmente vamos a utilizar es la pestaña Elements, y dentro de la misma en la parte derecha tanto la opción Styles, que ya hemos nombrado antes, como la opción Computed, en la que podemos ver también la caja de los distintos elementos CSS y podremos modificarlos.

Muy importante también si utilizamos diseño responsivo saber que tenemos un botón a la izquierda de Elements, que nos permite ver y simular cómo quedaría la web en distintos tamaños de pantalla. A la izquierda de este botón para el diseño responsivo tenemos una opción que nos permite ir seleccionando la zona de la web de la que queremos inspeccionar su código.

Como puedes ver, estas herramientas son muy útiles, porque nos ayuda a acelerar el desarrollo de una web, ya que porque sin este tipo de herramientas los cambios se realizan a ciegas, sin ver el efecto inmediato de forma más visual.

Relacionado

Te dejamos una selección de cursos, carreras y artículos

Introducción a HTML5 y CSS3

Introducción a HTML5 y CSS3

Diseño Web

12 de Septiembre de 2013

En este Webinars hemos podido ver una excelente introducción a HTML5 y CSS3, herramientas necesarias para todos los programadores web.
 

Frontend Developer Profesional

carrera

Incluye 8 cursos:

  • Curso de HTML5, CSS3 y JavaScript
  • Curso de Polymer
  • Curso de React JS

y 5 cursos más!

Duración: 52 horas y 11 minutos

Curso de HTML5, CSS3 y JavaScript

Curso de HTML5, CSS3 y JavaScript

curso

Aprende lo básico para comenzar a programar sitios o aplicaciones web. En este curso verás HTML5, CSS3 y JavaScript básico.

Duración: 7 horas y 9 minutos

Estas son algunas de las empresas que ya confían en OpenWebinars

Profesores y profesionales

Nuestros docentes son profesionales que trabajan día a día en la materia que imparten

Conviértete en profesor de OpenWebinars