Exportar (0) Imprimir
Expandir todo
Personas que lo han encontrado útil: 12 de 25 - Valorar este tema

Usar las herramientas de desarrollo de Windows Internet Explorer 8 para corregir el sitio

Nota: Esta información es preliminar y está sujeta a cambios.

Windows Internet Explorer 8 presenta un conjunto nuevo de herramientas de desarrollo que pueden ayudar a identificar y a resolver problemas de HTML, hojas de estilo en cascada (CSS) y script de páginas web. Las herramientas de desarrollo ayudan al desarrollador web en diversas tareas, incluida la presentación de atributos individuales, la determinación de por qué se aplica una regla concreta de CSS a un elemento, la depuración del tiempo de ejecución del script y la vista previa de una página web que usa diferentes modos de compatibilidad de documentos .

Este documento describe el uso general de las herramientas de desarrollo así como las funciones y el uso de los cuatro modos principales de estas herramientas. Son los siguientes:

  1. El modo HTML, que permite ver el código subyacente tras las páginas, resumir y seleccionar elementos individuales, obtener una vista previa del modo en que ciertos valores de atributo influirán en la representación de la página y ver cómo se han aplicado las reglas de CSS a elementos individuales.
  2. El modo CSS, que permite comprender cómo afectan las hojas de estilo a la página web y es, por lo tanto, el más útil para los sitios que usan múltiples hojas de estilo.
  3. El modo Script, que permite depurar los script usados en la página web. Le permitirá recorrer el código, insertar puntos de interrupción e inspecciones, e inspeccionar las variables.
  4. El modo Generador de perfiles, que permite analizar el rendimiento del código subyacente de sus páginas y encontrar las funciones que no presentan un rendimiento óptimo.

Abrir y cerrar las herramientas de desarrollo

Puede abrir las herramientas de desarrollo con la tecla F12 o si hace clic en la opción Herramientas de desarrollo del menú Herramientas en la barra de herramientas de Windows Internet Explorer. La figura 1 muestra la opción de menú Herramientas de desarrollo resaltada en la esquina superior derecha de Windows Internet Explorer.

Figura 1

La ventana Herramientas de desarrollo aparece delante de la ventana de Windows Internet Explorer. También puede cerrar las herramientas de desarrollo con la tecla F12 o si hace clic en la opción Herramientas de desarrollo del menú Herramientas en la barra de herramientas de Windows Internet Explorer.

Importante: Los cambios realizados con las herramientas de desarrollo son temporales y no afectan al código fuente subyacente de su página web. Los cambios se revertirán al actualizar la página, al abrir una página nueva con el explorador o al cerrar la ventana. Los cambios de HTML y CSS pueden guardarse en un archivo de texto si se hace clic en el botón Disco (guardar) de la barra de herramientas de Herramientas de desarrollo.

Vista previa de diversos modos de compatibilidad

Windows Internet Explorer 8 presenta modos de compatibilidad de documentos que cambian la forma en que Windows Internet Explorer 8 representa la página web. Para obtener más información acerca de los diferentes modos de compatibilidad de documentos admitidos y el modo de implementarlos, consulte Etiquetas META y bloqueo en la compatibilidad con versiones futuras .

Las herramientas de desarrollo permiten ver la diferencia visual entre diferentes modos de compatibilidad. Para cambiar el modo de documento de una página web determinada, seleccione el modo deseado en el menú Modo de documento del menú Herramientas de desarrollo. Una marca de verificación indica el modo de compatibilidad seleccionado. Las opciones incluyen No estándar, Estándar de Internet Explorer 7 o Estándar de Internet Explorer 8. Para cambiar el modo de explorador, seleccione el modo deseado en el menú Modo de explorador del menú Herramientas de desarrollo. Una marca de verificación indica el modo seleccionado de compatibilidad. Las opciones incluyen Internet Explorer 7, Internet Explorer 8, o Vista de compatibilidad de Internet Explorer 8.

Destacar elementos

Para ayudarle a ver dónde aparecen ciertos elementos en una página web y los tipos de elementos que se utilizan para crear efectos concretos, puede decidir que aparezca un contorno alrededor de los elementos deseados. Si selecciona comandos del menú Esquema, Windows Internet Explorer marcará los elementos correspondientes en la página web. Por ejemplo, si selecciona el comando Elementos DIV del menú Esquema, aparecerán contornos alrededor de todos los elementos div de la página web actual.

