Depurar HTML y CSS con las Herramientas de desarrollo

  • Artículo

Novedad para Windows Internet Explorer 8

Internet Explorer 8 proporciona las Herramientas de desarrollo mejoradas para ayudarle a investigar y resolver problemas relacionados con HTML, las hojas de estilos en cascada (CSS) y Microsoft JScript. Este artículo se centra en las herramientas de HTML y CSS de las Herramientas de desarrollo.

  • Introducción
  • Abrir y cerrar las Herramientas de desarrollo
  • Seleccionar objetos en una página web
  • Inspeccionar elementos HTML
    • Utilizar las herramientas Estilo y Rastrear estilos
    • Utilizar la herramienta Distribución
    • Utilizar la herramienta Atributos
  • Inspeccionar las reglas de CSS
  • Guardar los cambios
  • Resumen
  • Temas relacionados

Introducción

La característica Herramientas de desarrollo de Internet Explorer 8 permite revisar la representación interna de una página web en el explorador. Puede utilizar las Herramientas de desarrollo para diversas tareas, que incluyen (pero sin limitarse a ellas) las siguientes: ver atributos individuales, determinar por qué se aplica una regla de CSS concreta a un elemento individual; y obtener la vista previa de distintos modos de compatibilidad del documento. Al exponer cómo el explorador interpreta una página web, las Herramientas de desarrollo proporcionan muchas oportunidades para investigar y resolver los problemas, de manera más rápida de lo que era posible con las versiones anteriores de Internet Explorer.

Este artículo se centra en las Herramientas de desarrollo de HTML y CSS. Para obtener información sobre cómo utilizar las Herramientas de desarrollo para depurar en JScript, vea Depurar script con las Herramientas de desarrollo.

Abrir y cerrar las Herramientas de desarrollo

Para abrir las Herramientas de desarrollo, presione F12; como alternativa, haga clic en Herramientas de desarrollo en el menú Herramientas de la barra de herramientas de Internet Explorer 8. En la imagen siguiente se muestra la ventana Herramientas de desarrollo.

Esta ilustración muestra las ubicaciones del botón Herramientas de desarrollo de la barra de herramientas y del botón Cerrar en Internet Explorer 8.
Ilustración 1. Comando Herramientas de desarrollo y botón Cerrar.

Una vez iniciadas, las Herramientas de desarrollo pueden estar en su propia ventana o anclarse a la instancia del explorador desde la que se han abierto. Cada pestaña de Internet Explorer tiene su propia instancia de las Herramientas de desarrollo. Cuando se trabaja con varias instancias de las Herramientas de desarrollo, se utiliza la característica Anclar (cuyo botón aparece en la esquina superior derecha de la ventana Herramientas de desarrollo) para adjuntar cada una de ellas a su ventana correspondiente. Cuando está anclada, el tamaño de la ventana Herramientas de desarrollo se puede ajustar para mostrar un área visible mayor.

Las Herramientas de desarrollo se pueden cerrar de varias maneras: presionando F12; haciendo clic en el botón Herramientas de desarrollo del menú Herramientas; haciendo clic en el botón Cerrar de la esquina superior derecha de la ventana Herramientas de desarrollo; o cerrando la ventana o pestaña de Internet Explorer desde la que se abrieron.

Seleccionar objetos en una página web

Muchas herramientas de desarrollo de CSS y HTML funcionan con elementos individuales de una página web. Para seleccionar un elemento, resáltelo en la pestaña de HTML o haga clic en el botón Seleccionar elemento con un clic del el menú Buscar de las Herramientas de desarrollo. Si hace clic en este botón, podrá utilizar el mouse para seleccionar un elemento de la página web. Mueva el cursor sobre un elemento; cuando el borde del elemento se resalte con un cuadro azul, haga clic para seleccionarlo. En la ilustración siguiente se muestran los resultados de seleccionar un elemento.

En esta ilustración se muestran el botón Seleccionar elemento con un clic y los resultados de seleccionar un elemento.
Ilustración 3. Botón Seleccionar elemento con un clic y resultados de seleccionar un elemento.

