Поделиться через


Использование инспектора страниц в Visual Studio 2012

Команда веб-лагерей

В этой практической лаборатории вы узнаете, как найти и устранить проблемы с веб-страницей в Visual Studio — Инспектор страниц.

Инспектор страниц — это новое средство, которое предоставляет средства браузера диагностика в Visual Studio и предоставляет интегрированный интерфейс между браузером, ASP.NET и исходным кодом. Он отображает веб-страницу (HTML, веб-формы, ASP.NET MVC или веб-страницы) непосредственно в интегрированной среде разработки Visual Studio и позволяет проверять исходный код и результирующий результат. Инспектор страниц позволяет легко разложить веб-сайт, быстро создавать страницы с нуля и быстро диагностировать проблемы.

В настоящее время у нас есть ряд веб-платформ, которые создают гибкие и масштабируемые веб-сайты своевременно, такие как ASP.NET MVC и WebForms. С другой стороны, труднее найти проблемы на страницах, так как интегрированная среда разработки не поддерживает представление конструктора на страницах на основе шаблонов и динамическом содержимом. Таким образом, эти веб-сайты должны быть открыты в браузере, чтобы узнать, как они отображаются для пользователя.

Веб-разработчики используют внешние средства для поиска проблем, которые регулярно выполняются в браузере. Затем они возвращаются в интегрированную среду разработки и начинают исправление. Это действие между интегрированной среды разработки, браузером и средствами профилирования может оказаться неэффективным, а иногда требует свежего развертывания и очистки кэша при каждом воспроизведении проблемы.

Инспектор страниц преодолеть разрыв в веб-разработке между клиентом (средствами браузера) и сервером (ASP.NET и исходным кодом), объединив лучшие из обоих миров с помощью объединенного набора функций.

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

В этой практической лаборатории вы узнаете о функциях Инспектор страниц и показано, как их использовать для устранения проблем в веб-приложениях. Эта лаборатория содержит два упражнения, использующих аналогичные потоки, но предназначенные для различных технологий. Если вы являетесь разработчиком ASP.NET MVC, выполните одно упражнение. Если вы являетесь разработчиком WebForms, выполните два упражнения.

В этой лаборатории описаны улучшения и новые функции, описанные ранее, применив незначительные изменения к образцу веб-приложения, предоставленному в папке Source.

Задачи

В этой практической лаборатории вы узнаете, как:

  • Раскомпозировать веб-сайт с помощью Инспектор страниц
  • Проверка и просмотр изменений стилей CSS с помощью Инспектор страниц
  • Обнаружение и устранение проблем на веб-страницах с помощью Инспектор страниц

Необходимые компоненты

Для выполнения этой лаборатории необходимо выполнить следующие элементы:


Упражнения

Эта практическая лаборатория включает в себя следующие упражнения:

  1. Упражнение 1. Использование Инспектор страниц в проектах MVC ASP.NET
  2. Упражнение 2. Использование Инспектор страниц в проектах WebForms

Примечание.

Каждое упражнение сопровождается начальным решением, расположенным в папке "Начало" упражнения, что позволяет выполнять каждое упражнение независимо от других. В исходном коде упражнения вы также найдете папку End, содержащую решение Visual Studio с кодом, который приводит к выполнению шагов в соответствующем упражнении. Эти решения можно использовать в качестве руководства, если вам нужна дополнительная помощь при работе с этой практической лабораторией.

Предполагаемое время выполнения этой лаборатории: 30 минут.

Упражнение 1. Использование Инспектор страниц в проектах MVC ASP.NET

В этом упражнении вы узнаете, как предварительно просмотреть и отладить решение MVC 4 ASP.NET с помощью Инспектор страниц. Во-первых, вы выполните краткий круг вокруг средства, чтобы узнать о функциях, которые упрощают процесс веб-отладки. Затем вы будете работать на веб-странице, содержащей проблемы с стили. Вы узнаете, как использовать Инспектор страниц для поиска исходного кода, который создает проблему и исправляет ее.

Задача 1. Изучение Инспектор страниц