Usar el modo HTML

El modo HTML permite ver las marcas subyacentes tras las páginas, seleccionar elementos individuales, mostrar sus atributos, obtener una vista previa del modo en que ciertos valores de atributo influirán en la representación de la página y ver cómo se han aplicado las reglas de CSS a elementos individuales. Para obtener acceso al modo HTML, haga clic en la ficha HTML de la ventana Herramientas de desarrollo. La figura 2 muestra la ficha HTML seleccionada en la esquina superior izquierda de la ventana Herramientas de desarrollo.

Figura 2

A la derecha del panel HTML aparecen herramientas diseñadas para ayudarlo a comprender la presentación de los elementos HTML de su página web.

  • La herramienta Estilo muestra cómo se han aplicado las reglas CSS al elemento seleccionado. Muestra los atributos afectados y dónde se especificaron los valores. Las marcas de verificación a la izquierda de cada regla permiten habilitar o deshabilitar la regla; puede usar las marcas de verificación para experimentar con el aspecto de los elementos de su página web.
  • La herramienta Rastrear estilos muestra los atributos CSS que se han aplicado a un elemento, el elemento donde se definió el atributo y (cuando corresponda) el nombre de la hoja de estilo que define el valor de atributo.
  • La herramienta Distribución muestra los atributos del modelo de cuadro del elemento, que por su parte muestra cómo se ven afectados los elementos en el centro del área de contenido. Para obtener más información acerca del modelo de cuadro, consulte la descripción del modelo de cuadro de W3C .
  • La herramienta Atributos muestra los atributos del elemento seleccionado en la ficha HTML. El nodo actual se muestra en la herramienta. Con esta herramienta pueden agregarse o suprimirse fácilmente atributos al nodo seleccionado y más tarde actualizarlos en la ventana de explorador.

La figura 3 muestra los botones Estilo, Rastrear estilos, Distribución y Atributos, situados a la derecha del panel HTML.

Figura 3

Seleccionar elementos y cambiar valores de atributo

Puede seleccionar un elemento resaltándolo en el panel HTML o usando la herramienta Seleccionar elemento con un clic de la barra de herramientas de Herramientas de desarrollo. La figura 4 muestra el botón Seleccionar elemento con un clic resaltado en la esquina superior izquierda de la ventana Herramientas de desarrollo. La herramienta Seleccionar elemento con un clic permite seleccionar cualquier elemento en la página del explorador con un solo clic en el elemento. El elemento en cuestión se selecciona en la ventana Herramientas de desarrollo.

Figura 4

Tras seleccionar un elemento de la página web, puede ver sus valores de atributo actuales y experimentar con valores nuevos con el modo HTML para cambiarlos. Para cambiar un valor de atributo, haga clic en el valor de atributo que desea cambiar en la ficha HTML o haga doble clic en el valor que desea cambiar en la herramienta Atributos. A continuación, escriba el valor nuevo y presione ENTRAR. Al hacerlo, Windows Internet Explorer mostrará los efectos del cambio. Puede descartar valores parciales si presiona la tecla ESC antes de presionar ENTRAR. Para restaurar el aspecto original de la página, actualícela.

Usar las herramientas Estilo y Rastrear estilos

La herramienta Estilo muestra todas las reglas de estilo válidas para el elemento seleccionado en cascada, con los estilos desechados tachados. Use la casilla de verificación junto a cada regla para activar y desactivar esa regla y ver inmediatamente el efecto en Windows Internet Explorer. La herramienta Rastrear estilos muestra el cómputo de una propiedad específica de estilo. Los estilos se agrupan por propiedad en vez de por regla. De esta forma, el valor calculado de una propiedad está inmediatamente visible. Ampliar la propiedad muestra todas las reglas que configuran esa propiedad, de nuevo en cascada, para mostrar cómo ha determinado Windows Internet Explorer el resultado final.

Los valores de estilo de ambas herramientas pueden cambiarse si se hace clic en el valor en pantalla y se escribe un valor nuevo. El valor nuevo se confirma al quitar el enfoque del valor editable, o al presionar ESC para anular el cambio.

