Depurar estilos de CSS mediante el Explorador DOM

Al depurar aplicaciones de la Tienda Windows y la Tienda de Windows Phone, puede ver y cambiar las reglas de CSS de los elementos DOM seleccionados y sus elementos secundarios.

Las pestañas Estilos y Calculado del Explorador DOM muestran las reglas de CSS que se aplican a un elemento seleccionado. Las reglas se muestran en su orden de especificidad de acuerdo con las reglas de prioridad de CSS. Las reglas al principio de un selector o estilo de una pestaña (las reglas más específicas) son las últimas que se aplican al elemento seleccionado, y las reglas en la parte inferior de un selector o estilo son las primeras que se aplican. Cuando se aplican las reglas, invalidan las que se han aplicado previamente.

Las pestañas Estilos, Calculado y Cambios proporcionan vistas diferentes de la información de estilo.

• Use la pestaña Estilos para ver las reglas organizadas por nombre de selector de CSS, como html, body. También puedes usar esta pestaña para habilitar o deshabilitar estilos específicos, editar manualmente los valores y ver los resultados inmediatos de estos cambios.

• Usa la pestaña Calculado para ver los valores calculados de un estilo. Por ejemplo, si estableces el tamaño en 1em, el valor calculado por Internet Explorer puede ser 16px. Los estilos de esta pestaña están organizados por nombre de estilo, como height. También puedes usar esta pestaña para habilitar o deshabilitar estilos específicos, editar manualmente los valores y ver los resultados inmediatos de estos cambios.

  Nota
  En Visual Studio 2013 Update 2, la información de la pestaña Seguimiento se ha combinado con la pestaña Calculado y se ha eliminado la primera.

• Use la pestaña Cambios para identificar los estilos de CSS que has cambiado durante una sesión de depuración y para realizar el seguimiento.

Sugerencia

Los cambios realizados en los estilos de las pestañas Estilos y Calculado no son permanentes.Se pierden cuando se detiene la depuración.Para modificar el código fuente y recargar las páginas sin detener y reiniciar el depurador, actualiza la aplicación con el botón (Actualizar aplicación de Windows) en la barra de herramientas Depurar.Para obtener más información, consulta Actualizar una aplicación (JavaScript).

Ejemplo de corrección de una regla de CSS

En este ejemplo se muestra cómo inspeccionar las reglas de CSS y depurar un problema de estilo. En este ejemplo, digamos que quiere cambiar el color de una fuente utilizada para mostrar títulos de grupo en la plantilla Aplicación dividida de la Tienda Windows.

Nota
En este ejemplo se muestra una aplicación de la Tienda Windows, pero todas las características del Explorador DOM mostradas también se aplican a las aplicaciones de la Tienda de Windows Phone.

Para ver y cambiar las reglas de CSS

1. En Visual Studio, cree una aplicación de Tienda Windows con JavaScript y HTML en la plantilla de proyecto Aplicación dividida.

2. En el Explorador de soluciones, abre items.css. (Puedes buscar items.css en la carpeta de páginas).

3. Reemplaza el código de CSS siguiente:

       .itemspage .itemslist .item {
           -ms-grid-columns: 1fr;
           -ms-grid-rows: 1fr 90px;
           display: -ms-grid;
           height: 250px;
           width: 250px;
       }
   

   por este:

       .itemspage .itemslist .item {
           -ms-grid-columns: 1fr;
           -ms-grid-rows: 1fr 90px;
           display: -ms-grid;
           height: 250px;
           width: 250px;
           color: #ff6a00;
       }
   

   De este modo se agrega un estilo que especifica el color #ff6a00 (naranja) para cada elemento de la lista. El selector de CSS, .itemspage .itemslist .item, indica un conjunto de nombres de clase para elementos DIV en items.html, que aparecen como elementos anidados en el DOM activo. El elemento DIV de item especifica los elementos de lista.

4. Selecciona Simulador en la lista desplegable de la barra de herramientas Depurar (Equipo local es el valor predeterminado).

   

5. Presiona F5 para ejecutar la aplicación en modo de depuración.

   Cuando la aplicación finalice la carga, mira los encabezados de los elementos de lista, como Título de grupo: 1. El color no ha cambiado, por lo que el intento de aplicar un color naranja a los títulos no ha funcionado. Averiguaremos qué ha salido mal y lo corregiremos utilizando las pestañas CSS en el Explorador DOM.

   Sugerencia
   Cuando la aplicación aparezca en el simulador, colócalo junto a la ventana de Visual Studio para que puedas ver inmediatamente los resultados de tus selecciones y los cambios realizados en los estilos CSS.

