por

Herramienta para desarrolladores Google Chrome

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, seccionar “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).


CHROME VERSIÓN 59

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.
  • Auditoria técnica a través de la opción “Audits” -> “Reload page and audit on load”.Devtools Chrome 59 Audits
  • 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

Puedes conocer más opciones que permite la versión de Chrome 59 en este vídeo:


CHROME VERSIÓN 60

El pasado 14 de julio, en el canal de Youtube de Google Chrome Developers (que te recomiendo te suscribas), se publicó un nuevo vídeo sobre algunas de las nuevas funcionalidades que tendrá la versión 60 de Chrome (ya disponible).

Algunas de las nuevas funcionalidades de Chrome 60 son:

  • 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).
Chrome 60 Audits Panel

Chrome 60 Audits Panel

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


ACTUALIZACIÓN 27/08/2017 CHROME VERSIÓN 61

Algunas de las nuevas funcionalidades que se esperan para la nueva versión de Chrome versión 61 para desktop son:

  • Chrome ahora deshabilita las pistas de vídeo cuando se reproduce un vídeo MSE en segundo plano para optimizar el rendimiento (se ha retrasado hasta la versión 62).
  • 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. Entre otras las enfocadas a la próxima versión de Chrome 60 y las diferentes funciones y mejoras en la herramienta para desarrolladores.

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