por

Chrome para desarrolladores – Herramienta de Google

Una de las herramientas online gratuitas más potentes y quizás poco utilizadas, es la herramienta para desarrolladores de Google Chrome. Para acceder a ella tan sólo tienes que, desde el desplegable de la barra del navegador, seleccionar “Más Herramientas” -> “Herramientas para desarrolladores” , o bien pulsando las teclas Ctrl + Mayús + I  para acceder al panel de forma directa (Cmd+Opt+I en Mac).


Con motivo del décimo aniversario del navegador Chrome, Google ha sacado nuevas actualizaciones en su nueva versión 69, éstas son algunas de las más destacadas:

  • CSS Scroll Snap: permite crear mejores experiencias en cuanto al desplazamiento de fotogalerías, paginaciones, etc. marcando el momento exacto donde queremos que pare el scroll. Ver más detalles aquí.
  • Recortes de pantalla: usar el área completa de la pantalla, incluido cualquier espacio detrás del corte de la pantalla, llamado notch. Más detalles aquí.
  • Generador automática de contraseñas. Post de Google OficialPassword mgr final
  • Mejoras en la función OMNIBOX: resultados directamente en la barra del navegador.Omnibox
  • Nuevo diseño de la página de inicio con accesos directos personalizados…Chrome new UI
  • Cambio en la presentación de urls: desaparece el protocolo y el resaltado en verde para diferenciar los sitios seguros de los no seguros (sólo en desktop v68 vs v69).

CHROME VERSIÓN 69

Además de éstos nuevos cambios para ésta versión 69, Google ha ido mejorando el navegador a lo largo de éste último año con mejoras como: filtro de anuncios contra ads maliciosos y molestos, navegación VR y AR a Chrome, etc.


Uno de los usos más habituales de la herramienta es analizar el html, css y diferentes recursos web de una página.

Algunas funciones más utilizadas son:

  • Checkear cómo rinde la página, bloqueando en nuestra web determinados recursos como css, js, etc.
  • Comprobar qué recursos están utilizando más bytes de lo normal y cómo minimizarlo (esta última opción será habilitada en la nueva versión de Chrome 60) – Opción “Coverage Profiler” en la consola.
  • Captura de Pantalla completa: puedes hacer una captura de pantalla completa desde la herramienta para desarrolladores de Chrome [VIDEO] sin utilizar ninguna extensión. Una opción muy buena y quizás poco conocida. ¿Cómo puedo hacer un “full size screenshot”?: desde la devtool, pulsamos Ctrl + Mayús + P y buscamos la opción “Capture full size screenshot”. Automáticamente se descargará la imagen con la captura de imagen.captura de pantalla completa

También se puede sacar una captura incluyendo la carcasa del teléfono móvil desde la opción de la “hamburguesa desplegable” – Show device frame

iframe device type

  • Audits Panel: donde te permite analizar el rendimiento de la página según la puntuación obtenida en los valores de PWA, Performance, Accessibility y Best Practices.  Esta nueva función está desarrollada por Lighthouse (que ayuda a auditar todos los aspectos de calidad de la app web).
  • Third Party Badges: recomendado para sitios grandes donde se hacen llamadas a aplicaciones de terceros, librerías, etc. Ya que puede resultar útil saber qué componentes de terceros que incluimos en el código nos están ayudando o no en el rendimiento de la página. Para acceder a esta opción habría que, una vez dentro del panel de desarrolladores, teclear Ctrl + Mayús + P , y dentro del recuadro buscar “badges” y seleccionar “Show Third Party Badges”. En la opción Network aparecerá un listado de los diferentes componentes y desde Console puedes ver qué fue lo que originó el problema.
  • “Continue to here” (Sources): te ayuda a seleccionar parte de un js que quieres ejecutar por líneas, diferenciándolo del resto de código por ejemplo.

  • El vídeo pasará a pantalla completa cuando se haga girar el dispositivo.
  • Te permite emular cómo los dispositivos móviles con poca conexión a internet, media, incluso offline, pueden acceder e interactuar con tu contenido. Habilitando estas opciones, en las pestañas de “Network” y “Perfomance” los resultados cambiarán.
  • Se muestra también el tiempo de respuesta de caché en cada página.
  • En cuanto a la renderización, se habilita una nueva opción, FPS (frame per second).

La última conferencia de desarrolladores de Google, lo que mundialmente se conoce como “Google I/O ’17” tuvo lugar el pasado 17 – 19 de Mayo en este caso en California y dejó muchas novedades.

También ofrecen documentación mejorada acerca de cómo optimizar la velocidad del sitio web con DevTools de Chrome.

Descarga la última versión de Google Chrome aquí