10 trucos para Google Chrome Developer Tools

Autor: | Posteado en Trucos Sin comentarios

Hoy en día, Chrome es, con diferencia, el browser web(www) mas utilizado. Siempre habrán opiniones y matices sobre si es el preferible navegador, sin embargo, de lo que no hay desconfianza es de que llevan un buen ritmo a la hora de ir instalando avances y perfeccionando sus características. De hecho, Chrome Developer Tools, uno de sus pilares, suele ser suficiente infrautilizado respecto a su enorme suma de atrayentes funciones y funciones orientadas a diseñadores web.

En este capítulo vamos a dar un estudio por encima a varias de las funcionalidades de Chrome Developer Tools, algo que sugiero a cualquier programador o diseñador web.

1. ¡Usa el inspector de elementos!

Pulsando la mezcla de teclas CTRL+U en un browser web(www) como Chrome o Firefox podrias entrar al codigo fuente de la pagina para visualizar sus tripas y como esta hecho cierto detalle de la misma. Sin embargo, en varias situaciones este metodo no es práctico puesto que la pagina web(www) tiene el código minificado (condensado, para que ocupe menos).

Código fuente minificado y sin minificar

Para que nos sea mas util tenemos 2 alternativas: usar el Inspector de elementos de Google Chrome® Dev Tools, presionando CTRL+SHIFT+I y dirigiéndonos a la pestaña Elements. La pestaña Source además nos promete la alternativa de abrir cualquier componente de nuestra web, pudiendo pulsar el boton {} (Pretty Print) para suceder de código minificado a código legible con un sólo click de ratón.

Además, si optamos por usar el Inspector de elementos, logramos simplemente pulsar con boton derecho en el elemento de la pagina web(www) que queremos buscar y seleccionar la alternativa Inspeccionar. Así se nos abrirá el inspector justo en la etiqueta HTML deseada.

Pulsando en el boton de la esquina superior-izquierda (CTRL+SHIFT+C) además logramos mover el ratón sobre la pagina y visualizar en un sólo mirada las etiquetas HTML que se resaltan, sus dimensiones o los márgenes y rellenos que se aplican al elemento en cuestión, algo muy util para eludir problemas con el modelo de cajas de CSS.

2. Modifica el HTML o CSS en tiempo real

Cuando estamos diseñando una página, una característica muy atrayente sería la de ir agregando funciones al CSS, o editar el HTML hasta lograr el efecto deseado. Esto es algo muy fácil de crear con Chrome Dev Tools mediante el inspector de elementos.

Por ejemplo, sobre esta tabla periódica interactiva de los componentes HTML5 logramos ir desmarcando propiedades CSS o cambiando sus valores, para percibir el efecto si se realizaran esos cambios.

Por su parte, el HTML además puede ser modificado. Simplemente pulsamos con boton derecho sobre el elemento HTML en cuestión y elegimos la alternativa Añadir atributo (para insertar clases o ids, por ejemplo) o la alternativa Editar HTML, si queremos crear cambios de forma mas libre.

Nota: ¡Recuerda que las tecnologias de front-end nativas del browser como HTML5, CSS3 o Javascript se operan desde tu sistema! Esto quiere mencionar que no estás haciendo cambios permanentes, sino que sólo haces cambios sobre archivos temporales de tu navegador.

Algunas propiedades CSS tienen gestores mas avanzados, como es el caso de los colores CSS, que tienen su propio ColorPicker. Dicho gestor nos acepta seleccionar el color y grado de transparencia inmediatamente y de forma visual. Además, además nos acepta convertir entre los distintos esquemas de color (hexadecimal, RGB, HSL), ir guardando los colores mas utilizados e inclusive usar un ColorDropper (cuentagotas) para extraer el color de alguna foto o componente de la web.

Color Picker de Chrome® Dev Tools

También logramos variar las propiedades CSS que utilicen medidas o unidades simplemente girando la rueda del ratón colocándonos encima, convertir los valores de las propiedades gracias al autocompletado del cuál dispone, o como vimos anteriormente, desmarcar las casillas de comprobación que llegan a la izquierda de las propiedades CSS para desactivarlas.

Además, logramos pulsar sobre el + de la esquina superior-derecha para agregar nuevas normas CSS.

Truco: Puedes pulsar SHIFT+Click de ratón sobre un color para convertir su esquema de hexadecimal a RGB o HSL.

3. Emula los sensores o valores del GPS

