Descubrir las Herramientas de desarrollo de Internet Explorer

Novedad para Windows Internet Explorer 8

Las Herramientas de desarrollo se incluyen en todas las instalaciones de Internet Explorer 8. Esta herramienta permite a los desarrolladores de sitios web depurar rápidamente Microsoft JScript; investigar comportamientos específicos de Internet Explorer; o agilizar la realización de iteraciones a fin de crear prototipos de un nuevo diseño o probar soluciones para un problema sobre la marcha. En este artículo se presenta una introducción a las características clave de las Herramientas de desarrollo.

Introducción

Las herramientas de calidad son fundamentales para la productividad del desarrollador. Aunque existen muchas herramientas de desarrollo web, es probable que no satisfagan sus necesidades para todas las tareas. Por ejemplo, puede que desee depurar JScript rápidamente; investigar un comportamiento específico de Internet Explorer; o agilizar la iteración a fin de crear prototipos de un nuevo diseño o probar soluciones para un problema. Para mejorar la productividad del desarrollador en estos casos y otros parecidos, Internet Explorer 8 incluye herramientas eficaces y fáciles de usar con algunas características importantes:

  • Integración y facilidad de uso: todas las instalaciones de Internet Explorer 8 incluyen una instancia de las Herramientas de desarrollo. Esto habilita la depuración en cualquier equipo que ejecute Internet Explorer 8. Además, las herramientas se cargan únicamente cuando se necesitan, a fin de limitar su impacto en el rendimiento del explorador. Con las Herramientas de desarrollo, puede depurar script sobre la marcha exclusivamente en el proceso de Internet Explorer actual, en lugar de habilitar la depuración para Internet Explorer en su conjunto.
  • Interfaz visual con la plataforma: en lugar de realizar la ingeniería inversa del funcionamiento del sitio, o de modificar el sitio para generar la información de depuración, las Herramientas de desarrollo permiten mirar en Internet Explorer para ver la presentación del sitio. De esta forma se reduce el tiempo dedicado a depurar sitios dinámicos, donde la inspección del código fuente no resulta útil, o a investigar comportamientos específicos de Internet Explorer donde una herramienta de creación genérica no aporta ninguna ayuda.
  • Posibilidad de experimentación rápida: al crear prototipos de un nuevo diseño o probar las correcciones en versiones anteriores de Internet Explorer, es probable que edite el código fuente, lo guarde, actualice la página en el explorador y vuelva a empezar. Las Herramientas de desarrollo de Internet Explorer 8 simplifican este proceso permitiéndole editar el sitio desde el propio explorador y ver los cambios de inmediato.
  • Optimización del rendimiento de las aplicaciones: identificar y corregir las degradaciones de rendimiento suele requerir un enfoque iterativo que se lleva a cabo centrándose en un escenario cada vez. El generador de perfiles de script de las Herramientas de desarrollo de Internet Explorer 8 permite recopilar estadísticas, como el tiempo de ejecución y la cantidad de veces que se ha llamado a una función de JScript a medida que se prueba la aplicación, y utilizar el informe de perfil para identificar y corregir con rapidez los cuellos de botella para el rendimiento.
Gracias a estas características, las Herramientas de desarrollo mejorarán su productividad de forma drástica al desarrollar en Internet Explorer. En el resto de este artículo se explican muchas de ellas, y otras, con mayor detalle.

Tareas iniciales

Comenzar a utilizar las herramientas resulta simple: presione F12 o haga clic en Herramientas de desarrollo en el menú Herramientas.

Una vez abiertas, las herramientas están presentes en su propia ventana, cada una de ellas conectada a una sola pestaña de Internet Explorer. Si prefiere reducir la cantidad de ventanas abiertas, puede anclar las herramientas a una pestaña haciendo clic en el botón Anclar o presionando CTRL+P.

Algunas características de las herramientas no requieren la interfaz de herramientas completa. En ese caso, haga clic en el botón Minimizar o presione CTRL+M cuando las herramientas estén ancladas. Las herramientas convierten en una fila en la parte inferior de la ventana, con acceso a la barra de menús de comandos solamente.

Depurar HTML y CSS

