Introducción
Google Chrome es un navegador web completo y potente, pionero en lo que es posible para las aplicaciones en la Web. Google se esforzó mucho para brindar a los usuarios finales una experiencia de navegación rápida, muy estable y con muchas funciones. Google también se aseguró de que los desarrolladores como tú tengan una excelente experiencia con Chrome. Las Herramientas para desarrolladores, que se agrupan y están disponibles en Chrome y Safari, permiten a los desarrolladores y programadores web un acceso profundo a los componentes internos del navegador y su aplicación web.
Las Herramientas para desarrolladores forman parte del proyecto Webkit de código abierto. La mayor parte de la información que se aborda en este artículo se aplica tanto a Google Chrome como a 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, haremos 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 conocen o aún no las investigaron. Sin embargo, estamos seguros de que incluso si eres un desarrollador web experimentado, te darán una o dos sugerencias.
Si tu instancia de las 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 seguir el proceso y obtener acceso a todas las funciones que se describen aquí.
Descripción general
En general, existen ocho grupos principales de herramientas disponibles para ver Herramientas para desarrolladores, y las funciones se amplían con cada versión. Chrome 5 ahora ofrece elementos, recursos, secuencias de comandos, cronograma, perfiles, almacenamiento, auditorías y consola.
Elementos
La herramienta Elementos te permite ver la página web tal como la ve el navegador. Es decir, si usas la herramienta Elementos, podrás ver el código HTML sin procesar, los estilos CSS sin procesar, el modelo de objetos del 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 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 ayudarte a acelerar los tiempos de carga de las páginas.
Secuencias de comandos
Para examinar el código JavaScript de una página, usarás la herramienta de secuencias de comandos. Aquí puedes encontrar una lista de secuencias de comandos que requiere la página, además de un depurador completo de secuencias de comandos destacadas. Incluso puedes cambiar JavaScript sobre la marcha.
Cronograma
Para obtener análisis avanzados de los tiempos y la velocidad, la herramienta Rutas ofrece una visibilidad profunda de las diversas actividades en segundo plano de Chrome. Puedes aprender el tiempo que tarda el navegador en procesar eventos del DOM, procesar 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 aprender qué funciones tardan más tiempo en ejecutarse y enfocarte exactamente en dónde optimizarlas.
Almacenamiento
Las aplicaciones web modernas requieren más persistencia que las cookies, y la herramienta Storage te ayuda a rastrear, consultar y depurar el almacenamiento local del navegador. Esta herramienta puede mostrar y consultar datos almacenados en bases de datos y almacenamientos locales, y almacenamiento de sesiones y cookies.
Auditoría
La herramienta de auditoría es como tener a su propio asesor de optimización web a su 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 funciones completas. En la consola, puedes ingresar código JavaScript arbitrario para interactuar con la página de manera programática.
Iniciando
Es fácil iniciar las Herramientas para desarrolladores dentro de Chrome.
En cualquier sistema operativo, simplemente 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 desglosará 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 para ver las siguientes opciones:
Si seleccionas "Inspeccionar elemento", se abrirán las Herramientas para desarrolladores, que debería verse de la siguiente manera:
Observa cómo las Herramientas para desarrolladores se abrieron dentro de la pestaña Elementos y se desglosaron y destacaron automáticamente la etiqueta <img> del logotipo de Google. Esto es muy útil cuando tienes curiosidad por saber qué HTML generó un elemento de página en particular.
También puedes abrir las Herramientas para desarrolladores con una simple combinación de teclas. Según el sistema operativo que uses, prueba lo siguiente:
- En Windows y Linux, selecciona las teclas
Control-Shift-J. - En Mac, selecciona las teclas
Command-Option-J.
Por último, puedes optar por abrir las herramientas desde el menú principal del navegador.
En una Mac, y en la barra de menú principal de la aplicación, seleccione Ver, Herramientas para desarrolladores.
En una PC con Windows, debes usar el menú de la página ubicado en la parte superior derecha y seleccionar Herramientas para desarrolladores, Desarrollador.
Ahora que las Herramientas para desarrolladores están abiertas y listas, comencemos a explorar los elementos de la página principal de Google.
Elementos
La primera pestaña de las herramientas para desarrolladores es Elements. Esta es tu ventana a la estructura de la página web, que se presenta a medida que la ve tu navegador.
Navegación del DOM
Visitarás con frecuencia las pestañas Elementos cuando necesites identificar el fragmento HTML para algún aspecto de la página. Por ejemplo, podrías saber 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 manera de "ver el código fuente" de una página. Dentro de la pestaña Elements, el DOM de la página estará bien formateado, lo que te permitirá ver fácilmente los elementos HTML, su ascendencia y sus elementos subordinados. Con frecuencia, las páginas que visitas tienen HTML reducido o simplemente feo, lo que dificulta ver la estructura de la página. La pestaña Elements es tu solución para ver la estructura subyacente real de la página.
Por ejemplo, el siguiente es el resultado de "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 los servidores, pero difícil para los desarrolladores.
En su lugar, cuando quieras leer el código fuente de una página, usa la pestaña Elementos para ver una jerarquía de elementos sintáctica destacada con formato estilístico.
La pestaña Elements también te permite explorar, interactuar y, a veces, hasta cambiar los estilos, las métricas, las propiedades y los receptores de eventos de cualquier elemento de la página.
Navegación por estilos
Debido a la naturaleza en cascada de CSS, el navegador Estilos de la pestaña Elementos es muy útil. A veces, los estilos se contraen sobre sí mismos y aparecen imágenes no deseadas. Saber qué regla de estilo aplica el navegador al elemento te ayuda a depurar este 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 estilo 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 observar que también hay estilos heredados de las etiquetas <center> y <body>, entre otros.
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 aplica al elemento. Para ver el producto final, selecciona el menú Estilo calculado, como se muestra en la siguiente captura de pantalla.
A continuación, veremos brevemente otras funciones que proporciona la pestaña Elementos. Abordaremos lo siguiente con más detalle en artículos futuros.
Modelo de caja
Puedes ver el modelo de cuadro a medida que se aplica al elemento seleccionado. Para ello, selecciona el menú Métricas:
Propiedades del elemento
Puedes ver todas las propiedades del elemento, tal como las verían JavaScript y el DOM, seleccionando el menú Properties:
Objetos de escucha de eventos
Y, por último, incluso puedes ver los objetos de escucha de eventos adjuntos al elemento, o esa burbuja a través del elemento, a través del menú de los objetos de escucha de eventos:
Resumen
Hay muchas funciones disponibles a través de la pestaña Elementos, y los próximos artículos profundizarán en los menús individuales.
Deberías usar la pestaña Elements cuando desees ver cómo se ve la página en el navegador. Los problemas comunes, como "¿cómo se procesa este estilo?" o "¿qué etiquetas HTML generaron este componente?", se resuelven rápida y fácilmente mediante la pestaña Elementos.
Piensa en la pestaña Elements como una uber-"ver fuente" y obtén una visibilidad muy nítida de tu página.
Después de investigar la página, es posible que te preguntes cómo llegaron allí en primer lugar el HTML, el CSS y las imágenes. La pestaña Recursos, que se describe a continuación, muestra cómo el navegador cliente y el servidor web se comunican 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 del ancho de banda. Tu objetivo debe ser que la transferencia de tu aplicación, de un servidor a un cliente, sea lo más rápida y eficiente posible. Tus usuarios te agradecerán por las cargas rápidas de páginas, ahorrarás dinero en ancho de banda y 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 tu ventana de comunicación entre el servidor web y el navegador del cliente. Podrás ver todos los recursos que solicita el navegador (esto siempre es muy sorprendente), el tiempo que lleva 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, tendrás que habilitarla para la página que estás viendo.
Te recomendamos dejar seleccionada la opción predeterminada "Habilitar solo para esta sesión", ya que no quieres incurrir innecesariamente en una pequeña penalización de rendimiento. Cuando 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 requeridos y cargados para la página principal de Google.
Hay mucha información en esta pantalla, así que vamos a analizarla paso a paso.
El comportamiento predeterminado es mostrarte cuánto tiempo llevó solicitar y cargar todos los recursos de la página. Desplazarse hacia abajo en la lista de recursos puede sorprenderte, 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 de lo que se solicita es el primer paso para la optimización y la eventual reducción de recursos.
Si solo te interesan las imágenes u hojas de estilo, puedes filtrar el tipo de recurso usando el menú que está 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 pantalla 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 cómo componen todo el cronograma de solicitudes, te recomendamos desglosar los recursos individuales.
Si notas que algunos recursos se solicitan cada vez que accedes a la página, esto es una señal de que tus 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 izquierda.
Usa la pantalla 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 modifica o nunca se cambia, tu servidor debería establecer un encabezado Vencimiento para una fecha lejana en el futuro. Esto le indicará al navegador que no se debe volver a solicitar el recurso hasta esa fecha. Esto reduce la cantidad de conexiones HTTP que necesita tu página y, por lo tanto, acelera tu sitio.
Resumen
Hay mucho más sobre la pestaña Recursos, que abordaremos en un artículo futuro.
Usa la pestaña Recursos para obtener visibilidad sobre cómo el navegador del cliente se comunica con el servidor web. Con esta información, incluidos el tiempo, tamaño y orden de las solicitudes, puedes realizar optimizaciones inteligentes para reducir la carga del servidor y los costos, y aumentar la velocidad y mejorar la experiencia del usuario.
La velocidad es muy importante para tu sitio web, los usuarios y los motores de búsqueda. Una vez que se reduzca 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 Scripts, que analizamos a continuación, hace precisamente eso.
Recursos adicionales
Si deseas 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 sobre las herramientas para desarrolladores de Chrome
Y, por supuesto, consulte la segunda parte de este artículo en html5rocks.com, además de muchos otros contenidos fantásticos en HTML5 y Chrome.