В этой задаче вы узнаете, как использовать Инспектор страниц в контексте проекта MVC 4 ASP.NET MVC 4, где показана фотоальбом.

  1. Откройте решение Begin, расположенное в папке Source/Ex1-MVC4/Begin/.

    1. Прежде чем продолжить, необходимо скачать некоторые отсутствующие пакеты NuGet. Для этого щелкните меню "Проект" и выберите "Управление пакетами NuGet".

    2. В диалоговом окне "Управление пакетами NuGet" нажмите кнопку "Восстановить", чтобы скачать отсутствующие пакеты.

    3. Наконец, создайте решение, нажав кнопку "Сборка решения сборки". |

      Примечание.

      Одним из преимуществ использования NuGet является то, что вам не нужно отправлять все библиотеки в проекте, уменьшая размер проекта. С помощью NuGet Power Tools, указав версии пакетов в файле Packages.config, вы сможете скачать все необходимые библиотеки при первом запуске проекта. Поэтому эти действия необходимо выполнить после открытия существующего решения из этой лаборатории.

  2. В Обозреватель решений найдите представление Index.cshtml в папке проекта /Views/Home, щелкните его правой кнопкой мыши и выберите "Вид" в Инспектор страниц.

    Выбор файла для предварительного просмотра в Инспектор страниц

    Выбор файла для предварительного просмотра в Инспектор страниц

  3. В окне Инспектор страниц отобразится URL-адрес /Home/Index, сопоставленный с выбранным исходным представлением.

    Первый контакт с PageInspector

    Первый контакт с Инспектор страниц

    Средство Инспектор страниц интегрировано в среду Visual Studio. Инспектор содержит внедренный браузер вместе с мощным профилировщиком HTML. Обратите внимание, что вам не нужно запускать решение, чтобы узнать, как выглядят страницы.

    Примечание.

    Если ширина браузера Инспектор страниц меньше ширины открытой страницы, вы не увидите страницу должным образом. В этом случае настройте ширину Инспектор страниц.

  4. Перейдите на вкладку "Файлы" в Инспектор страниц.

    Вы увидите все исходные файлы, составляющие страницу индекса. Эта функция помогает определить все элементы на первый взгляд, особенно при работе с частичными представлениями и шаблонами. Обратите внимание, что вы также можете открыть каждый из файлов, если щелкнуть ссылки.

    Вкладка

    Вкладка "Файлы"

  5. Нажмите кнопку "Включить режим проверки", расположенную слева от вкладок.

    Это средство позволит выбрать любой элемент страницы и просмотреть его КОД HTML и Razor.

    Кнопка

    Кнопка "Включить режим проверки"

  6. В браузере Инспектор страниц переместите указатель мыши на элементы страницы. При перемещении указателя мыши на любую часть отрисованной страницы отображается тип элемента, а соответствующий исходный разметка или код выделен в редакторе Visual Studio.

    Снимок экрана: окно Инспектор страниц и редактор Visual Studio с типом элемента, отображаемым и соответствующим выделенным исходным разметкой.

    Режим проверки в действии

    Примечание.

    Не разворачивайте окно Инспектор страниц или не увидите вкладку предварительного просмотра с исходным кодом. Если щелкнуть элемент в Инспектор страниц при его развертывании, исходный код выделенного фрагмента будет отображаться, но он будет скрывать окно Инспектор страниц.

    Если обратить внимание на файл Index.cshtml , вы заметите, что выделена часть исходного кода, которая создает выбранный элемент. Эта функция упрощает редактирование длинных исходных файлов, предоставляя прямой и быстрый способ доступа к коду.

    Снимок экрана: окно Инспектор страниц и файл редактора Visual Studio Index.cshtml, показывающий, что выделена часть исходного кода, создающая выбранный элемент.

    Проверка элементов

  7. Нажмите кнопку "Включить режим проверки" (Выберите вкладку HTML, чтобы отобразить HTML-код, отображаемый в браузере Инспектор страниц. ), чтобы отключить курсор.

  8. Выберите вкладку HTML, чтобы отобразить HTML-код, отображаемый в браузере Инспектор страниц.

  9. В разметке HTML найдите элемент списка со ссылкой Koala и выберите его.

    Обратите внимание, что при выборе кода соответствующие выходные данные автоматически выделены в браузере. Эта функция полезна для просмотра html-блока на странице.

    Выбор HTML-элемента на странице

    Выбор HTML-элемента на странице

  10. Нажмите кнопку "Включить режим проверки", чтобы включить режим проверки и щелкнуть панель навигации. Справа от HTML-кода в области стилей вы увидите список со стилями CSS, примененными к выбранному элементу.

    Примечание.

    Так как заголовок является частью макета сайта, Инспектор страниц также откроет файл _Layout.cshtml и выделите сегмент затронутого кода.

    Обнаружение стилей

    Обнаружение стилей и исходных файлов выбранного элемента

  11. С включенным указателем проверки переключателя переместите указатель мыши под синюю панель и щелкните половину круга.

    Снимок экрана: окно Инспектор страниц с указателем мыши, щелкнув полкольца под синей панелью в левом верхнем углу экрана.

    Выбор элемента

  12. В области стилей найдите элемент фонового изображения в группе основного содержимого . Снимите флажок фонового изображения и посмотрите, что происходит. Вы заметите, что браузер сразу же отобразит изменения, и круг скрыт.

    Примечание.

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

    Включение и отключение стилей CSS

    Включение и отключение стилей CSS

  13. Теперь щелкните текст "Логотип здесь" в заголовке с помощью режима проверки.

  14. На вкладке "Стили" найдите атрибут CSS размера шрифта в группе заголовков сайта. Дважды щелкните значение атрибута и замените значение 2,3 em на 3 em, а затем нажмите клавишу ВВОД. Обратите внимание, что название выглядит больше.

    Изменение значений CSS в Инспектор страниц

    Изменение значений CSS в Инспектор страниц

  15. Перейдите на вкладку "Стили трассировки", расположенную в правой области Инспектор страниц. Это альтернативный способ просмотра всех стилей, применяемых к выбору, упорядоченных по имени атрибута.

    Трассировка стилей CSS

    Трассировка стилей CSS выбранного элемента

  16. Еще одной функцией Инспектор страниц является область макета. С помощью режима проверки выберите панель навигации и перейдите на вкладку "Макет " в правой области. Вы увидите точный размер выбранного элемента, а также его смещение, поле, заполнение и размер границы. Обратите внимание, что можно также изменить значения из этого представления.

    Снимок экрана: панель навигации с выбранной вкладкой

    Макет элемента в Инспектор страниц