Las herramientas proporcionan visibilidad del explorador, de modo que pueda inspeccionar las hojas de estilos en cascada (CSS) y el HTML del sitio tal y como están presentes en Internet Explorer, no solo en el código fuente original. Esto resulta especialmente útil para los sitios dinámicos, los sitios complejos y los sitios que usan marcos de trabajo, como las páginas Active Server (ASP) o PHP.

El recuadro de contenido principal de las herramientas muestra el árbol DOM (Document Object Model) del sitio, que refleja el que Internet Explorer mantiene para representar el sitio en memoria. Puede navegar por el árbol con el mouse o el teclado. La manera más rápida de buscar el nodo de un elemento concreto de la página es utilizar la característica Seleccionar el elemento con un clic. Si utiliza esta característica para seleccionar un elemento de la página, las herramientas seleccionarán automáticamente el nodo del árbol correspondiente. Un método alternativo es utilizar el cuadro Buscar.

Inspeccionar elementos HTML

Después de haber seleccionado un elemento en el árbol DOM, el recuadro Propiedades de la derecha expone más información sobre el elemento, como sigue:

  • Estilo: el comando Estilo mejora la depuración de CSS proporcionando una lista de todas las reglas que se aplican al elemento seleccionado. Las reglas se muestran por orden de precedencia, de tal forma que las que se aplican en último lugar aparecen en la parte inferior y todas las propiedades invalidadas por otra están tachadas, para que pueda entender rápidamente cómo afectan las reglas CSS al elemento actual sin tener que buscar manualmente las coincidencias de los selectores. Puede activar o desactivar una regla CSS con solo activar o desactivar la casilla situada junto a ella; la acción surtirá efecto de inmediato en la página.
  • Rastrear estilos: este comando contiene la misma información que Estilo, salvo que agrupa los estilos por propiedades. Si busca información sobre una propiedad concreta, cambie al comando Rastrear estilos. Basta con buscar la propiedad que le interesa y hacer clic en el icono más (+): aparecerá una lista de todas las reglas que han establecido esa propiedad, de nuevo en orden de precedencia.
  • Distribución: el comando Distribución proporciona información del modelo de cuadro, tales como el desplazamiento del elemento, su alto y su espaciado interno. Utilice este comando al depurar la colocación de un elemento.
  • Atributos: el comando Atributos permite inspeccionar todos los atributos definidos del elemento seleccionado. Este comando también permite editar, agregar o quitar atributos del elemento seleccionado.

Para continuar inspeccionando CSS, cambie a la pestaña CSS a fin de obtener una lista de todos los archivos CSS del sitio actual.

Inspeccionar propiedades CSS

Al cambiar a la pestaña CSS, obtiene acceso a todos los archivos CSS externos que se van a inspeccionar. Seleccione una hoja de estilos haciendo clic en el botón de selector correspondiente. Al hacer clic en el nombre o el valor de una propiedad puede cambiarlo y ver su efecto inmediatamente.

Editar código fuente sobre la marcha

Después de utilizar las herramientas para inspeccionar y recopilar la información necesaria, puede que tenga que adoptar medidas de inmediato conforme a los resultados obtenidos. Para editar cualquier atributo HTML o propiedad CSS, basta con hacer clic en él, escribir el nuevo valor y presionar ENTRAR. El cambio surte efecto al momento, de modo que puede probar los cambios enseguida. En HTML, también puede presionar el botón Editar para poder editar el árbol completo y, a continuación, agregar, quitar o editar elementos completos. En cualquier caso, las Herramientas de desarrollo agilizan la edición sin modificar el código fuente. Cuando todo esté tal y como usted desee, puede guardar los cambios.

Guardar los cambios

Todos los cambios realizados en las herramientas existen únicamente en la representación interna del sitio en Internet Explorer. Por consiguiente, al actualizar la página o navegar fuera de ella se recupera el sitio original. Sin embargo, puede que en algunos casos desee guardar los cambios. En las pestañas HTML y CSS, haga clic en el botón Guardar para guardar en un archivo el HTML o CSS actual, respectivamente. Recuerde que no solo las áreas del sitio que haya modificado serán diferentes del código fuente, sino que es posible que existan diferencias en otras partes también, puesto que las herramientas muestran el sitio tal y como existe en Internet Explorer, no en el código fuente. Para evitar sobrescribir el código fuente accidentalmente, las herramientas guardan la salida como texto y agregan un comentario inicial al archivo.