La figura 5 muestrala herramienta Estilo con una regla desactivada.  

Figura 5

Descripción de las herramientas de distribución

La herramienta Distribución muestra los siguientes valores:

  • Los valores de Desplazamiento describen la distancia entre el objeto seleccionado y el objeto superior mediante las propiedades offsetLeft y offsetTop .
  • Los valores Margen, Borde y Relleno muestran los valores correspondientes especificados en la página web. Si no se especifican valores en la página web, la herramienta Distribución muestra los valores predeterminados usados por Windows Internet Explorer.
  • Los valores más internos son la altura del elemento y su anchura, definidas por offsetHeight y offsetWidth .

Se muestra el valor y las unidades de medida de cada atributo de modelo de cuadro. De forma predeterminada, la herramienta Distribución supone que los atributos del modelo de cuadro se especifican en píxeles; si en la herramienta Distribución no se muestra una unidad de medida, el valor representa píxeles. La figura 6 muestra la herramienta Distribución con un elemento seleccionado en el panel HTML de la izquierda.

Figura 6

Mostrar los atributos que usan la herramienta Atributo

Las herramientas de desarrollo de Windows Internet Explorer 8 también incluyen una herramienta para ver los atributos de un elemento. Para usar la herramienta de atributo haga clic en el botón superior derecho Atributo. Los elementos actuales HTML del sitio web se muestran en el panel izquierdo, en la ficha HTML. Al seleccionar un elemento aparece una lista de sus atributos en el panel derecho. Si activa la casilla Mostrar propiedades de sólo lectura, la herramienta Atributo mostrará una lista con todas las propiedades del elemento seleccionado. La figura 7 muestra la herramienta Atributo seleccionada con una lista de atributos para el elemento HTML.

Figura 7

Puede agregar o eliminar atributos si hace clic en los botones o de la parte superior de la ventana de la herramienta Atributos. Un cuadro combinado permite seleccionar el atributo que se desea agregar.

Usar el modo CSS

El modo CSS le permite ver cómo afectan las hojas de estilo a la página web y es, por lo tanto, el más útil para los sitios que usan múltiples hojas de estilo. Para obtener acceso al modo CSS haga clic en la ficha CSS de la ventana Herramientas de desarrollo. La figura 8 muestra la ficha CSS seleccionada en la esquina superior izquierda de la ventana Herramientas de desarrollo.

Figura 8

La barra de herramientas del modo CSS incluye un cuadro combinado que permite seleccionar una hoja de estilo cargada por la página web y mostrar las propiedades. Las reglas de la hoja de estilo aparecen debajo del botón de hoja de estilo y el usuario puede ampliar o contraer los atributos del árbol. Se pueden habilitar o deshabilitar reglas individuales si se activa la casilla situada junto a cada elemento.

Los valores de cada propiedad pueden cambiarse igual que en el modo HTML: se hace clic en el valor, se escribe un valor nuevo y se quita el enfoque del campo.

Usar del modo Script

El modo Script permite depurar scripts de la página web, con lo que se puede analizar el código, insertar puntos de interrupción e inspeccionar variables. Al ofrecer un depurador ligero integrado que permite que establecer puntos de interrupción y analizar el script del cliente, las Herramientas de desarrollo permiten depurar los scripts sin salir de Windows Internet Explorer. Para obtener acceso al modo Script, haga clic en la ficha Script de la ventana Herramientas de desarrollo. La figura 9 muestra la ficha Script seleccionada en la esquina superior izquierda de la ventana Herramientas de desarrollo.

Figura 9

Iniciar y detener la depuración

Para iniciar la depuración, haga clic en el botón Iniciar depuración. Durante la depuración, la lista desplegable ofrece todos los script del sitio, incluidos archivos independientes y bloques de scripts en línea. Para detener la depuración, haga clic en el botón Detener depuración. lista de script

Configurar puntos de interrupción

Durante la depuración de un programa, los errores de tiempo de ejecución provocan que el depurador se detenga automáticamente donde se encuentra el error. Windows Internet Explorer se detiene y resalta la línea que ha provocado el error en la ventana Vista de código fuente.

Nota: Mientras Windows Internet Explorer espere la entrada del depurador de script, no responderá a ninguna interacción por parte del usuario.