En el inspector de componentes de Chrome logramos pulsar en el menú con tres puntos en la esquina superior-derecha y seleccionar la alternativa Show console (o simplemente pulsar ESC). Con esto aparecerá un nuevo panel inferior, donde logramos exponer varias pestañas.

La pestaña Sensors nos acepta emular en el browser las coordenadas GPS que podríamos sacar con un equipo movil o la orientación del equipo a través de los valores alfa, beta y gamma (ejes X, Y y Z), correspondiente a la posición/orientación en la que esta colocado el equipo y que consigue gracias al giroscopio.

Emulador de sensores y GPS de Chrome® Developer Tools

4. Prepara tu web(www) con Responsive Design (RWD)

Nuestro Chrome Dev Tools llega organizado para administrar la apariencia de nuestra web(www) mediante las media queries de CSS de una forma muy agradable y cómoda. Basta con pulsar el 2° icono de la esquina superior-izquierda (Toogle Device Toolbar) o pulsar CTRL+SHIFT+M.

Al hacerlo, activaremos el modo Responsive del navegador, en el cuál tendremos las tools necesarias para visualizar la pagina como si lo estuvieramos viendo en un equipo movil o tablet, ya que en la zona superior de la pagina podremos ubicar el equipo que queremos emular, mostrándonos sus dimensiones de pantalla, el zoom y la orientación vigente del movil (horizontal o vertical).

Truco: Si el movil que queremos emular no esta en la lista, se puede agregar sencillamente desde el menú o presionando F1 desde el Inspector de elementos, presionando la pestaña Devices y el boton Add custom device…. Esto nos admitirá agregar nuevos dispositivos a emular, con sus dimensiones de pantalla, tipo, e inclusive el User Agent para simular ser un browser concreto.

Este panel no sólo ofrecerá la apariencia movil y aplicará las media queries de nuestra web, sino que además simulará los taps o swipes con vuestro puntero del ratón, así como exponer otros documentos a través del menú superior-derecho.

Responsive Web Design en Chrome® Dev Tools

En dicho menú podremos exponer una norma visual, capturar pantalla movil o exponer una franja visual para visualizar las media queries disponibles en la pagina actual.

Para salir de este modo, simplemente volvemos a pulsar en el icono Toggle Device Toolbar o CTRL+SHIFT+M sobre el inspector de elementos.

5. Suaviza las transiciones

Al equivalente que con los colores CSS, es factible personalizar las transiciones CSS mediante un gestor fundamentalmente esquematizado para este fin. En él se nos muestra la función de tiempo que se aplica para las transiciones, pudiendo cambiarlas entre los modos determinados (ease-in, linear, ease-out…) o personalizar uno mediante cubic-bezier.

Chrome Dev Tools: Transiciones

Para ello, sólo tenemos que mover cada uno de los puntos morados de los extremos de la función de tiempo y personalizar la función de la transición.

6. Simula una conexión movil (2G, 3G, HDSPA…)

Como observaremos mas adelante, una parte muy significativo de una pagina web(www) es la rapidez de carga de la misma, ya no sólo por los aspectos de posicionamiento (SEO) que puedan repercutir, sino por la destreza de cliente (UX) y satisfacción del mismo al sacar una respuesta rápida.

Con Chrome Developer Tools logramos activar la alternativa Network throttling, presente en el panel que aparecía en el inspector de componentes al pulsar ESC. En dicha opción, se nos acepta emular la rapidez de una conexión movil con GPRS, 2G, 3G, 4G o conexión WiFi en vuestro navegador. Algo muy util para verificar la destreza de cliente si navegamos desde un equipo movil en zonas de baja cobertura. Si se quiere agregar alguna personalizada, se puede crear desde la pestaña Throttling en el menú Settings o presionando F1 sobre el inspector de elementos.

Emular conexión movil en Chrome

En la parte superior tenemos una alternativa Disk cache que nos acepta desactivar el caché del browser y poder crear pruebas continuamente. Recuerden siempre desactivar esta alternativa de limitación de red cuando se termine de utilizar.

7. Instala un tema oscuro de Chrome® Dev Tools