Para obtener más información sobre HTML y CSS, vea el artículo Depurar HTML y CSS con las Herramientas de desarrollo (puede estar en inglés).

Depurar JScript

Si bien CSS facilita la compilación de sitios dinámicos sin JScript, los sitios más complejos siguen necesitando algo de script, cuando menos. Al igual que sucede con cualquier lenguaje de programación, un buen depurador resulta fundamental para la productividad; eso es precisamente lo que proporcionan las Herramientas de desarrollo.

Iniciar y detener el depurador

Depurar JScript en Internet Explorer 8 es fácil. En cualquier sitio que desee depurar, abra las Herramientas de desarrollo, cambie a la pestaña Script y haga clic en Iniciar depuración. Al iniciar el proceso de depuración, las Herramientas de desarrollo actualizarán la página y desanclarán las herramientas si están ancladas.

Una vez iniciado, aporta toda la funcionalidad que cabe esperar de un depurador. Cuando haya finalizado, haga clic de nuevo en el botón para detener la depuración. Mientras el depurador está funcionando, las Herramientas de desarrollo proporcionan un control eficaz de los scripts y permiten comprenderlos en profundidad.

Controlar la ejecución

Puede pausar la ejecución en un punto especificado estableciendo puntos de interrupción. Haga clic en un número de línea o bien haga clic con el botón secundario en el código fuente y seleccione Insertar punto de interrupción. Puede establecer puntos de interrupción dentro de funciones incorporadas o de controladores de eventos. Además, puede establecer Puntos de interrupción condicionales.

Si no está seguro de dónde establecer un punto de interrupción, haga clic en Interrumpir todo para pausar la ejecución antes de que se ejecute la próxima instrucción de JScript, o en Error de interrupción para pausar la ejecución cuando Internet Explorer encuentre un error de script. Después de pausar la ejecución, recorra paso a paso el script, incluyendo las funciones anónimas, con los comandos Paso a paso por instrucciones, Paso a paso por procedimientos y Paso a paso para salir.

Inspeccionar variables

Al recorrer el código paso a paso, resulta útil inspeccionar el estado actual de las variables. Dentro de la pestaña Script, utilice el recuadro Variables locales para ver las variables locales, y el recuadro Inspección para supervisar una lista personalizada de variables. Para agregar variables a esta lista, haga clic con el botón secundario en el código fuente y seleccione Agregar inspección, o bien escriba el nombre de la variable en el recuadro Inspección.

Inspeccionar la pila de llamadas

Mientras depura la aplicación recorriendo paso a paso el código JScript, puede ver las funciones de la pila de llamadas actual. Al hacer clic en una función de la lista de la pila de llamadas, se muestra el código fuente en el recuadro de contenido principal.

Utilizar la consola del depurador

Con las Herramientas de desarrollo, basta con escribir las instrucciones de JScript en el recuadro Consola para ejecutarlas, en lugar de tener que editar el código fuente para probar una instrucción. Haga clic en Modo de varias líneas para escribir varias líneas que se ejecutarán de una vez. Internet Explorer ejecuta el código de inmediato, de tal forma que puede probar el resultado de agregar ese código en la misma ubicación en que se encuentra el punto de interrupción actual. Puede utilizar la Consola aunque no esté depurando. Para facilitar la corrección de errores en la página, Consola también registra todos los mensajes de error del script en console.log. Encontrará más información sobre ello en la sección sobre uso de la Consola para ejecutar instrucciones de código de Depurar script con las Herramientas de desarrollo (puede estar en inglés).

Para obtener información más en profundidad sobre la depuración de script, vea el artículo Depurar script con las Herramientas de desarrollo (puede estar en inglés).

Crear perfiles de rendimientos de JScript

Depurar JScript ayuda a perfeccionar el comportamiento del sitio, pero el generador de perfiles de JScript puede contribuir a situarlo en un nivel superior, mejorando su rendimiento. El generador de perfiles aporta datos sobre la cantidad de tiempo dedicada a cada uno de los métodos de JScript e incluso a las funciones de JScript integradas, como la concatenación de cadenas. Puesto que puede iniciar y detener el generador de perfiles de JScript en cualquier momento durante la ejecución de la aplicación, puede recopilar numerosos datos de perfiles de cada caso concreto que le interese.