El usuario también puede detener la ejecución mediante un punto de interrupción. Un punto de interrupción provoca la detención de la ejecución del script inmediatamente antes de su aparición. El depurador resalta la línea siguiente que se ejecutará en la Vista de código fuente del script. Los puntos de interrupción también pueden establecerse después de iniciar la depuración. Para establecer un punto de interrupción haga clic junto a un número de línea, utilice el botón secundario para obtener acceso al menú contextual o presione F9.

La ficha Puntos de interrupción del depurador contiene una lista de todos puntos de interrupción disponibles. La figura 10 muestra la ficha Puntos de interrupción seleccionada a la derecha del panel de la herramienta de depuración.

Figura 10

Aquí puede encontrar la ubicación de todos puntos de interrupción junto con el nombre de archivo y el número de línea. Un doble clic en un punto de interrupción de esta lista le lleva a la ubicación del punto de interrupción en el código fuente. Puede desactivar un punto de interrupción sin quitarlo del código fuente si desactiva la casilla situada junto al punto de interrupción. Para quitarun punto de interrupción, haga clic con el botón secundario y seleccione Eliminar.  

Nota: Aunque navegue fuera del sitio actual, Windows Internet Explorer mantendrá la información del punto de interrupción hasta que cierre las herramientas de desarrollo.

Inspeccionar variables

Puede inspeccionar las variables del script siempre que la ejecución se detenga en un punto de interrupción. La herramienta Variables locales del depurador muestra el nombre, el valor y el tipo de todas variables disponibles en el ámbito de ejecución actual. No se definen las variables fuera del ámbito de ejecución. El ámbito de ejecución es el intervalo en el que se puede hacer referencia a una variable. La figura 11 muestra la herramienta Variables locales seleccionada durante la depuración.

Figura 11

Puede observar las variables desde ámbitos diferentes si las agrega a la herramienta Inspección. Para establecer una variable de inspección seleccione el texto fuente, haga clic con el botón secundario del ratón y seleccione Agregar inspección. De esta forma agregará una inspección para el identificador en el que se encuentra el cursor. La figura 12 muestra la herramienta Inspección seleccionada durante la inspección de una variable en la depuración.

Figura 12

También puede agregar una variable de inspección si hace clic en el texto "Haga clic para agregar…" de la ventana Inspección y especifique el nombre de la variable.

Usar el modo Generador de perfiles

Puede usar el modo Generador de perfiles para investigar el tiempo de ejecución de su sitio web si utiliza la información recopilada por el Generador de perfiles mientras Windows Internet Explorer representa el sitio web. Esta información es útil para definir optimizaciones si parte del código provoca atascos o un tiempo de ejecución excesivamente prolongado.

Para usar el modo Generador de perfiles, seleccione la ficha Generador de perfiles de la esquina superior izquierda de la ventana. Para iniciar la generación de perfiles, haga clic en el botón Iniciar la creación de perfiles de la parte superior de la ventana. El Generador de perfiles empieza a analizar los sitios web representados en Windows Internet Explorer. Para generar el perfil de un sitio web, desplácese a la dirección URL y el modo Generador de perfiles recopilará datos durante la representación de la página. Haga clic en el botón Detener la creación de perfiles para ver el informe generado por el Generador de perfiles. La figura 13 muestra el modo Generador de perfiles con un informe cargado.

Figura 13

El informe muestra las funciones que Windows Internet Explorer utilizó para representar la URL. El nombre de la función, el número de veces que se ejecutó la función, el tiempo transcurrido o inclusivo y el tiempo exclusivo. El tiempo transcurrido se refiere al tiempo dedicado a una función incluido el tiempo dedicado a las funciones ejecutadas desde esa función. El tiempo exclusivo se refiere al tiempo dedicado a una función excluido el tiempo dedicado a las funciones ejecutadas desde esa función.

Con la información recopilada por el Generador de perfiles, puede encontrar cualquier cuello de botella que pueda haber en el código del sitio web. La búsqueda y reestructuración del código o los algoritmos que no se ejecutan eficazmente le ayudarán a reducir el tiempo que Windows Internet Explorer necesita para representar sus páginas web.

¿Te ha resultado útil?
(Caracteres restantes: 1500)
Gracias por sus comentarios
Mostrar:
© 2014 Microsoft. Reservados todos los derechos.