Как диагностировать проблемы с веб-страницами с предыдущими версиями Visual Studio? Скорее всего, вы знакомы с инструментами веб-отладки, работающими за пределами интегрированной среды разработки Visual Studio, например средства разработчика Internet Explorer или Firebug. Браузеры понимают только HTML, скрипты и стили, а базовая платформа создает HTML-код, который будет отображаться. По этой причине часто необходимо развернуть весь сайт, чтобы увидеть, как выглядят веб-страницы.

Возможно, вы выполнили следующие действия, когда вы хотели обнаружить и устранить проблему на веб-сайте:

  1. Запустите решение из Visual Studio или разверните страницу на веб-сервере.
  2. В браузере откройте используемые средства разработчика или просто откройте исходный код и стили и попытайтесь сопоставить проблему. Чтобы найти участвующие файлы, вы использовали бы функции "Поиск" или "Поиск в файлах" с именем классов стилей.
  3. После обнаружения ошибки остановите веб-браузер и сервер.
  4. Очистите кэш браузера.
  5. Вернитесь в Visual Studio, чтобы применить исправление. Повторите все шаги для тестирования.

Так как в ASP.NET MVC 4 нет реальных WYSIWYG, большинство проблем с стилем обнаруживаются на более позднем этапе после запуска или развертывания веб-приложения. Теперь с Инспектор страниц можно просмотреть любую страницу без запуска решения.

