¿Qué es y porque usar DevTools?

Home » Blog » ¿Qué es y porque usar DevTools?

Cuando estamos desarrollando una web, debemos plantearnos que esa web tiene que ser amigable para los usuarios, debemos pensar no solo en la vistosidad de nuestra web final, sino tenemos que plantearnos como se usara y que problemas pueden darse. Para llevar un control de nuestros desarrollos Google ha creado un conjunto de herramientas conocidas como DevTools o en castellano Herramientas para desarrolladores y se incluye junto al navegador Google Chrome.

Abrir DevTools

Para poder analizar una web, abrimos el navegador Chrome, cargamos la web que queremos analizar y vamos al menú de Chrome de los 3 puntos verticales (arriba derecha) -> Más herramientas -> Herramientas para desarrolladores.

Veremos que se nos divide la pantalla en 2, en un lado veremos la web que queremos analizar y en el otro veremos las diferentes herramientas de DevTools.

Opciones de Devtools

Las opciones son las que se encuentran en la barra de arriba del todo de la pantalla de devtools y podremos cambiar entre una y otra en cualquier momento. Las opciones podemos resumirlas en:

  • Revisar código fuente: Si empezamos por la izquierda el primer icono (Una especie de flecha o puntero) sirve para seleccionar un elemento dentro de nuestra web y nos cargará en DevTools el HTML y CSS del elemento seleccionado.
  • Modo móvil o dispositivo: El siguiente es un icono (un móvil) que tras pincharlo podremos emular nuestra web en formato móvil.
  • Pestaña Elements: Nos permite visualizar y editar el HTML y CSS de nuestra web. Nos permite hacer pruebas antes de subirlas a nuestra web final, ahorrando tiempo en subir y probar. Mediante el primer icono (Revisar código fuente) podemos ver el código de un elemento concreto.
  • Pestaña console: Es muy útil para interactuar y hacer pruebas de javascript. Por ejemplo podemos llamar a funciones de nuestra página y ver sus resultados.
  • Pestaña source: Nos permite depurar y encontrar errores de javascript poniendo puntos de interrupción, o podemos ver un css completo, copiarlo con los cambios y llevarlo a nuestro código.
  • Pestaña Network: Nos permite ver los elementos que se descargar y sus tiempos, permitiéndonos localizar problemas sobre los que debemos prestar atención. Por ejemplo, podemos ver que imágenes tardan en cargar y reducir su size.
  • Pestaña perfomance: Se usa para medir el rendimiento de la carga de la web, pudiendo ver mediante pantallazos la evolución.
  • Pestaña memory: Se usa como complemento de la pestaña anterior.
  • Pestaña application: Se pueden ver todos los recursos que se cargan en la página actual como son imágenes, js, fuentes, etc.
  • Pestaña security: Sirve para comprobar si hay problemas de seguridad.
  • Pestaña Audits: Permite realizar una auditoría de la página, mostrando errores que debes revisar para mejorar la velocidad de carga. Por ejemplo aporta información sobre la cantidad de css que se carga pero no se usa en esa página.

Resumen y problemas

En definitiva, si queremos que los diferentes buscadores nos den un empujón en sus rankings, deberíamos trabajar más estas herramientas que la vistosidad de las webs. Es de sobra conocido que Google cada día valora más la velocidad y rendimiento de una web.

Los problemas radican en los precios y tiempos de los desarrollos, webs corporativas con WordPress bastante vistosas las hacemos en 1 semana, pero estas herramientas (no solo WordPress, que es la que menos) generan problemas de rendimiento ya que son CMS pensados un poco para todo, y entre sus mayores problemas desde el punto de vista del rendimiento son:

  • Cargan css para todas las páginas. Es decir, para contacto se cargan todos los estilos, cuando igual la mitad no se usan.
  • Miles de temas y plugins. Hay plugins y temas que permiten hacer de todo, incluso permiten generar contenido al cliente mediante coger y arrastrar. Pero, generar un sinfín de código basura. ¿Qué pinta un product.css en la home si no hay productos?

Vamos que al final lo barato sale caro, como casi todo en la vida. Y más si queremos entrar en una pelea por los primeros puestos de Google.

Las reseñas son opiniones que las personas dejan en la página local de Google. Si son positivas, estas reseñas ayudarán a mejorar la confianza y credibilidad de una marca.

Participa en nuestro sorteo enviando un email con tu nombre y el asunto «Sorteo AUDITORÍA SEO». Se realizara un sorteo cada mes.

Evaluación EXCELENTE
A base de 7 reseñas

Contactamos con Iñigo para el diseño web de nuestra tienda online y estamos encantados. Su asesoramiento, seguimiento y trato han sido excepcionales. Un verdadero crack. Recomendado al 100%. No dudes en ponerte en contacto con el.

erlantz rique
erlantz rique
19/02/2024

Un acierto quien elija a Iñigo. Autentico profesional, se preocupó en todo momento que entendiera el funcionamiento de la web. Me explicó todo las veces necesarias hasta entenderlo. Se preocupó y acertó en que la web tuviera lo que le pedí y lo hizo con creces. Muy contento con el servicio prestado. Una vez realizado el trabajo, cualquier duda que tengo me sigue ayudando. Lo recomiendo sin temor a equivocarme.

Jose Marlasca
Jose Marlasca
06/02/2024

Dió en la clave y nos dió los instrumentos que necesitábamos en esos momentos, y sobre todo entendió a la perfección lo que buscábamos. Lo mejor de web que hemos tenido en 24 años. Eskerrik asko Mezo!!

Troka Abentura
Troka Abentura
07/01/2024

Compromiso, implicación e innovación en los proyectos. Atento a las necesidades e incansable en la búsqueda de soluciones. Muy buena opción.

Jabier Fuertes Udaondo
Jabier Fuertes Udaondo
07/01/2024

Si buscas a alguien que además de hacer un diseño web moderno, responsivo y adaptado a tu sector, te explique por qué plantea el diseño web de esa manera y que te explique y ayude en posicionar tu web lo mejor posible en base a los objetivos fijados, ese es Iñigo Mezo y os lo recomiendo al 100%

Asier Hermoso
Asier Hermoso
03/01/2024

Genial trabajar con él! Además de ser muy buen profesional, experto y responsable, a destacar tanto su implicación en cada proyecto, así como su trato siempre cercano y su paciencia infinita 😉
Un crack!!

itxaso zubia
itxaso zubia
15/12/2023

El plugin gratuito para integrar productos de Prestashop en Wordpress muy sencillo de utilizar y muy bien documentado, os felicito.

Fernando Cózar
Fernando Cózar
02/11/2023

Comentarios

Deja una respuesta