Ver y editar la distribución
La pestaña Diseño del Explorador DOM muestra el modelo de cuadros de CSS del elemento seleccionado. Puedes utilizar esta representación visual del modelo de cuadros para identificar rápidamente los valores de propiedad. También puedes cambiar cualquier valor en la pestaña Diseño. Los cambios que hagas no serán permanentes. Se pierden cuando se detiene la depuración.
Sugerencia
Si no deseas detener el depurador, puedes hacer los cambios en el código fuente y, después, actualizar la aplicación mediante el botón Actualizar aplicación de Windows de la barra de herramientas Depurar.
Si quieres usar el Explorador DOM para modificar aspectos de la distribución que no se muestran en el modelo de cuadros, consulta Inicio rápido: depurar aplicaciones (JavaScript) y Inspeccionar reglas de CSS.
Ver y editar la distribución
En este ejemplo, seleccionaremos un elemento de lista en la plantilla Aplicación dividida, interpretaremos los valores del modelo de cuadros que aparecen en la pestaña Diseño y, luego, cambiaremos uno de los valores de propiedad.
Para ver y editar la distribución
En Visual Studio, crea una nueva aplicación Aplicación de la Tienda Windows compilada para Windows mediante JavaScript. que use la plantilla de proyecto Aplicación dividida.
Selecciona Simulador en la lista desplegable situada junto al botón Iniciar depuración en la barra de herramientas Depurar.
.png "Ejecución en el simulador")
Presiona F5 para ejecutar la aplicación en modo de depuración.
Sugerencia
Cuando la aplicación aparezca en el simulador, colócalo en paralelo junto a Visual Studio. De esta forma podrás ver de inmediato los resultados de las opciones seleccionadas y de los cambios que hagas en los estilos de CSS.
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.
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 aplicaciones (JavaScript).
En el simulador, mantén el mouse sobre los grupos de la página principal, de forma que aparezca un contorno rodeando la imagen y el título del grupo. Para esta demo, mantén el mouse sobre el tercer grupo. La imagen y el título del grupo con contorno se muestran a continuación.
.png "Selección de un elemento DOM")
Haz clic en el grupo y la imagen resaltados para seleccionarlos. El Explorador DOM selecciona automáticamente el elemento IMG correspondiente. El elemento seleccionado en el Explorador DOM tiene este aspecto:
<img class="item-image" id="_win_bind[idNumber]" alt="Group Title: 3" src="data:image/png;base64, ..." data-win-bind= "src: backgroundImage; alt: title"></img>Haz clic en la pestaña Diseño. Esta pestaña muestra las dimensiones del elemento seleccionado, como se muestra aquí.
.png "Pestaña Diseño del Explorador DOM")
Esta vista proporciona información útil sobre el elemento:
Las dimensiones del elemento en el cuadro más interno, que suelen corresponder a las propiedades de alto y ancho de CSS.
Los cuadros Relleno, Borde y Margen muestran valores de 0 píxeles, lo que sugiere que es probable que las propiedades CSS correspondientes no se hayan establecido. Por ejemplo, seguramente no se habrán establecido las propiedades de margen izquierdo, superior, derecho e inferior de CSS.
Sugerencia
Para ver cómo se aplican las propiedades, haz clic en la pestaña Estilos y mira por debajo de la regla <div> insertada debajo de los estilos heredados. Puedes ver que las propiedades de alto y ancho se establecen aquí.
En la pestaña Diseño, haz doble clic en 0px en la parte superior del cuadro Margen.
Presiona la tecla Flecha arriba para aumentar el valor del margen superior a 10 px y presiona Intro. El margen actualizado aparece en el simulador y también en la pestaña Estilos debajo de la regla insertada. Si lo prefieres, puedes escribir nuevos valores, en vez de usar las teclas Flecha arriba o Flecha abajo.