В этой задаче вы будете использовать инспектор страницы и исправите некоторые проблемы, связанные с приложением коллекции фотографий.

  1. Используя Инспектор страниц, найдите ссылку "Регистрация" и "Вход" в левой части заголовка.

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

    Поиск ссылок для регистрации и входа

    Поиск ссылок для регистрации и входа

  2. Выбрав режим переключения проверки, нажмите кнопку "Закрыть", но не "Зарегистрировать", чтобы открыть свой код.

    Обратите внимание, что исходный код ссылок находится в файле _LoginPartial.cshtml , а не Index.cshtml, а не _Layout.cshtml, которые являются местами, которые можно просмотреть в первую очередь. Вы были помещены непосредственно в правильный исходный файл.

  3. На вкладке "Стили" найдите и щелкните <раздел> #login элемент, который является контейнером HTML для этих ссылок.

    Обратите внимание, что стиль #login автоматически расположен в Site.css после нажатия кнопки. Кроме того, теперь выделен код.

    Снимок экрана: вкладка

    Выбор стилей CSS

  4. Раскомментируйте атрибут выравнивания текста в выделенном коде, удалив открывающие и закрывающие символы и сохраняя файл Site.css .

    Инспектор страниц знает обо всех разных файлах, составляющих текущую страницу, и может обнаружить, когда любой из этих файлов изменяется. Он оповещает вас, когда текущая страница в браузере не синхронизирована с исходными файлами.

  5. В браузере Инспектор страниц щелкните строку под адресной строкой, чтобы перезагрузить страницу.

    Снимок экрана: браузер Инспектор страниц, отображающий панель под адресной строкой, которая используется для сохранения изменений и перезагрузки страницы.

    Перезагрузка страницы

    Ссылки теперь находятся справа, но они по-прежнему выглядят как маркированный список. Теперь вы удалите маркеры и выровняете ссылки по горизонтали.

    Снимок экрана: в правом верхнем углу окна Инспектор страниц, в котором отображаются ссылки

    Обновленная страница

  6. В режиме проверки выберите любой из <элементов li> , содержащих ссылки "Регистрация" и "Войти". Затем щелкните раздел> #login элемент, чтобы получить доступ к коду <Styles.css.

    Снимок экрана: окно Инспектор страниц в режиме проверки и выбор ссылки

    Поиск стиля

  7. В Style.css раскомментируйте код для #login элементов li . Добавленный стиль скрывает маркер и отображает элементы по горизонтали.

    Снимок экрана: Style.css перебор ссылок для входа по горизонтали.

    Перебор ссылок для входа

  8. Сохраните Style.css файл и щелкните один раз на панели, расположенной под адресом, чтобы перезагрузить страницу. Обратите внимание, что ссылки отображаются правильно.

    Снимок экрана: верхняя правая часть окна Инспектор страниц с выравниванием по горизонтали по ссылкам для регистрации и входа.

    Ссылки, выровненные по правой стороне

  9. Наконец, вы измените заголовок. Используйте режим проверки, чтобы щелкнуть логотип здесь и перейти к исходному коду, который создает его.

  10. Теперь вы находитесь в _Layout.cshtml, замените текст "логотип здесь" на "Фото галерея". Сохраните и обновите браузер Инспектор страниц.

    Назначение нового заголовка

    Назначение нового заголовка

    Страница

    Обновлена страница коллекции фотографий

  11. Наконец, выберите проект PhotoGallery и нажмите клавишу F5 , чтобы запустить приложение. Проверьте все изменения, как ожидалось.


Упражнение 2. Использование Инспектор страниц в проектах WebForms

В этом упражнении вы узнаете, как предварительно просмотреть и отладить решение WebForms с помощью Инспектор страниц. Сначала вы будете выполнять краткий круг вокруг средства, чтобы узнать Инспектор страниц функции, которые упрощают процесс отладки в Интернете. Затем вы будете работать на веб-странице, содержащей проблемы с стили. Вы узнаете, как использовать Инспектор страниц для поиска исходного кода, который создает проблему и исправляет ее.

Задача 1. Изучение Инспектор страниц

