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


CHROME VERSIÓN 68

Además de nuevas funcionalidades a nivel desarrolladores con opciones que permiten fácilmente checkear determinadas lineas de código, lo más destacado para los SEOs es que se espera una nueva mejora para la herramienta de auditoría “Lighthouse(minuto 1:38) donde permitirá simular el análisis según el dispositivo que prefieras (mobile o desktop) y también según el tipo de conectividad. Los resultados del análisis se mostrarán más rápido que en la versión de chrome anterior.

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


CHROME VERSIÓN 66

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

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

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