Cuando se resalta un elemento HTML y se hace clic en él, los atributos de ese elemento seleccionado se muestran en la pestaña HTML, junto con su ubicación en la representación interna utilizada por Internet Explorer 8 para mostrar la página web. Puede ver los valores actuales de los atributos del elemento y experimentar con nuevos valores cambiándolos en la pestaña HTML. Para cambiar el valor de un atributo, haga clic en él, especifique un nuevo valor y, a continuación, presione ENTRAR; Internet Explorer 8 mostrará los efectos del cambio. Para descartar los valores parciales, presione ESC. Para restaurar el aspecto original de la página web, actualícela.

Nota: los cambios realizados mediante la pestaña HTML no afectan al código fuente subyacente de una página web; permanecen en vigor hasta que se actualiza la página web o hasta que el explorador navega a otra página web o se cierra. Vea la sección bajo Guardar los cambios para obtener información acerca de cómo guardar los cambios.

Inspeccionar elementos HTML

La pestaña HTML ayuda a inspeccionar la presentación de los elementos HTML en una página web. La pestaña HTML incluye dos recuadros de visualización. El recuadro de la izquierda es el de contenido principal, y el de la derecha, el de propiedades.

  • El recuadro de contenido principal es donde se presenta el modelo DOM (Document Object Model), en una estructura de árbol con nodos que se puede expandir o contraer. Este recuadro se utiliza para investigar e inspeccionar el código fuente HTML. Los atributos y valores de los elementos HTML se pueden editar haciendo clic en ellos. Los nodos de texto también se pueden editar de esta forma. Sin embargo, si desea editar toda la página web en formato de editor, puede hacer clic en el botón Editar. En el modo de edición, se activa el botón Ajuste de línea. También observará que es posible que el contenido de esta página no sea exactamente igual que el código fuente original, puesto que esta es la representación interna de Internet Explorer para esta página web. Si hay llamadas de JScript que escriben contenido en la página, aparecerán en este modo de edición. Cuando haya terminado de editar, haga clic de nuevo en el botón Editar y los cambios surtirán efecto de inmediato.
  • El recuadro de propiedades ofrece una barra de menús de selección de tipos de propiedades en la parte superior. Este selector incluye varias herramientas que le ayudarán a inspeccionar más de cerca el código fuente. Por ejemplo, mientras el recuadro de contenido principal se encuentra en modo DOM, puede hacer clic para seleccionar cualquier elemento HTML que desee inspeccionar. Después de hacer clic en él, las propiedades del elemento aparecerán en el recuadro de propiedades. La información que se presenta y cómo aparece depende del tipo de propiedad que esté seleccionado. Por ejemplo, si el tipo actual es Estilo, entonces aparecerá una lista de reglas CSS aplicadas a este elemento. Los demás tipos de propiedades son Rastrear estilos, Distribución y Atributos.

Utilizar las herramientas Estilo y Rastrear estilos

Cuando las herramientas Estilo y Rastrear estilos encuentran varias reglas de CSS que se aplican al elemento seleccionado, las reglas se muestran según su especificidad conforme a la especificación de CSS. La regla que aparece en la parte superior de la lista es la primera que se aplica al elemento seleccionado, mientras que la regla de la parte inferior es la que define actualmente las propiedades de estilo de un elemento seleccionado. Los valores de estas reglas se pueden editar: haga clic en un valor, escriba un nuevo valor y presione ENTRAR; los cambios aparecen en la página web de inmediato. La información de los dos tipos de propiedad es la misma. Sin embargo, en el tipo de propiedad Rastrear estilos, la misma información se agrupa por propiedades con las reglas mostradas debajo de ellas. Las propiedades se muestran por orden alfabético y las reglas se vuelven a ordenar según su especificidad.

Utilizar la herramienta Distribución

La herramienta Distribución ofrece información del modelo de cuadro de la posición relativa de un elemento en una página web. La información disponible incluye:

  • Desplazamiento: Estos valores describen la distancia entre el objeto seleccionado y su elemento primario, representado por las propiedades offsetLeft y offsetTop.
  • Margen, borde y relleno: estos tres valores muestran los valores especificados en el código fuente de una página web. Si no se especifica ningún valor, la herramienta mostrará los valores predeterminados utilizados por Internet Explorer.
  • Ancho y alto: los valores más internos del elemento son su ancho y su alto, definidos por las propiedades offsetHeight y offsetWidth.

