Отладка макета с использованием проводника DOM

Статья
06/05/2015

Применимо к Windows и к Windows Phone

На вкладке Макет проводника DOM отображается рамочная модель CSS для выбранного элемента в приложении Магазина Windows Phone или Магазин Windows. С помощью визуального представления рамочной модели можно находить и изменять значения, связанные с макетом и влияющие на внешний вид элементов.

Совет

Изменения, вносимые на вкладке Макет, не являются постоянными.Вы можете внести постоянные изменения в исходный код, а затем обновить приложение, нажав кнопку Обновить приложение Windows на панели инструментов "Отладка".Это позволит избежать перезапуска отладчика.

Сведения о том, как с помощью проводника DOM изменять аспекты макета, не отображаемые в рамочной модели, см. в разделах Краткое руководство по отладке HTML и CSS и Отладка стилей CSS с использованием проводника DOM.

Пример устранения проблемы с макетом

В этом примере показано, как выбрать элемент списка в шаблоне Hub/Pivot, интерпретировать значения рамочной модели на вкладке Макет, а затем изменить одно из значений свойств, чтобы устранить проблему с макетом.

Устранение проблемы с макетом

Создайте в Visual Studio новое приложение Магазина, использующее шаблон проекта Hub/Pivot.
В общей папке pages\hub откройте файл hub.css.

Замените следующий код CSS:

        .hubpage .hub .section4 .sub-image-row img {
            height: 95px;
            width: 130px;
        }

следующим кодом CSS:

        .hubpage .hub .section4 .sub-image-row img {
            height: 95px;
            width: 130px;
            margin-left: 5em;
        }

В обозревателе решений выберите проект appName.WindowsPhone или appName.Windows и в контекстном меню выберите команду Назначить запускаемым проектом.
В зависимости от запускаемого проекта выберите Emulator 8.1 WVGA 512MB (RU) или Имитатор в раскрывающемся списке на панели инструментов "Отладка" (значение по умолчанию — Локальный компьютер).
Нажмите клавишу F5, чтобы запустить приложение в режиме отладки.
Откройте раздел 4 с помощью прокрутки или проведения.

Совет

Расположите эмулятор телефона или имитатор рядом с окном Visual Studio, чтобы можно было сразу же видеть результаты выбора и внесения изменений в стили CSS.

После загрузки раздела 4 вы увидите, что нижние изображения отображаются неправильно. Изображение каждого элемента разрезано напополам, причем левая половина не отображается.
Переключитесь на Visual Studio и щелкните Выбор элемента в проводнике DOM (или нажмите CTRL+B). При этом изменится режим выделения, то есть можно будет выделить элемент щелчком, а приложение отображается на переднем плане. Вернуть предыдущий режим можно одним щелчком.

Совет

Кроме того, выбрать HTML-элементы можно непосредственно в проводнике DOM с помощью клавиш со стрелками или иных методов.Дополнительные сведения о выборе элементов см. в разделе Краткое руководство по отладке HTML и CSS.
В эмуляторе телефона или имитаторе выберите серую правую половину одного из изображений, разрезанных напополам. Вокруг выбранного элемента появляется рамка, как показано здесь в эмуляторе Windows Phone:

Совет

Имитатор поддерживает наведение на элементы для отображения рамки вокруг элементов DOM перед выбором одного из них.В эмуляторе Windows Phone данная функция не поддерживается.

При выборе элемента DOM проводник DOM автоматически выбирает соответствующий элемент IMG в Visual Studio. Элемент, выбранный в проводнике DOM, выглядит следующим образом:
```
<img src="ms-appx://guid/images/gray.png> 
</img>
```
Перейдите на вкладку Макет. На этой вкладке отображается рамочная модель выбранного элемента, как показано здесь в эмуляторе Windows Phone.

Это представление позволяет получить некоторые полезные сведения об элементе:
- Цвета соответствуют выделению рамками в имитаторе при наведении указателя мыши на элементами. Синий цвет представляет размеры элемента <img>. Бежевый цвет представляет значения полей.
- Для левого поля (margin-left) установлено значение, что говорит о возможной причине проблемы, поскольку черной является именно левая часть изображений.
- Поля, в которых отображаются значения, равные 0 пикселей (например, "Граница" и "Заполнение"), позволяют сделать вывод, что соответствующие свойства CSS, скорее всего, не заданы.
Чтобы увидеть, как применяется правило margin-left, откройте вкладку Вычисленные и найдите правило margin-left. Можно видеть, что для этого правила задано значение 5em, но вычисленное значение равно 66,66 пикселей или 146,66 пикселей — в зависимости от целевого устройства.

Совет

На вкладке Вычисленные видно, что правило margin-left задается в селекторе CSS ..hubpage .hub. section4 .sub-image-row img, который находится в файле hub.css.В этом демонстрационном приложении исправление требуется внести именно в этот файл.

Кроме того, можно использовать вкладку Макет для тестирования изменений значений макета.
На вкладке Макет выберите значение 66,66 или 146,66, которое отображается в поле Поле в левой части окна.
Введите 0 и нажмите клавишу ВВОД. (Изменить значение также можно с помощью клавиш СТРЕЛКА ВВЕРХ и СТРЕЛКА ВНИЗ).
Выберите другие элементы <img> в проводнике DOM и измените их значения margin-left на 0.
Перейдите в эмулятор телефона или в имитатор. Обновленные значения margin-left применяются к изображениям раздела 4. Эти значения также обновляются на вкладке Вычисленные в правиле margin-left.