Plataforma

3 tareas que puedes realizar con la consola de Chrome y no conocías

3 tareas que puedes realizar con la consola de Chrome y no conocías

Los navegadores web siempre han sido bastante livianos y relativamente sencillos. O eso nos parece.

La realidad es la contraria, pues los navegadores actuales nos permiten realizar una variedad de tareas sin tener que utilizar otras aplicaciones.

En este caso veremos 3 tareas que podemos hacer con la consola de Chrome sin necesidad de instalar componentes u otras aplicaciones.

1.- Realizar capturas de la página actual

Seguro que os habéis encontrado alguna vez con la necesidad de hacer una captura de una parte de la página o la página completa, pero tenéis que utilizar o bien un componente o la veterana tecla “Impr Pant” (Imprimir pantalla) que nos genera una captura de la pantalla, y luego pasarla por una aplicación de diseño gráfico.

Con Chrome podemos realizar capturas de pantalla de la página. Para ello pulsamos Command+Shift+C (Mac) o Control+Shift+C (Windows,Linux) para entrar en el modo de inspección de elementos. En mi caso voy a usar la web de yunbit para las capturas. Vamos a obtener una captura de una parte de la página. Simplemente mantenemos la tecla Control o Command pulsada mientras creamos un área de selección para indicar a Chrome que parte de la página cortar. Solamos la tecla y el navegador se encargará de generarnos una imagen de lo que hemos seleccionado.

También podemos hacer capturas de elementos concretos de una página seleccionando el nodo del DOM. Igual que antes, entramos en el modo de inspección de elementos y al pasar el ratón se irán seleccionando elementos, cuando la selección sea la correcta, solo haz click, el elemento se seleccionará. Ahora pulsa Command + Shift + P (Mac) o Control + Shift + P (Windows, Linux) para abrir el menú de comandos. Escribe en el “node” y selecciona “Capture node screenshot” para realizar la captura.

 

2 .- Conocer qué funciones de JavaScript o clases CSS está usando la página web

En Chrome disponemos de una pestaña poco conocida: Coverage, que nos permite conocer qué funciones se usan en la página y además nos marca qué lineas se ejecutan y cuales no.

Para acceder a esta herramienta tenemos que abrir el inspector de elementos y a la derecha, en el icono de los tres puntitos pulsarlo, se abrirá un menú, entra al submenú de “More tools” y pulsa en “Coverage”.

Esta herramienta nos puede resultar muy útil para depurar nuestros JavaScript y hojas de estilos o refactorizarlos en archivos más pequeños para mejorar el rendimiento de la página.

 

3 .- Evaluar el rendimiento de tu web

Chrome dispone de una herramienta llamada “Audit” que nos permite testear el redimiento de una página web en base a un conjunto de reglas predefinidas, como el rendimiento, las mejores prácticas de desarrollo y la accesibilidad de los contenidos.

Audit nos mostrará un marcador para cada estadística de 0 a 100 y nos indicará dónde fallamos y cómo corregirlo.

Entre los diferentes mensajes que obtendremos estará el tiempo que tarda la página en cargar, cuando llega a ser interactiva, las imágenes que podemos ajustar para reducir la carga en dispositivos móviles, etc.

 

Valora el artículo:

1 Estrella2 Estrellas3 Estrellas4 Estrellas5 Estrellas (1 valoraciones, media: 5,00 sobre 5)
Cargando...
Avatar photo José Miguel Gil Desarrollador Full-Stack Ver más artículos de José Miguel Gil

Otros artículos de la categoría Actualidad