Iniciar y detener el generador de perfiles

Al igual que el depurador, empezar a utilizarlo es sencillo: abra la pestaña Generador de perfiles y haga clic en Iniciar la creación de perfiles para comenzar una sesión. Siga el procedimiento del caso cuyo perfil desee obtener y haga clic en Detener la creación de perfiles. Podrá examinar los datos resultantes de inmediato.

Ver datos

De forma predeterminada, los datos aparecen en una vista de función con una lista de todas las funciones utilizadas. Haga clic en el menú desplegable Vista actual y seleccione Árbol de llamadas para ver un árbol que representa el orden de las llamadas realizadas, donde puede recorrer paso a paso el código y detectar las zonas activas. En ambas vistas, puede agregar, quitar, organizar y ordenar las columnas para buscar la información que está buscando.

El informe del perfil proporciona información sobre la dirección URL y el número de línea de la función, a fin de ayudarle a buscar el código en la aplicación. Haga clic en el nombre de función para abrir el código fuente de la función en el recuadro de contenido principal de la pestaña Script.

Nota: la funcionalidad de asignación de números de línea a código fuente únicamente está disponible cuando la depuración de script está habilitada. Encontrará más información sobre la depuración de script en: Depurar script con las Herramientas de desarrollo (puede estar en inglés).

Crear perfiles de varias sesiones y exportar los datos

Haga clic de nuevo en Iniciar la creación de perfiles para comenzar una nueva sesión de creación de perfiles. Cuando se hace clic en Detener la creación de perfiles, se muestran los nuevos datos. Para ver los datos de sesiones cuyos perfiles se han creado previamente, haga clic en la lista desplegable de archivos y elija otro informe. El informe del perfil se conserva durante el proceso de Internet Explorer actual, pero puede guardar los datos que contiene en formato CSV; para ello, haga clic en el botón Exportar y utilice cualquier otra aplicación para continuar investigando.

Para obtener más información sobre la creación de perfiles, vea el artículo Crear perfiles de script con las Herramientas de desarrollo (puede estar en inglés).

Buscar contenido

Las Herramientas de desarrollo proporcionan un conjunto de herramientas para inspeccionar y modificar el código fuente y probarlo sobre la marcha. Cuando se tienen que examinar gran cantidad de código fuente, resulta muy útil encontrar lo que se busca con rapidez. Ahora es posible, gracias al cuadro Buscar de las Herramientas de desarrollo. El cuadro Buscar es contextual con respecto a la pestaña de modo en la que se encuentre. Por ejemplo, si se encuentra en la pestaña HTML, la búsqueda se realizar en el DOM del recuadro de contenido principal. Se resaltan todas las coincidencias y se selecciona la primera de ellas. De igual forma, puede buscar en las pestañas CSS, Script y Generador de perfiles.

El cuadro Buscar también admite la sintaxis de la API de selectores de W3C  vínculo de World Wide Web para la pestaña HTML. Para utilizar la sintaxis de selectores, la búsqueda debe comenzar por el símbolo "@". Por ejemplo, para buscar todos los elementos div, escriba "@div". Para buscar únicamente los elementos div con un nombre de clase CSS concreto, escriba "@div.nombreDeClase"; para buscar todos los elementos con ese nombre de clase, escriba "@.nombreDeClase". También puede buscar elementos con un identificador definido; para ello, escriba "@#identificadorDefinido". Para obtener más información sobre los selectores CSS, vea Entender los selectores CSS (puede estar en inglés).

Nota: los nombres de clase CSS distinguen mayúsculas de minúsculas cuando se utiliza la sintaxis de selectores en el cuadro Buscar.

Ver código fuente

Antes de Internet Explorer 8, el único código fuente que se podía ver era el original, haciendo clic con el botón secundario en una página web y seleccionando Ver código fuente. Ahora, todavía se puede hacer. Sin embargo, el comando Ver de las Herramientas de desarrollo proporciona mayor control sobre el código fuente que se desea ver. Puede examinar un elemento concreto con el código fuente DOM solamente, o bien con el código fuente y con los estilos DOM que se han aplicado a ese elemento. De este modo se aísla el elemento para que pueda centrarse y detectar cualquier posible problema. También puede ver el código fuente original de la página web o el código fuente DOM representado por Internet Explorer. Esto incluye el código fuente original y el insertado mediante scripts. Ahora puede ver exactamente lo mismo que el explorador de Internet Explorer.

