¿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.



Foto de Iñigo Mezo Alvarez

IÑIGO MEZO ALVAREZ (IMAcreste)


Comentarios

Deja una respuesta

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

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 8 reseñas
Iñigo me ha asesorado con un problema que tenía para acceder a mi web y me ha salvado la vida, porque creía que había perdido todo el trabajo que llevaba haciendo años. Muchísimas gracias. Es gratificante encontarte con alguien que controla y te ayuda en los problemas que te pueden surgir.
Santutxu Zaharra
Santutxu Zaharra
11/06/2024
Gran profesional y muy competente, le contratamos para cambiar la web y mejorar el posicionamiento y gracias a su asesoramiento ha mejorado.
jorge martinez
jorge martinez
16/05/2024
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
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