6. Cambia a Visual Studio y haz clic en Seleccionar elemento en el Explorador DOM (o presiona Ctrl+B). El modo de selección se modifica para que puedas seleccionar un elemento haciendo clic en él. Además, la aplicación se pone en primer plano. El modo se revierte al original al hacer clic. Aquí está el botón Seleccionar elemento.

   Sugerencia
   También puedes seleccionar elementos HTML directamente en el Explorador DOM.Para obtener más información sobre la selección de elementos, consulta Inicio rápido: Depurar HTML y CSS.

7. En el simulador, mantén el mouse sobre el título del primer elemento de la lista, Título de grupo: 1, en el panel izquierdo de la página principal. Se resalta el título, como se muestra aquí:

   

   Nota
   El emulador de Windows Phone solo admite en parte resaltar elementos al colocarse sobre ellos.

8. Haz clic en el título con contorno. El Explorador DOM selecciona automáticamente el elemento HTML correspondiente, que es parecido a este.

   <h4 class="item-title">Group Title: 1</h4>
   

   Cuando selecciones el elemento H4 en el Explorador DOM, las pestañas del Explorador de DOM pestañas mostrarán ahora las reglas asociadas al elemento H4. La pestaña Calculado se muestra aquí, con la propiedad color abierta:

   

   Esta vista proporciona información útil sobre las reglas asociadas al estilo de color, como la siguiente:

   • El selector de CSS que hemos modificado en items.css, .itemspage .itemslist .item, no se usa en el cálculo final del estilo (aparece en texto tachado). Tampoco se usan otras apariciones del estilo de color.

     Sugerencia
     En el caso de nombres de selector más largos, el nombre completo aparece en una información sobre herramientas.

   • El valor calculado final de CSS, rgba(255, 255, 255, 0.87), se establece específicamente para el selector de CSS siguiente: .itemspage .itemslist .item .item-overlay .item-title, que también se define en items.css.

     Sugerencia
     Ahora que sabemos dónde se establece el color de título, también sabemos dónde podemos cambiarlo.Sin embargo, también podemos probar los cambios en el Explorador de DOM sin actualizar la aplicación, como se muestra en los pasos restantes.

9. Desactiva la casilla de la primera aparición de estilo de color, que es la que corresponde al selector .itemspage .itemslist .item .item-overlay .item-title. Ahora, en el simulador, verás que el color de los títulos de elemento cambian a naranja, tal como queríamos, y que el selector que modificamos en CSS, .itemspage .itemslist .item, ya no se reemplaza (es decir, ya no tiene el tachado de texto aplicado). A continuación se muestra la pestaña Calculado después de desactivar la casilla.

   

10. Seleccione la pestaña Cambios.

    Use la pestaña Cambios para identificar los cambios de estilo realizados durante una sesión de depuración y para realizar el seguimiento. En la siguiente ilustración se muestra el selector .itemspage .itemslist .item .item-overlay .item-title en la pestaña Cambios, que ha sido reemplazado.

    

11. También puedes editar manualmente los valores de estilo de CSS y ver el resultado inmediato mediante la pestaña Estilos.

12. Selecciona la pestaña Estilos.

13. Abre el selector de estilo .itemspage .itemslist .item .item-overlay .item-title.

14. Selecciona la primera aparición del estilo de color y haz doble clic en el valor de propiedad rgb(255, 255, 255, 0.87).

15. Usa el teclado para modificar este valor. Cámbialo a rgb(255, 255, 0, 0.87) y presiona Intro. Los colores de todos los títulos de elemento del simulador cambiarán a amarillo.

16. Para realizar cambios en el archivo CSS de origen, haz clic en el vínculo items.css en la pestaña Estilos. De este modo se abre items.css, donde puedes cambiar el valor del estilo de color en el código de la aplicación. Para actualizar la aplicación sin detener y reiniciar el depurador, haz clic en el botón (Actualizar aplicación de Windows) en la barra de herramientas Depurar.

Vea también

Tareas

Ver agentes de escucha de eventos DOM

Conceptos

Inicio rápido: Depurar HTML y CSS

Depurar el diseño mediante el Explorador DOM

Otros recursos

Compatibilidad de productos y accesibilidad