Introducción
Google Chrome es un navegador web enriquecido y potente, pionero en lo que es posible para las aplicaciones en la web. Google ha trabajado arduamente para ofrecer a los usuarios finales una experiencia de navegación muy rápida, muy estable y con muchas funciones. Google también se aseguró de que los desarrolladores como tú tengan una gran experiencia con Chrome. Las Herramientas para desarrolladores, integradas y disponibles en Chrome y Safari, permiten a los desarrolladores y programadores web acceder en profundidad a los componentes internos del navegador y sus aplicaciones web.
Las Herramientas para desarrolladores forman parte del proyecto Webkit de código abierto. La mayor parte de la discusión en este artículo se aplica a Google Chrome y Safari. Sin embargo, las capturas de pantalla se tomaron con Google Chrome 6, por lo que puede haber pequeñas diferencias en tu navegador.
En este artículo, realizaremos un recorrido general de las Herramientas para desarrolladores y destacaremos sus funciones más populares y útiles. Nuestro público objetivo son los desarrolladores web que no conocían o aún no han investigado las Herramientas para desarrolladores. Sin embargo, estamos seguros de que recibirás una o dos sugerencias, incluso si eres un desarrollador web experimentado.
Si tu instancia de Herramientas para desarrolladores no coincide exactamente con las capturas de pantalla que se encuentran en este artículo, te recomendamos que actualices a la versión 5 para que puedas continuar y obtener acceso a todas las funciones que se describen aquí.
Descripción general
En general, hay ocho grupos principales de herramientas disponibles para ver las Herramientas para desarrolladores, y las capacidades se amplían con cada versión. Chrome 5 ahora ofrece elementos, recursos, secuencias de comandos, cronograma, perfiles, almacenamiento, auditorías y la consola.
Elementos
La herramienta Elementos te permite ver la página web tal como la ve el navegador. Es decir, con la herramienta Elements, puedes ver el código HTML sin procesar, los estilos CSS sin procesar, el Document Object Model y manipular los datos en tiempo real.
Recursos
Utiliza la herramienta Recursos para conocer los componentes que tu página web o aplicación solicita a los servidores web, cuánto tiempo demoran estas solicitudes y cuánto ancho de banda se requiere. También puedes ver los encabezados de solicitud y respuesta HTTP de cada uno de tus recursos. La herramienta Recursos es perfecta para ayudarlo a acelerar los tiempos de carga de las páginas.
Secuencias de comandos
Para ver el código JavaScript de una página, debes usar la herramienta Secuencias de comandos. Aquí encontrarás una lista de secuencias de comandos requeridas por la página, además de un depurador de secuencias de comandos completo. ¡Incluso puedes cambiar el código JavaScript sobre la marcha!
Cronograma
Para realizar análisis avanzados de latencia y velocidad, la herramienta Cronograma ofrece una visibilidad detallada de las distintas actividades que se realizan en segundo plano en Chrome. Puedes conocer cuánto tiempo tarda el navegador en manejar eventos de DOM, renderizar diseños de página y pintar la ventana.
Perfiles
La herramienta Perfiles te ayuda a capturar y analizar el rendimiento de las secuencias de comandos de JavaScript. Por ejemplo, puedes conocer qué funciones tardan más en ejecutarse y centrarse exactamente en dónde optimizarlas.
Almacenamiento
Las aplicaciones web modernas requieren más persistencia que las cookies, y la herramienta de almacenamiento te ayuda a rastrear, consultar y depurar el almacenamiento local del navegador. Esta herramienta puede mostrar y consultar datos almacenados en bases de datos locales, almacenamiento local, almacenamiento de sesión y cookies.
Auditar
La Herramienta de auditoría es como tener a tu propio asesor de optimización web sentado a tu lado. Esta herramienta puede analizar una página mientras se carga y proporcionar sugerencias y optimizaciones para disminuir el tiempo de carga de la página y aumentar la capacidad de respuesta percibida (y real).
Console
Por último, pero no menos importante, las Herramientas para desarrolladores ofrecen una consola con todas las funciones. En la consola, puedes ingresar código JavaScript arbitrario para interactuar con tu página de manera programática.
Iniciando
Iniciar las Herramientas para desarrolladores desde Chrome es sencillo.
Para cualquier sistema operativo, puedes hacer clic con el botón derecho en cualquier elemento de la página y seleccionar la opción "Inspeccionar elemento" en el menú contextual. Se abrirán las Herramientas para desarrolladores y se abrirá el elemento en el que hiciste clic.
Para ver esto en acción, visita http://www.google.com en el navegador Chrome. Haz clic derecho en el logotipo de Google para ver las siguientes opciones:
Si seleccionas "Inspeccionar elemento", aparecerán las Herramientas para desarrolladores, que deberían verse de la siguiente manera:
Observa cómo las Herramientas para desarrolladores se abrieron dentro de la pestaña Elementos y se desplegaron automáticamente y se destacaron la etiqueta <img> del logotipo de Google. Esto es muy útil cuando tienes curiosidad por saber qué HTML generó un elemento de página concreto.
También puedes abrir las Herramientas para desarrolladores con una combinación de teclas sencilla. Según el sistema operativo que tengas, prueba lo siguiente:
- En Windows y Linux, selecciona las teclas
Control-Shift-J. - En Mac, selecciona las teclas
Command-Option-J.
Por último, puedes abrir las herramientas desde el menú principal del navegador.
En una Mac, y desde la barra de menú principal de la aplicación, seleccione Ver, Herramientas para desarrolladores y Herramientas para desarrolladores.
En una PC con Windows, debes usar el menú de la página en la parte superior derecha y seleccionar Herramientas para desarrolladores.
Ahora que tienes las Herramientas para desarrolladores abiertas y listas, comencemos por explorar los elementos de la página principal de Google.
Elementos
La primera pestaña de las Herramientas para desarrolladores es Elementos. Esta es tu ventana a la estructura de la página web, que se presenta como la ve el navegador.
Navegación por DOM
A menudo visitarás las pestañas Elementos cuando necesites identificar el fragmento HTML para algún aspecto de la página. Por ejemplo, puede que sepas si una imagen tiene un atributo de ID de HTML y cuál es el valor de ese atributo.
A veces, la pestaña Elementos es una mejor forma de "ver el código fuente" de una página. Dentro de la pestaña Elements, el DOM de la página tendrá un formato adecuado, lo cual te permitirá mostrar fácilmente los elementos HTML, sus elementos principales y subordinados. Muy a menudo, las páginas que visitas tienen HTML reducido o simplemente feo, lo que dificulta ver cómo se estructura la página. La pestaña Elementos es la solución para ver la estructura subyacente real de la página.
Por ejemplo, el siguiente es el resultado de la "ver fuente" de la página principal de Google.
Es difícil leer la fuente anterior porque está optimizada y reducida. El formato es bueno para los clientes y servidores, pero difícil para los desarrolladores.
En cambio, cuando quieras leer el código fuente de una página, usa la pestaña Elements para ver una jerarquía de elementos destacada con sintaxis impresa.
La pestaña Elements también te permite explorar, interactuar y, a veces, incluso cambiar los estilos, las métricas, las propiedades y los objetos de escucha de eventos de cualquier elemento de la página.
Navegación de Styles
La naturaleza en cascada de CSS hace que el navegador Styles de la pestaña Elementos sea muy útil. A veces, los estilos se colapsan y aparecen imágenes no deseadas. Saber qué regla de estilo aplica el navegador al elemento te ayuda a depurar ese problema.
Al hacer clic en cualquier elemento de la pestaña Elements, se mostrarán todos los estilos asociados a ese elemento.
En la captura de pantalla anterior, verás que podemos distinguir todos los atributos de estilo que se están aplicando. Por ejemplo, el padding proviene directamente del atributo de estilo del elemento <img>. Sin embargo, el ancho y la altura provienen de sus respectivos atributos nativos. Curiosamente, puedes saber que también hay estilos heredados de las etiquetas <center> y <body>, entre otras.
Si bien es muy útil ver los estilos individuales y de dónde provienen, también es útil ver el conjunto final de estilos después de calcularlos y aplicarlos al elemento. Para ver el producto final, selecciona el menú Estilo calculado, como se muestra en la siguiente captura de pantalla.
A continuación, analizaremos brevemente las demás funciones que ofrece la pestaña Elementos. Abordaremos lo siguiente con más detalle en artículos futuros.
Modelo de caja
Puedes ver el modelo de cuadros a medida que se aplica al elemento seleccionado seleccionando el menú Métricas:
Propiedades del elemento
Puedes ver todas las propiedades del elemento, como lo verían JavaScript y el DOM, seleccionando el menú Properties:
Objetos de escucha de eventos
Por último, puedes incluso ver los objetos de escucha de eventos adjuntos al elemento, o ese cuadro en burbuja, a través del menú Event Listeners:
Resumen
Hay muchas funcionalidades disponibles en la pestaña Elementos, y los próximos artículos profundizarán en los menús individuales.
Debes usar la pestaña Elements cuando quieras ver cómo se ve la página en el navegador. Los problemas comunes, como "¿cómo se calcula este estilo?" o "¿qué etiquetas HTML generaron este componente?", se responden de forma rápida y fácil en la pestaña Elementos.
Piensa en la pestaña Elementos como una "fuente de la vista" uber y obtén una visibilidad muy nítida de tu página.
Después de haber investigado la página, es posible que te preguntes en primer lugar cómo llegaron allí las imágenes, el HTML y el CSS. En la pestaña Recursos, que se describe a continuación, se muestra cómo se comunican el navegador del cliente y el servidor web para enviar esos recursos.
Recursos
Una vez que tu aplicación esté funcionando, el siguiente paso debería ser optimizar el rendimiento de la red y el ancho de banda. Debes intentar que la transferencia de tu aplicación, de servidor a cliente, sea lo más rápida y eficiente posible. Los usuarios te agradecerán por la rápida carga de la página, ahorrarás dinero en ancho de banda y en recursos de servidor, y también obtendrás una mejor puntuación en las clasificaciones de los resultados de la Búsqueda de Google (que ahora tienen en cuenta la velocidad del sitio).
La pestaña Recursos de las Herramientas para desarrolladores es la ventana a la comunicación entre el servidor web y el navegador del cliente. Puedes ver todos los recursos que solicita el navegador (esto siempre es muy sorprendente), el tiempo que tarda en recibirlos del servidor y cuánto ancho de banda se usa durante la transferencia.
Irónicamente, ejecutar la pestaña Recursos afecta el rendimiento de carga de la página, por lo que está inhabilitada de forma predeterminada. La primera vez que accedas a la función, deberás habilitarla para la página que estés viendo.
Te recomendamos que dejes seleccionada la opción predeterminada “Habilitar solo en esta sesión”, ya que no quieres incurrir en una pequeña penalización de rendimiento de forma innecesaria. Una vez que hagas clic en "Enable resource tracking", la página se volverá a cargar, y las Herramientas para desarrolladores supervisarán y mostrarán los recursos enviados desde el servidor.
En la siguiente captura de pantalla, se muestran los recursos necesarios y cargados para la página principal de Google.
Hay mucha información en esta pantalla, así que vamos a analizarla parte por parte.
El comportamiento predeterminado es mostrarte cuánto tiempo llevó solicitar y cargar todos los recursos de la página. Puede que te sorprendas si te desplazas hacia abajo por la lista de Recursos, ya que es posible que no sepas cuántas solicitudes individuales hace el cliente. Una gran cantidad de solicitudes del cliente puede tener un impacto grave en el rendimiento. Obtener visibilidad sobre lo que se solicita es el primer paso para la optimización y la eventual reducción de los recursos.
Si solo te interesan las imágenes u hojas de estilo, puedes filtrar el tipo de recurso usando el menú directamente debajo de la ventana de la pestaña principal.
También aprenderás el orden en el que se solicitan los recursos. Con la visualización de la línea de tiempo, puedes comprender mejor por qué ciertos elementos de tu página aparecen más tarde que otros.
Después de obtener una descripción general de todos los recursos solicitados y de cómo componen el cronograma completo de las solicitudes, te recomendamos desglosar los recursos individuales.
Si notas que algunos recursos se solicitan cada vez que accedes a la página, eso es una señal de que los encabezados de almacenamiento en caché no están configurados correctamente. Puedes ver todos los encabezados de un recurso haciendo clic en el recurso en la lista de la izquierda.
Utiliza la pantalla de encabezados para asegurarte de que se establezca el código de respuesta HTTP esperado y de que se proporcionen los encabezados adecuados. Por ejemplo, si el recurso rara vez se cambia o nunca se cambia, tu servidor debería establecer un encabezado Expiration para un futuro lejano. Esto indicará al navegador que no se debe volver a solicitar el recurso hasta esa fecha. Esto reduce la cantidad de conexiones HTTP necesarias para tu página y, por lo tanto, acelera tu sitio.
Resumen
Hay mucho más sobre la pestaña Recursos, que abordaremos en un próximo artículo.
Usa la pestaña Recursos para obtener visibilidad de cómo el navegador del cliente se comunica con el servidor web. Con esta información, incluidos el tiempo, el tamaño y el orden de las solicitudes, puedes realizar optimizaciones inteligentes para reducir la carga del servidor y los costos, aumentar la velocidad y mejorar la experiencia del usuario.
La velocidad es muy importante para tu sitio web, tus usuarios y los motores de búsqueda. Una vez que reduzcas la cantidad y el tamaño de los recursos y tengas las conversaciones HTTP adecuadas, el siguiente paso es investigar y optimizar las secuencias de comandos que se ejecutan en tu página. Afortunadamente, la pestaña Scripts, que analizamos a continuación, hace precisamente eso.
Recursos adicionales
Para obtener más información sobre las herramientas para desarrolladores, te recomendamos lo siguiente:
- Video de presentación y diapositivas de las herramientas para desarrolladores de Chrome de Google I/O 2010
- Instructivo de herramientas para desarrolladores de Chrome
Y, por supuesto, mantente atento a html5rocks.com para la segunda parte de este artículo, junto con mucho más contenido excelente en HTML5 y Chrome.