Si eres de los que les gustan los temas oscuros en los editores de código, debes saber que existe además una alternativa de convertir el tema del Google Chrome® Dev Tools a uno un poco mas oscuro. Para ello, sólo tenemos que efectuar los siguientes pasos:

  1. Abrimos la próximo URL: chrome://flags/#enable-devtools-experiments
  2. Habilitamos la alternativa Experimentos de Herramientas para desarrolladores.
  3. Reiniciamos el navegador.
  4. Accedemos al inspector de componentes CTRL+SHIFT+I.
  5. Accedemos al menú Settings (o pulsamos F1) y despues al menú Experiments.
  6. Activamos la alternativa Allow custom UI themes.
  7. Instalamos la extensión DevTools Theme Zero Dark y reiniciamos el Chrome® Dev Tools.

Si todavía no nos muestra el tema oscuro, en el menú de preferencias F1, apartado Preferences / Appearance, comprobamos que esta marcado Dark en Themes.

Tema oscuro para Chrome® Developer Tools

En DevThemez tenemos muchos temas instalables para Chrome® Developer Tools, por si queremos curiosear un rato. Si lo que deseas son temas para editores de código, prueba con este tuit con themes.

8. Mapea preprocesadores CSS en Chrome® Dev Tools

Si nos hemos acostumbrado a usar preprocesadores como LESS o SASS, puede ser suficiente enojado llevar mentalmente la traducción del preprocesador a CSS (y viceversa) cuando realizamos cambios.

Para evitarlo, logramos usar los CSS Source Maps. Lo 1° que necesitaremos será generarlos en vuestro editor. Si utilizas ATOM, LESS y PostCSS, podrias usar el pack less-postcss-autocompile. Dicho pack nos acepta producir el archivo CSS final ya minificado, con autoprefixer y además producir el source maps que mencionamos al guardar el archivo LESS.

Veremos que esto genera un archivo index.css.map junto a nuestros archivos LESS y CSS. Si activamos la alternativa Enable CSS source maps, dentro del menú Settings / Preferences / Sources del inspector de elementos, tendremos los archivos de estilos mapeados con nuestros preprocesadores.

Preprocesadores LESS o SASS en Chrome® Dev Tools

De la misma forma, logramos activar la alternativa Enable Javascript source maps para crear lo mismo con preprocesadores como CoffeeScript, BabelJS o TypeScript.

9. Edita animaciones desde el navegador

En las ultimas versiones de Chrome Dev Tools se han añadido varias avances sobre las animaciones CSS. Por ejemplo, Chrome® Dev Tools nos muestra los keyframes con los fotogramas de las animaciones junto al CSS, e inclusive logramos visualizar las distintos animaciones de una pagina y actualizar la rapidez o tiempo que tardan con un par de clics.

Gestor de animaciones CSS desde Chrome® Dev Tools

Este ejemplo corresponde a la animación CSS de Bernard Bernoulli (Día del Tentáculo), que podrias visualizar en este pen de CodePen. En el próximo video logramos percibir como es muy fácil convertir la rapidez o tiempos de distintos animaciones, de forma visual, para adaptar la animación.

10. Rendimiento y optimizacion web

Si nos dedicamos a actividades de optimización web o estamos muy interesados en el rendimiento y eficacia de nuestra página, logramos usar la pestaña Network de Chrome Developer Tools, la cuál nos muestra las solicitudes (y sus características) que se han realizado para cargar la página.

Network tab en Chrome® Dev Tools

Esto nos da una atrayente tool de analisis para descubrir cuales son los archivos que mas ralentizan la carga de la web, así como un panel de gestión para descubrir problemas o errores.

Si se quiere profundizar en este tema, sugiero usar WebPageTest, la preferible tool en su género, que nos da muchísima información al respecto, así como una valoración del rendimiento web(www) y multiples fragmentos adicionales.

WebPageTest: Optimización web

Por último, si se busca algo todavía mas avanzado, recordar además que disponemos de la pestaña Timeline de Chrome Developer Tools, que nos promete información mas exhaustiva y específica: uso de memoria RAM, uso de memoria de tarjeta gráfica, numero de listeners Javascript utilizados, nodos HTML, así como version de dibujado de la pagina y otros documentos técnicos. Una auténtica navaja suiza del desarrollo web.

Profiling (Timeline tab) en Chrome® Dev Tools

Emezeta blog



El mejor vídeo del día Trucos de Android


Nota: La creación de esta noticia le pertenece al autor original que aparece en la firma de más arriba. No hemos eliminado en ningún momento los enlaces oficiales, ni tampoco intentamos perjudicar su posicionamiento en los motores de búsqueda.

El Administrador de QueEsGoogle.Com

Agrega tu comentario