В этой задаче вы узнаете, как использовать функции Инспектор страниц в контексте проекта WebForms, отображающего коллекцию фотографий.

  1. Откройте решение Begin, расположенное в папке Source/Ex2-WebForms/Begin/.

    1. Прежде чем продолжить, необходимо скачать некоторые отсутствующие пакеты NuGet. Для этого щелкните меню "Проект" и выберите "Управление пакетами NuGet".

    2. В диалоговом окне "Управление пакетами NuGet" нажмите кнопку "Восстановить", чтобы скачать отсутствующие пакеты.

    3. Наконец, создайте решение, нажав кнопку "Сборка решения сборки". |

      Примечание.

      Одним из преимуществ использования NuGet является то, что вам не нужно отправлять все библиотеки в проекте, уменьшая размер проекта. С помощью NuGet Power Tools, указав версии пакетов в файле Packages.config, вы сможете скачать все необходимые библиотеки при первом запуске проекта. Поэтому эти действия необходимо выполнить после открытия существующего решения из этой лаборатории.

  2. В Обозреватель решений найдите страницу Default.aspx, щелкните ее правой кнопкой мыши и выберите "Вид" в Инспектор страниц.

    Открытие Default.aspx с помощью Инспектор страниц

    Открытие Default.aspx с помощью Инспектор страниц

  3. В окне Инспектор страниц отобразится Default.aspx.

    Просмотр Default.aspx в Инспектор страниц

    Просмотр Default.aspx в Инспектор страниц

    Средство Инспектор страниц интегрировано в среду Visual Studio. Инспектор содержит внедренный браузер вместе с мощным профилировщиком HTML, который будет отображать выбранный код. Обратите внимание, что вам не нужно запускать решение, чтобы узнать, как выглядят страницы.

    Примечание.

    Если ширина браузера Инспектор страниц меньше ширины открытой страницы, вы не увидите страницу должным образом. В этом случае настройте ширину Инспектор страниц.

  4. Перейдите на вкладку "Файлы" в Инспектор страниц.

    Вы увидите все исходные файлы, составляющие отрисованную страницу по умолчанию. Это полезная функция для выявления всех элементов на первый взгляд, особенно при работе с пользовательскими элементами управления и эталонными страницами. Обратите внимание, что вы также можете перейти к каждому из файлов.

    Вкладка

    Вкладка "Файлы"

  5. Нажмите кнопку "Включить режим проверки", расположенную слева от вкладок.

    Это средство позволит выбрать любой элемент страницы и просмотреть его HTML-код и .aspx источник.

    Кнопка

    Кнопка "Включить режим проверки"

  6. В браузере Инспектор страниц переместите указатель мыши на элементы страницы. При перемещении указателя мыши на любую часть отрисованной страницы отображается тип элемента, а соответствующий исходный разметка или код выделен в редакторе Visual Studio.

    Снимок экрана: окно Инспектор страниц и редактор Visual Studio с типом элемента, отображаемым и выделенным соответствующим кодом.

    Режим проверки в действии

    Примечание.

    Не разворачивайте окно Инспектор страниц или не увидите вкладку предварительного просмотра с исходным кодом. Если щелкнуть элемент в Инспектор страниц при его развертывании, исходный код выделенного фрагмента будет отображаться, но он будет скрывать окно Инспектор страниц.

    Если вы обратите внимание на файл Default.aspx , вы увидите, что выделена часть исходного кода, которая создает выбранный элемент. Эта функция упрощает выпуск длинных исходных файлов, предоставляя прямой и быстрый способ доступа к коду.

    Снимок экрана: окно Инспектор страниц и файл редактора Visual Studio Default.aspx, показывающий, что выделена часть исходного кода, создающая выбранный элемент.

    Проверка элементов

  7. Нажмите кнопку "Включить режим проверки" (Select-the-HTML-tab-to-display-the-HTML-code-rendered-in-page-Inspector-browser.), расположенную на вкладках Инспектор страниц, чтобы отключить курсор.

  8. Выберите вкладку HTML, чтобы отобразить HTML-код, отображаемый в браузере Инспектор страниц.

  9. В HTML-коде найдите элемент списка со ссылкой Koala и выберите его.

    Обратите внимание, что при выборе кода соответствующие выходные данные автоматически выделены в браузере. Эта функция полезна для просмотра html-блока на странице.

    Выбор HTML-элемента на странице

    Выбор HTML-элемента на странице

  10. Нажмите кнопку "Включить режим проверки", чтобы включить режим проверки и щелкнуть панель навигации. Справа от HTML-кода в области стилей вы увидите список со стилями CSS, примененными к выбранному элементу.

    Примечание.

    так как заголовок является частью макета сайта, Инспектор страниц также откроет файл Site.Master и выделите сегмент затронутого кода.

    Обнаружение стилей WebForms

    Обнаружение стилей и исходных файлов выбранного элемента

  11. Включив переключатель проверки, переместите указатель мыши под строкой меню и щелкните пустой пол окружности.

    Снимок экрана: в левом верхнем углу окна Инспектор страниц, на котором показан указатель мыши, выбрав половину круга под синей панелью.

    Выбор элемента

  12. В области стилей найдите элемент фонового изображения в группе основного содержимого . Снимите флажок фонового изображения и посмотрите, что происходит. Вы заметите, что браузер сразу же отобразит изменения, и круг скрыт.

    Примечание.

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

    Включение и отключение стилей CSS2

    Включение и отключение стилей CSS

  13. Теперь щелкните текст "Логотип здесь" в заголовке с помощью режима проверки.

  14. На вкладке "Стили" найдите атрибут CSS размера шрифта в группе заголовков сайта. Дважды щелкните атрибут один раз, чтобы изменить его значение. Замените значение 2.3em на 3em, а затем нажмите клавишу ВВОД. Обратите внимание, что название выглядит больше.

    Изменение значений CSS в Инспектор страниц 2

    Изменение значений CSS в Инспектор страниц

  15. Перейдите на вкладку "Стили трассировки", расположенную в правой области Инспектор страниц. Это альтернативный способ просмотра всех стилей, применяемых к выбору, упорядоченных по имени атрибута.

    Трассировка стилей CSS выбранного элемента

    Трассировка стилей CSS выбранного элемента

  16. Еще одной функцией Инспектор страниц является область макета. С помощью режима проверки выберите панель навигации и перейдите на вкладку "Макет " в правой области. Вы увидите точный размер выбранного элемента, а также его смещение, поле, заполнение и размер границы. Обратите внимание, что можно также изменить значения из этого представления.

    Снимок экрана: панель навигации с выбранной вкладкой

    Макет элемента в Инспектор страниц

