Google Developer Tools es una herramienta que te facilitará la vida. Si eres un apasionado de la informática y del diseño web, no te pierdas lo último del titán de los motores de búsqueda.
Esta novedad es un conjunto de herramientas web que te proporciona el buscador más famoso del mundo. Podrás indagar hasta lo más profundo y recóndito de tu página web. Entre otras funciones te permitirá depurar e iterar tu sitio, resolver asuntos de estilo de CSS o de programación de Javascript, etc.
¿Cómo funciona?
Es muy sencillo, lo primero que tienes que hacer es acceder a las herramientas. ¿Cómo? En primer lugar, accedemos a Chrome de manera habitual, cargamos nuestra página web y clicamos en la parte superior derecha sobre el icono de los puntos verticales. Señala la opción “más herramientas” y, por último, clica en herramientas para desarrolladores. También puedes utilizar el atajo de teclado control + shif + I (más rápido y fácil).
A continuación, comprobarás que la pantalla se divide en dos y en la subpantalla aparece un recuadro con varios elementos, los cuales están distribuidos por las siguientes pestañas.
- En la pestaña “elements” podrás ver la estructura y el diseño de tu página web, aparecerá una especie de letras de colores y asteriscos como estos <>. Esto es el código de la web. Mediante esta pestaña podrás iterar la distribución y manipular el DOM (interfaz de plataforma que proporciona un conjunto estándar de objetos para representar documentos HTML, XHTML y XML) y el CSS.
- A través de este se registra la información de diagnóstico sobre el desarrollo de tu web. También puedes usarlo para interactuar con el JavaScript de la página.
- La siguiente pestaña es “sources”. Esta sirve para depurar tu código JavaScript con puntos de interrupción. También conecta los archivos locales mediante espacios de trabajo para usar el editor en tiempo real de DevTools.
- Network, aquí podrás solicitar información sobre el tiempo de carga de página web y optimizarlo. También puedes informarte sobre el estado de tus recursos solicitados y descargados.
- Con el timeline mejorarás el tiempo de ejecución de la página.
- Profiles va un paso más allá que el anterior y sirve para rastrear pérdidas de memoria.
- Aplicattion inspecciona todos los elementos que se cargan en la página, con bases de datos, cookies, caché…
- Por último, la pestaña de security sirve para depurar problemas, de contenido mixto, problemas de tu certificado, etc.
Consigue tener el control absoluto sobre el desarrollo de tu página web con Google Developer Tools, no desaproveches esta herramienta tan útil que te ofrece Google gratuitamente. Si crees que es algo complejo y te ves perdido, ¡no te preocupes! En Goltratec estamos para ayudarte. ¡Consúltanos!
