Google Chrome se ha convertido rápidamente en el explorador más popular, eclipsando a Firefox y a Intenet Explorer (Duh!) con más de la mitad del mercado mundial, de acuerdo a StarCounter. Para los desarrolladores web, que eran antes campeones del browser, este crecimiento meteórico en popularidad ha sido una pequeña sorpresa, esto gracias al desempeño de Chrome y sus características propias así como el ecosistema en crecimiento.

Acá te presentamos las 10 herramientas para desarrolladores propias de Chrome, así como algunas extensiones, que hacen a Chrome el explorador más completo para desarrolladores web.

Chrome Developer Tool

La herramienta de desarrollo de Chrome, también conocido como DevTools es un set de herramientas útiles para desarrollo web y herramientas para debug dentro de Chome. Incluyen paneles para elementos, conectividad, fuentes, línea de tiempo, perfiles, recursos, auditorias y consolas.

Puedes abrir DevTools al seccionar el menú hamburguesa de Chrome en la esquina superior derecha del explorador, luego seleccionando More Tools > Develope Tools. Alternativamente puedes usar Ctrl+Shift+I o Cmd+Opt+I en Mac. Una vez que está abierto el DevTools, puedes usar Ctrl+ para ir de panel a panel.

Uno de los usos más comunes para esta herramienta es examinar el HTML y el CSS de un elemento de una página web que esté abierta en Chrome, esto se lograr al hacer click en la tabla del elemento en la barra de navegación del DevTools. Puedes mover el foco a un elemento diferente de la página web haciendo clic derecho en un elemento de la página y seleccionando inspeccionar elemento. También puedes editar en vivo el CCS en el panel de estilo de la derecha. Es una excelente manera de ver cómo quedaría alterada una página web sin tener que ir hasta el editor de código.

Truco: Desactivar el caché

Si estás usando Chrome para mostrar y depurar una página web mientras editas uno de los archivos de JavaScript o CCS, es probable que desees desactivar el caché de Chrome. Esta opción funciona únicamente mientras la herramienta DevTools está abierta. Para activar esta opción haz clic en la rueda de ajustes al lado derecho de la barra de navegación del DevTools y selecciona la cajita de la opción “Disable cache”.

Consola de JavaScript

La consola de JavaScript es el lugar para buscar mensajes de error de JavaScript, adicional a otros tipos de mensajes que te ayudarán a resolver los problemas de tu código. También podrás interactuar con el contexto actual desde esta consola; eso incluye evaluar expresiones e invocar al debugger. Esta herramienta se usa regularmente como una forma rápida de invocar y probar un API que se está desarrollando.Puedes abrir esta consola desde la barra de navegación del DevTools al hacer clic en la consola o directamente con Ctrl+Shift+J o Cmd+Iot+J en Mac.

Audits

La tabla de auditorías del DevTools es una de la docena de maneras que tienes para ver sugerencias para mejorar el desempeño de una página web en Chrome. La larga lista de este ejemplo muestra un sitio comercial típico.

Por ejemplo, “minifying” tu CCS y archivos de JavaScript para reducir la cantidad de espacios en blanco y la combinación de los archivos minimizados para reducir el número de peticiones GET necesarios para cargarlos es una práctica estándar en la producción de sitios web, y puede hacer una gran diferencia en el desempeño del sitio.

Conectividad

La tabla de conectividad del DevTools te muestra una línea de tiempo y una lista de los requerimientos HTTP y respuestas actuales de la página. La página continúa actualizándose mientras la miras. Verás menos requerimientos si habilitas el caché. Puedes filtrar fácilmente lo que estás viendo para ayudarte a profundizar en los temas específicos que están llevando mucho tiempo. Simplemente escribe una cadena en la caja del filtro para filtrar las fuentes por nombres o haciendo clic en la etiqueta del tipo de fuente a la derecha del filtro. Eso permite conocer qué está sucediendo en el script o en el requerimiento de cada página, el desarrollador de la página normalmente conocerá eso, sin embargo a veces se podrá descubrir por las fuentes de la tabla de recursos.

PageSpeed Insights

El PageSpped Insights de Google solía ser un product separado, sin embargo hace poco comenzó a formar parte de DevTools. De alguna manera esta herramienta se considera redundante con otras como lo es Audit, pero existen programadores que prefieren utilizar esta herramienta, ya que al hacer clic en las reglas de los nombres se despliega información adicional y se pueden implementar cambios sugeridos.

YSlow

Si se habla de desempeño, YSlow es una extensión de Chrome bastante útil para entender por qué una página en particular puede estar funcionando lento. YSlow realiza un análisis a la página basado en 23 reglas de pruebas de las 34 en total desarrolladas por el equipo de Exceptional Performance de Yahoo. YSlow es, desde 2012 de código abierto; es similar a PageSpeed Insights, sin embargo, muchos programadores utilizan las dos herramientas. Cada prueba recibe una calificación de la A a la F, se recomienda comenzar a revisar aquellas donde la calificación resultó ser F. Al hacer click en el resultado del test se verán una serie de recomendación de YSlow para remediar el problema.

Perfiles

En la tabla perfiles del DevTools podrás ver dónde tu página está invirtiendo más tiempo. En una página con mucha publicidad este análisis puede resultar bastante deprimente. Algunos programadores ignoran el tiempo de inactividad y normalmente trabajan de los tiempos más bajos hasta que encuentran un punto que consideran de rendimiento decente y ven qué más pueden mejorar. Normalmente al aceptar sugerencias de PageSpeed y/o de YSlow se verá reflejado en la mejora del desempeño en la tabla de perfiles.

Recursos

La tabla de recursos del DevTools es una manera fácil y rápida de mirar todos los scripts incluidos en una página web. Normalmente se usa este panel para ver cómo una página funciona y qué está haciendo. La función de $(document).ready de este ejemplo muestra claramente un diseño responsive de la página con ayuda de jQuery.

Timeline
La línea de tiempo del DevTools muestra gráficamente cómo una página web está gastando el tiempo a detalle. Por ejemplo, podemos ver que los primeros 100ms (la barra a la izquierda) se gasta sobre todo cargando y los segundos 100ms se gasta sobre todo renderizando. La página tarda 3 segundos encriptando, que es muchísimo, pero la mayoría de la renderización se realiza antes de que comience el encriptado, así que los usuarios no notarán eso.

Con información de Infoworld