Как диагностировать проблемы с веб-страницами с предыдущими версиями Visual Studio? Скорее всего, вы знакомы с инструментами веб-отладки, работающими за пределами интегрированной среды разработки Visual Studio, например средства разработчика Internet Explorer или Firebug. Браузеры понимают только HTML, скрипты и стили, а базовая платформа создает HTML-код, который будет отображаться. По этой причине часто необходимо развернуть весь сайт, чтобы увидеть, как выглядят веб-страницы.

Возможно, вы выполнили следующие действия, когда вы хотели обнаружить и устранить проблему на веб-сайте:

  1. Запустите решение из Visual Studio или разверните страницу на веб-сервере.
  2. В браузере откройте используемые средства разработчика или просто откройте исходный код и стили и попытайтесь сопоставить проблему. Чтобы найти участвующие файлы, вы использовали функции "Поиск" или "Поиск в файлах" с именем классов стиля.
  3. После обнаружения ошибки остановите веб-браузер и сервер.
  4. Очистите кэш браузера.
  5. Вернитесь в Visual Studio, чтобы применить исправление. Повторите все шаги для тестирования.

Так как в веб-формах ASP.NET нет реальных WYSIWYG, некоторые проблемы стиля обнаруживаются на более позднем этапе после выполнения или развертывания. Теперь с Инспектор страниц можно просмотреть любую страницу без запуска решения.

