Introducción
Google Chrome es un navegador web potente y completo que marca el camino para las aplicaciones en la Web. Google se esforzó por ofrecer una experiencia de navegación muy rápida, estable y con muchas funciones para los usuarios finales. Google también se aseguró de que los desarrolladores como tú tengan una excelente experiencia con Chrome. Las herramientas para desarrolladores, disponibles en Chrome y Safari, permiten a los desarrolladores y programadores web acceder a los componentes internos del navegador y su aplicación web.
Las herramientas para desarrolladores forman parte del proyecto de código abierto de Webkit. La mayor parte de la información de 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 ligeras diferencias en tu navegador.
En este artículo, haremos un recorrido general por las herramientas para desarrolladores y señalaremos sus funciones más populares y útiles. Nuestro público objetivo son los desarrolladores web que no conocían las herramientas para desarrolladores o que aún no las investigaron. Sin embargo, estamos seguros de que, incluso si eres un desarrollador web experimentado, aprenderás una o dos sugerencias.
Si tu instancia de Herramientas para desarrolladores no coincide con las capturas de pantalla que se encuentran en este artículo, te recomendamos que actualices a la versión 5 para que puedas seguir los pasos y obtener acceso a todas las funciones que se describen aquí.
Descripción general
En general, hay ocho grupos principales de herramientas disponibles en las herramientas para desarrolladores, y las funciones se extienden con cada versión. Chrome 5 ahora ofrece Elementos, Recursos, Secuencias de comandos, Rutas de acceso, Perfiles, Almacenamiento, Auditorías y Consola.
Elementos
La herramienta Elementos te permite ver la página web como la ve el navegador. Es decir, con la herramienta Elementos, puedes ver el código HTML sin procesar, los diseños de CSS sin procesar, el modelo de objetos de documento y manipularlos en tiempo real.
Recursos
Usa la herramienta Recursos para saber qué componentes solicita tu página web o aplicación a los servidores web, cuánto tiempo tardan 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 ayudarte a acelerar los tiempos de carga de las páginas.
Secuencias de comandos
Para ver el código JavaScript de una página, usarás la herramienta Secuencias de comandos. Aquí encontrarás una lista de las secuencias de comandos que requiere la página, además de un depurador de secuencias de comandos con todas las funciones. Incluso puedes cambiar el código JavaScript sobre la marcha.
Cronograma
Para el análisis avanzado de tiempos y velocidad, la herramienta Rutas ofrece visibilidad detallada de las diversas actividades que se llevan a cabo en segundo plano en Chrome. Puedes saber cuánto tiempo tarda el navegador en controlar los eventos del DOM, renderizar los 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 saber qué funciones tardan más en ejecutarse y enfocarte exactamente en dónde realizar optimizaciones.
Almacenamiento
Las aplicaciones web modernas requieren más persistencia que solo las cookies, y la herramienta de almacenamiento te ayuda a hacer un seguimiento, 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 sesiones y cookies.
Auditoría
La herramienta de auditoría es como tener a tu propio consultor de optimización web sentado a tu lado. Esta herramienta puede analizar una página a medida que 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. Desde la consola, puedes ingresar JavaScript arbitrario y, luego, interactuar de forma programática con tu página.
Inicio
Es fácil iniciar las herramientas para desarrolladores desde Chrome.
En 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 mostrará el elemento en el que hiciste clic.
Para ver esto en acción, visita http://www.google.com en el navegador Chrome. Haz clic con el botón derecho en el logotipo de Google y verás las siguientes opciones:
Si seleccionas "Inspeccionar elemento", se abrirán las herramientas para desarrolladores, que deberían verse de la siguiente manera:
Observa cómo se abrieron las herramientas para desarrolladores en la pestaña Elementos y se desglosaron automáticamente hasta la etiqueta <img> del logotipo de Google y se destacó. Esto es muy útil cuando quieres saber qué código HTML generó un elemento de página en particular.
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, en la barra de menú principal de la aplicación, selecciona Ver, Desarrollador, Herramientas para desarrolladores.
En una PC con Windows, debes usar el menú Página en la parte superior derecha y seleccionar Desarrollador, 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, presentada como la ve tu navegador.
Navegación de DOM
A menudo, visitarás las pestañas Elementos cuando necesites identificar el fragmento HTML de algún aspecto de la página. Por ejemplo, es posible que te preguntes si una imagen tiene un atributo id HTML y cuál es su valor.
A veces, la pestaña Elementos es una mejor manera de "ver el código fuente" de una página. En la pestaña Elementos, el DOM de la página tendrá un formato agradable y te mostrará fácilmente los elementos HTML, su ascendencia y sus descendientes. Con demasiada frecuencia, las páginas que visitas tienen un código HTML reducido o simplemente poco atractivo, lo que dificulta ver cómo está estructurada 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 "ver código 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 los servidores, pero difícil para los desarrolladores.
En su lugar, cuando quieras leer la fuente de una página, usa la pestaña Elementos para ver una jerarquía de elementos con formato de texto enriquecido y sintaxis destacada.
La pestaña Elementos también te permite explorar, interactuar y, a veces, incluso cambiar los diseños, las métricas, las propiedades y los objetos de escucha de eventos de cualquier elemento de la página.
Navegación de estilos
La naturaleza en cascada de CSS hace que el navegador de estilos de la pestaña Elementos sea muy útil. A veces, los estilos se contraen y aparecen imágenes no deseadas. Saber qué regla de diseño aplica el navegador al elemento te ayuda a depurar ese problema.
Si haces clic en cualquier elemento de la pestaña Elementos, se mostrarán todos los estilos adjuntos a ese elemento.
En la captura de pantalla anterior, verás que podemos indicar todos los atributos de diseño que se aplican. 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. Es interesante que también puedes ver que hay estilos heredados de la etiqueta <center>, la etiqueta <body> y otras.
Si bien es genial ver los estilos individuales y de dónde provienen, también es muy útil ver el conjunto final de estilos después de que se calcula y se aplica al elemento. Para ver el producto final, selecciona el menú Computed Style, como se muestra en la siguiente captura de pantalla.
A continuación, analizaremos brevemente las otras funciones que proporciona la pestaña Elementos. En artículos futuros, hablaremos de lo siguiente con más detalle.
Modelo de cuadro
Para ver el modelo de cuadro a medida que se aplica al elemento seleccionado, selecciona el menú Métricas:
Propiedades del elemento
Si seleccionas el menú Properties, puedes ver todas las propiedades del elemento, tal como lo verían JavaScript y el DOM:
Objetos de escucha de eventos
Por último, incluso puedes ver los objetos de escucha de eventos adjuntos al elemento o que aparecen en él a través del menú Objetos de escucha de eventos:
Resumen
Hay muchas funciones disponibles en la pestaña Elementos, y en artículos futuros, analizaremos con más detalle los menús individuales.
Debes usar la pestaña Elementos cuando quieras ver cómo se ve la página para 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 sencilla a través de la pestaña Elementos.
Piensa en la pestaña Elementos como una versión mejorada de “Ver código fuente” y obtén una visibilidad muy clara de tu página.
Después de investigar la página, es posible que te preguntes cómo llegaron allí el HTML, el CSS y las imágenes. En la pestaña Recursos, que se describe a continuación, se muestra cómo se comunican el navegador cliente y el servidor web para enviar esos recursos.
Recursos
Una vez que tu aplicación esté en funcionamiento, 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, del servidor al cliente, sea lo más rápida y eficiente posible. Tus usuarios te lo agradecerán por la carga rápida de las páginas, ahorrarás dinero en ancho de banda y recursos del 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 en Herramientas para desarrolladores es tu 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 la cantidad de ancho de banda que se usa durante la transferencia.
Irónicamente, ejecutar la pestaña Recursos afecta el rendimiento de la 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 recomiendo que dejes seleccionada la opción predeterminada "Habilitar solo para esta sesión", ya que no quieres incurrir innecesariamente en la pequeña penalización de rendimiento. Una vez que hagas clic en "Habilitar el seguimiento de recursos", se volverá a cargar la página y las Herramientas para desarrolladores supervisarán y mostrarán los recursos que se envían 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 por partes.
El comportamiento predeterminado es mostrarte cuánto tiempo tardó en solicitar y cargar todos los recursos de la página. Si te desplazas hacia abajo en la lista de recursos, es posible que te sorprendas, ya que es posible que no sepas cuántas solicitudes individuales realiza el cliente. Una gran cantidad de solicitudes del cliente puede afectar gravemente el rendimiento. Obtener visibilidad sobre lo que se solicita exactamente es el primer paso para la optimización y la eventual reducción de recursos.
Si solo te interesan las imágenes o las hojas de estilo, puedes filtrar el tipo de recurso con el menú que se encuentra 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 del cronograma, 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 cómo componen todo el cronograma de la solicitud, te recomendamos que desgloses los recursos individuales.
Si observas que se solicitan algunos recursos cada vez que accedes a la página, significa que tus encabezados de almacenamiento en caché no están configurados correctamente. Para ver todos los encabezados de un recurso, haz clic en él en la lista de la izquierda.
Usa la pantalla de encabezados para asegurarte de que se establezca el código de respuesta HTTP esperado y que se proporcionen los encabezados adecuados. Por ejemplo, si el recurso rara vez cambia o nunca cambia, tu servidor debe establecer un encabezado Expires para un futuro lejano. Esto le 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, lo que acelera tu sitio.
Resumen
La pestaña Recursos tiene mucho más para ofrecer, lo que analizaremos en un artículo futuro.
Usa la pestaña Recursos para obtener información sobre cómo se comunica el navegador del cliente con el servidor web. Con esta información, que incluye el tiempo, el tamaño y el orden de las solicitudes, puedes realizar optimizaciones inteligentes para reducir la carga y los costos del servidor, 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 hayas reducido la cantidad y el tamaño de los recursos, y se produzcan 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 Secuencias de comandos, que se analiza a continuación, hace exactamente eso.
Recursos adicionales
Para obtener más información sobre las herramientas para desarrolladores, te recomendamos lo siguiente:
- Video y diapositivas de la presentación de las Herramientas para desarrolladores de Chrome en Google I/O 2010
- Instructivo de las herramientas para desarrolladores de Chrome
Y, por supuesto, no te pierdas la Parte 2 de este artículo en html5rocks.com, junto con mucho otro contenido excelente de HTML5 y Chrome.