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

Команда Web Camps

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

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

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

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

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

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

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

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

Задачи

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

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

Требования

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

• Microsoft Visual Studio Express 2012 для Интернета или более поздней версии (см . приложение A для инструкций по его установке).
• Internet Explorer 9 или более поздней версии

Упражнения

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

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

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

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

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

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

В этой задаче вы узнаете, как использовать Инспектор страниц в контексте проекта 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, сопоставленный с выбранным исходным представлением.

   

   Знакомство с Инспектором страниц

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

   Примечание.

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

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

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

   

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

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

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

   

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

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

   

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

   Примечание.

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

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

   

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

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

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

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

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

   

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

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

    Примечание.

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

    

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

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

    

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

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

    Примечание.

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

    

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

13. Теперь щелкните на тексте "ваш логотип" в заголовке, используя режим инспекции.

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

    

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

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

    

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

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

    

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

Задача 2. Поиск и устранение проблем с стилем в коллекции фотографий

Как диагностировать проблемы с веб-страницами с предыдущими версиями 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. На вкладке Стили найдите и щелкните элемент <section> #login, который является контейнером HTML для этих ссылок.

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

   

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

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

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

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

   

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

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

   

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

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

   

   Поиск стиля

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

   

   Обновление стиля ссылок для входа

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

   

   Ссылки, выровнены по правому краю

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

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

    

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

    

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

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

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

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

Задание 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 в Инспекторе страниц

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

   

   Просмотр Default.aspx в Page Inspector

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

   Примечание.

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

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

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

   

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

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

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

   

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

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

   

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

   Примечание.

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

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

   

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

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

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

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

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

   

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

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

    Примечание.

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

    

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

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

    

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

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

    Примечание.

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

    

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

13. Теперь щелкните текст "Ваш логотипздесь'" в заголовке в режиме инспекции.

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

    

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

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

    

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

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

    

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

Задача 2. Поиск и устранение проблем с стилем в коллекции фотографий

Как диагностировать проблемы с веб-страницами с предыдущими версиями 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. На вкладке Стили найдите и щелкните элемент <section> #login, который является контейнером HTML для этих ссылок.

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

   

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

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

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

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

   

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

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

   

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

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

   

   Поиск стиля

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

   

   Обновление стиля ссылок для входа

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

   

   Ссылки, выровнены по правому краю

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

   

   Поиск названия сайта

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

    

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

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

Итоги

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

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

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

1. Перейдите в раздел [/iis/extensions/introduction-to-iis-express/iis-express-overview?linkid=9810169](/iis/extensions/introduction-to-iis-express/iis-express-overview?linkid=9810169). Кроме того, если вы уже установили установщик веб-платформы, его можно открыть и найти продукт "Visual Studio Express 2012 для веба с пакетом SDK для Windows Azure".

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

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

   

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

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

   

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

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

   

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

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

   

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

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

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

   

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