В этой задаче вы будете использовать инспектор страниц для устранения некоторых проблем приложения коллекции фотографий. В следующих шагах вы обнаружите и быстро исправите некоторые простые проблемы стилизации в заголовке.

  1. Используя проверку страниц, найдите ссылки Register и Log In в левой части заголовка.

    Обратите внимание, что ссылка не отображается в ожидаемом месте справа. Теперь выровняете ссылку справа и перестроите ее соответствующим образом.

    Войдите по ссылке, расположенной слева

    Ссылка "Войти в систему", расположенная слева

  2. Выбрав режим переключения проверки, выберите ссылку "Войти в систему", чтобы открыть свой код.

    Обратите внимание, что исходный код ссылки находится в файле Site.Master, а не на странице Default.aspx, которая является местом, которое вы можете посмотреть в первую очередь; вы были помещены непосредственно в правильный исходный файл.

  3. На вкладке "Стили" найдите и щелкните <раздел> #login элемент, который является контейнером HTML для этих ссылок.

    Обратите внимание, что стиль #login автоматически расположен в Site.css после нажатия кнопки. Кроме того, теперь выделен код.

    Снимок экрана: вкладка

    Выбор стилей CSS

  4. Раскомментируйте атрибут выравнивания текста в выделенном коде, удалив открывающие и закрывающие символы и сохраняя файл Site.css .

    Инспектор страниц знает обо всех разных файлах, составляющих текущую страницу, и может обнаружить, когда любой из этих файлов изменяется. Он оповещает вас, когда текущая страница в браузере не синхронизирована с исходными файлами.

  5. В браузере Инспектор страниц щелкните строку под адресной строкой, чтобы сохранить изменения и перезагрузить страницу.

    Снимок экрана: браузер Инспектор страниц с строкой, расположенной под адресной строкой, которая используется для сохранения изменений и перезагрузки страницы.

    Перезагрузка страницы

    Ссылки теперь находятся справа, но они по-прежнему выглядят как маркированный список. Теперь вы удалите маркеры и выровняете ссылки по горизонтали.

    Снимок экрана, на котором показана верхняя правая часть окна Инспектор страниц, в которой отображаются ссылки для регистрации и входа в виде маркированного списка.

    Обновленная страница

  6. В режиме проверки выберите любой из <элементов li> , содержащих ссылки "Регистрация" и "Войти". Затем щелкните раздел> #login элемент, чтобы получить доступ к коду <Styles.css.

    Снимок экрана: окно Инспектор страниц в режиме проверки и выбор ссылки

    Поиск стиля

  7. В Style.css раскомментируйте код для #login элементов li . Добавленный стиль скрывает маркер и отображает элементы по горизонтали.

    Снимок экрана: Style.css добавление стиля, чтобы ссылки для входа отображались по горизонтали.

    Перебор ссылок для входа

  8. Сохраните Style.css файл и щелкните один раз на панели, расположенной под адресом, чтобы перезагрузить страницу. Обратите внимание, что ссылки отображаются правильно.

    Снимок экрана, на котором показана верхняя правая часть окна Инспектор страниц, в котором отображаются ссылки Register and Log in horizontaled по горизонтали.

    Ссылки, выровненные по правой стороне

  9. Наконец, вы измените заголовок. Вместо поиска текста "логотип здесь" во всех файлах используйте режим проверки, чтобы щелкнуть текст и получить исходный код, который создает его.

    Поиск заголовка сайта

    Поиск заголовка сайта

  10. Теперь вы находитесь в Site.Master, замените текст "логотип здесь" на "Фото галерея". Сохраните и обновите браузер Инспектор страниц.

    Обновлена страница коллекции фотографий

    Обновлена страница коллекции фотографий

  11. Наконец, нажмите клавишу F5 , чтобы запустить приложение, чтобы извлечь все изменения, как ожидалось.


Итоги

Выполнив эту практическую лабораторию, вы узнали, как использовать Инспектор страниц для предварительного просмотра веб-приложения без необходимости перестроить и запустить веб-сайт в браузере. Кроме того, вы узнали, как быстро находить и устранять ошибки путем доступа непосредственно из отрисованных выходных данных к исходному коду.

Приложение A. Установка Visual Studio Express 2012 для Интернета

Вы можете установить Microsoft Visual Studio Express 2012 для Интернета или другой версии Express с помощью установщика веб-платформа Майкрософт. Ниже приведены инструкции по установке Visual Studio Express 2012 для Интернета с помощью установщика веб-платформа Майкрософт.

  1. Перейдите к [https://go.microsoft.com/?linkid=9810169](https://go.microsoft.com/?linkid=9810169). Кроме того, если вы уже установили установщик веб-платформы, его можно открыть и найти в продукте Visual Studio Express 2012 для Интернета с помощью пакета SDK для Windows Azure.

  2. Нажмите кнопку "Установить сейчас". Если у вас нет установщика веб-платформы, вы будете перенаправлены, чтобы скачать и установить его сначала.

  3. После открытия установщика веб-платформы нажмите кнопку "Установить ", чтобы запустить настройку.

    Установка Visual Studio Express

    Установка Visual Studio Express

  4. Прочитайте все лицензии и условия продуктов и нажмите кнопку "Принять ", чтобы продолжить.

    Принятие условий лицензии

    Принятие условий лицензии

  5. Дождитесь завершения процесса загрузки и установки.

    Ход выполнения установки

    Ход установки

  6. После завершения установки нажмите кнопку "Готово".

    Завершена установка

    Завершена установка

  7. Нажмите кнопку " Выйти" , чтобы закрыть установщик веб-платформы.

  8. Чтобы открыть Visual Studio Express для Интернета, перейдите на начальный экран и начните писать "VS Express", а затем щелкните элемент VS Express для веб-страницы.

    Плитка VS Express для веб-сайта

    Плитка VS Express для веб-сайта