Además, el comando Ver incluye la opción de ver el informe de vínculos. Este informe se genera en una pestaña independiente del explorador con información de todos los vínculos que se encuentran en la página.

Nota: las Herramientas de desarrollo ofrecen la opción de elegir su propia aplicación para ver el código fuente. Encontrará esta opción en el menú Archivo.

Elementos de contorno en la pantalla

¿Se ha preguntado alguna vez dónde está el borde de un elemento determinado de la pantalla? ¿Alguna vez ha tenido que activar el borde de un elemento en 1, solamente para ver dónde está? El comando Esquema de las Herramientas de desarrollo permite ver los contornos de todos los elementos sin tener que modificar el código fuente. El comando proporciona algunos elementos de uso frecuente, tales como tablas, elementos Div e imágenes. También proporciona un cuadro de diálogo para agregar cualquier elemento cuyo contorno desee mostrar. También puede asignar un color a cada elemento para ayudar a diferenciarlos. El contorno persistirá hasta que lo desactive o actualice la página. Encontrará más información sobre el menú Esquema en la sección dedicada a este menú de la Referencia de la interfaz de usuario de las Herramientas de desarrollo (puede estar en inglés).

Trabajar con imágenes

Cuando se trabaja con imágenes, las Herramientas de desarrollo proporcionan varios comandos que le ayudan a identificar con rapidez información sobre las imágenes, tales como tamaño de archivo, dimensiones y ruta de acceso, directamente en la pantalla. También permite activar o desactivar la presentación de imágenes. Incluso permite generar un informe de imágenes para todas las que se encuentran en la página web.

Controlar la memoria caché y las cookies

El menú de comandos Caché permite controlar la configuración de la memoria caché y de las cookies. Puede establecer el explorador en Siempre actualizar desde el servidor para estar seguro de obtener la información más reciente. También puede controlar la memoria caché con Borrar caché de exploración o Borrar caché de exploración para este dominio.

Si trabaja con cookies, puede deshabilitarlas para que no se escriba ninguna en el equipo. Puede ver al momento una lista completa de todas las cookies haciendo clic en Ver información de cookies. Si lo desea, también puede seleccionar Borrar cookies de la sesión o Borrar cookies para el dominio.

En ambos casos para la memoria caché y las cookies, estos comandos resultan muy prácticos porque proporcionan acceso rápido y un control estrecho del entorno del explorador.

Utilizar las herramientas de productividad

El menú de comandos Herramientas ofrece tres herramientas de productividad para trabajar en los sitios web.

  1. La herramienta Cambiar tamaño: esta herramienta ayuda a cambiar rápidamente el tamaño de la ventana para ajustarlo a tamaños estándar, como 800 x 600 ó 1024 x 768; también permite agregar tamaños de ventana personalizados. Encontrará los métodos abreviados de teclado disponibles para ello en la Referencia de métodos abreviados de teclado de las Herramientas de desarrollo (puede estar en inglés).
  2. La herramienta Mostrar la regla: permite dibujar las reglas en la pantalla para ayudarle a capturar la distancia entre los objetos. Las reglas se pueden establecer de modo que se ajusten al eje X/Y, se ajusten al elemento o sean de forma libre. Puede dibujar tantas reglas como desee y reutilizar una de ellas cambiando su tamaño y arrastrándola al lugar que desee.
  3. La herramienta Mostrar selector de colores: ayuda a elegir colores. Si sitúa el selector sobre cualquier texto, objeto o fondo que se vea en la pantalla, aparece una muestra del color en que se encuentra el selector en ese momento, junto con su valor hexadecimal. Cuando se hace clic en un color, se puede copiar el valor en el código.

Validar código fuente

Cuando el trabajo de desarrollo ha finalizado, es interesante saber que el código es conforme con diversos estándares, tales como los de HTML, CSS y accesibilidad. Las Herramientas de desarrollo han recopilado estos recursos de gran utilidad para ayudarle a comprobar el código fuente con respecto a estos validadores. Basta con elegir el tipo de validación que se desea realizar, o bien optar por una sesión de varias validaciones.

Realizar pruebas en diferentes exploradores y modos de documento

