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:
-
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.
-
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.
-
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.
-
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.
.jpg)
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.
.jpg)
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.
.jpg)
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.
.jpg)
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.
.jpg)
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.
.jpg)
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.
.jpg)
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.
.jpg)
.jpg)
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.
.jpg)
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.
.jpg)
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.
.jpg)
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.
.jpg)
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.
.jpg)
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.
.jpg)
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.