Para cada atributo de modelo de cuadro, se muestran el valor y la unidad de medida. Haga clic en un valor para editarlo; a continuación, presione ENTRAR para confirmar el nuevo valor o bien ESC para cancelarlo. Cuando se presiona ENTRAR, el nuevo valor surte efecto de inmediato. De forma predeterminada (si no se muestra la unidad de medida) la herramienta Distribución administra los valores del modelo de cuadro como píxeles.

Utilizar la herramienta Atributos

La herramienta Atributos presenta los atributos de un elemento de HTML en una lista de pares nombre/valor. Para inspeccionar la información, así como el nombre y el valor de un atributo, haga doble clic en él. La información del nombre y el valor del atributo también se pueden editar haciendo clic en él en el recuadro de contenido principal. El valor de un atributo puede estar vacío o ser NULL, pero el nombre de un atributo no puede estar vacío. Los cambios de esta información se reflejan inmediatamente en la página web. La herramienta Atributos también permite agregar atributos adicionales al elemento o quitar atributos del elemento haciendo clic en el botón correspondiente, en la parte superior del recuadro.

Inspeccionar las reglas de CSS

La pestaña de CSS permite entender la interacción entre las hojas de estilos. Resulta muy útil para los sitios que utilizan varias hojas de estilos. Para intercambiar entre las hojas de estilos, utilice el selector de hoja de estilos. Cuando se selecciona una hoja de estilos, las reglas y sus propiedades de estilo asociadas aparecen en el recuadro de contenido principal. Esta información se agrupa por reglas de estilo. De forma predeterminada, este botón muestra la primera hoja de estilos a la que se hace referencia en la página web. Como se muestra en la ilustración 4, las reglas de las hojas de estilos aparecen bajo el botón del selector de hoja de estilos.

La herramienta CSS muestra las reglas definidas en todas las hojas de estilos utilizadas en una página web.
Ilustración 4. La herramienta CSS muestra las reglas definidas en todas las hojas de estilos utilizadas en una página web.

Para expandir o contraer las propiedades de una regla, haga clic en el cuadro marcado con el signo + o -. Todos los elementos de esta vista de hoja de estilos se pueden editar. Los cambios surten efecto de inmediato. Una regla de estilo se puede activar o desactivar haciendo clic en la casilla situada junto al nombre del estilo. Como alternativa, se puede optar por activar o desactivar una sola propiedad o algunas de ellas, a fin de ver cómo afectan a la regla.

Guardar los cambios

Ahora que ha realizado los cambios en los archivos de páginas HTML y CSS, haga clic en el botón Guardar para guardar los cambios. El cuadro de diálogo Guardar como ofrece la posibilidad de guardar el archivo como .txt, en lugar de .html o .css. De este modo se evita la invalidación involuntaria de los archivos de código fuente originales. Además, se debe a que todos los cambios realizados en las Herramientas de desarrollo son la representación interna de Internet Explorer de la página web, no lo que hay en el código fuente original. Por esta razón, al actualizar la página web actual, navegar fuera de ella o ejecutar Deshacer todo se recupera el contenido de la página web original.

Nota: cuando trabaje en las Herramientas de desarrollo, recuerde que no solo las áreas modificadas de una página web son distintas del código fuente, sino que también otras partes de ella pueden variar, porque las Herramientas de desarrollo muestran la página web tal y como existe en Internet Explorer, y no en el código fuente. Para evitar que se sobrescriba el código fuente de forma involuntaria, las Herramientas de desarrollo guardan la salida como texto y agregan un comentario inicial al archivo.

Resumen

Las Herramientas de desarrollo de Internet Explorer 8 ayudan solucionar y resolver los problemas de las páginas web. Las herramientas de HTML permiten centrarse en los atributos y las propiedades concretos de los elementos HTML individuales de una página web. Las herramientas de CSS proporcionan una visión más amplia y muestran cómo Internet Explorer 8 interpreta las diversas reglas y propiedades de las hojas de estilos. Dado que los cambios realizados en el código fuente en las Herramientas de desarrollo afectan únicamente a la representación interna de Internet Explorer del sitio web, y no al código fuente original directamente, está disponible el botón Guardar que permite guardar los cambios y utilizarlos para actualizar el código fuente. De este modo se ahorra tiempo y se mejora la eficacia del mantenimiento de las páginas web.

Temas relacionados