Internet Explorer 8 tiene la misma capacidad de presentar páginas y de comunicar la información de versión que Internet Explorer 7. Los desarrolladores web y los usuarios finales pueden utilizar esta capacidad para asegurarse de que los sitios continúan funcionando aunque no se hayan compilado para Internet Explorer 8, pero también puede se puede usar para probar cuál será el aspecto del sitio para los usuarios de Internet Explorer 7.

Probar los modos de explorador

El menú Modo de explorador permite seleccionar cómo informará Internet Explorer sobre tres propiedades importantes:

  • Cadena de agente de usuario: el valor que Internet Explorer envía a los servidores web para identificarse.
  • Vector de versión: el valor utilizado al evaluar comentarios condicionales.
  • Modo de documento: el valor que se utiliza para determinar si Internet Explorer utiliza el comportamiento más reciente para las operaciones de CSS, DOM y JScript, o bien emula una versión anterior de Internet Explorer para ofrecer compatibilidad.
Hay tres opciones del Modo de explorador, cada una de la cuales modifica estos valores de distinta manera:
  • Internet Explorer 7: en este modo, Internet Explorer comunica los mismos agente de usuario, vector de versión y modo de documento que se utilizan en Internet Explorer 7. Utilice este modo para probar cómo será la experiencia de los usuarios de Internet Explorer 7 con el sitio.
  • Internet Explorer 8: en este modo, Internet Explorer comunica el agente de usuario, el vector de versión y e modo de documento que coinciden con el comportamiento predeterminado de Internet Explorer 8, que es el que presente mayor compatibilidad con estándares que haya disponible en esta versión del explorador. Utilice este modo si desea probar cómo será la experiencia de los usuarios de Internet Explorer 8 con el sitio.
  • Vista de compatibilidad de IE8: en este modo, Internet Explorer 8 comunica las cadenas de vector de versión, de modo de documento y de agente de usuario como si se tratara de Internet Explorer 7; sin embargo, la cadena de agente de usuario incluye un token que indica que el explorador es en realidad Internet Explorer 8. Utilice este modo para probar cómo será la experiencia de los usuarios de Internet Explorer 8 si eligen la opción Vista de compatibilidad.

Probar los modos de documento

El modo de documento define cómo Internet Explorer presenta la página, pero no afecta en absoluto a las cadenas de vector de versión ni de agente de usuario. El uso de esta opción junto con el modo de explorador permite probar rápidamente qué modo de documento se debe utilizar para el sitio. Existen tres opciones:

  • Modo no estándar: este comportamiento coincide con el de Internet Explorer cuando se representa un documento sin la directiva DOCTYPE o con una directiva DOCTYPE no estándar. Es similar al comportamiento de Microsoft Internet Explorer 5 y al modo no estándar de Internet Explorer 6, e igual que el modo no estándar de Internet Explorer 7.
  • Modo estándar de Internet Explorer 7: este comportamiento coincide con el de Internet Explorer 7 al presentar un documento con una directiva DOCTYPE estricta o desconocida.
  • Modo estándar de Internet Explorer 8: este comportamiento es el más reciente de compatibilidad con estándares disponible en Internet Explorer 8 y es el que se utiliza de forma predeterminada en esta versión del explorador al presentar un documento con una directiva DOCTYPE estricta o desconocida.

Para obtener más información sobre modos de compatibilidad del documento, vea el artículo Probar los modos de explorador y de compatibilidad del documento mediante las Herramientas de desarrollo (puede estar en inglés).

Utilizar métodos abreviado de teclado

Las Herramientas de desarrollo de Internet Explorer 8 presentan un uso extendido de los métodos abreviados de teclado a fin de facilitar aún más la consecución de tareas. Puede utilizar convenciones estándar de Windows, tales como F12 para abrir o cerrar las Herramientas de desarrollo, o F5 para actualizar la página. Encontrará la lista completa en Referencia de métodos abreviados de teclado de las Herramientas de desarrollo (puede estar en inglés).

Hacer referencia a comandos de interfaz

Aunque este artículo presenta muchas de las principales características de las Herramientas de desarrollo, encontrará aún más información sobre todas las que están disponibles en Referencia de la interfaz de usuario de las Herramientas de desarrollo (puede estar en inglés).

Temas relacionados

Adiciones de comunidad

Mostrar: