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

Статья
07/13/2023

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

Предварительные требования

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

Microsoft Visual Studio Express 2012 для Web или более поздней версии (инструкции по установке см. в приложении А).
Internet Обозреватель 9 или более поздней версии

Упражнения

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

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

Примечание

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

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

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

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

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

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

Откройте решение Begin , расположенное в папке Source/Ex1-MVC4/Begin/ .
1. Прежде чем продолжить, вам потребуется скачать некоторые отсутствующие пакеты NuGet. Для этого щелкните меню Проект и выберите Управление пакетами NuGet.
2. В диалоговом окне Управление пакетами NuGet нажмите кнопку Восстановить , чтобы скачать отсутствующие пакеты.
3. Наконец, выполните сборку решения, щелкнув BuildSolution (Сборка | решения).
  
  Примечание
  
  Одним из преимуществ использования NuGet является то, что вам не нужно отправлять все библиотеки в проекте, уменьшая размер проекта. С помощью NuGet Power Tools, указав версии пакета в файле Packages.config, вы сможете скачать все необходимые библиотеки при первом запуске проекта. Именно поэтому эти действия необходимо выполнить после открытия существующего решения из этой лаборатории.
В Обозреватель решений найдите представление Index.cshtml в папке проекта /Views/Home, щелкните его правой кнопкой мыши и выберите Пункт Просмотреть в Инспектор страниц.

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

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

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

Примечание

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

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

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

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

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

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

Примечание

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

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

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

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

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

Примечание

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

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

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

Примечание

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

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

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

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

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

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

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

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

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

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

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

С помощью Инспектор страниц найдите ссылки Register (Регистрация) и Log in (Вход в систему) в левой части заголовка.

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

систему"

Поиск ссылок "Регистрация" и "Вход"
Выбрав режим проверки, щелкните рядом с ссылкой Зарегистрировать, чтобы открыть код.

Обратите внимание, что исходный код ссылок находится в файле _LoginPartial.cshtml , а не в файле Index.cshtml или _Layout.cshtml, которые можно найти в первую очередь. Вы были помещены непосредственно в правильный исходный файл.
На вкладке Стили найдите и щелкните <раздел> #login элемент, который является html-контейнером для этих ссылок.

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

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

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

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

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

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

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

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

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

Назначение нового названия

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

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

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

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

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

Откройте решение Begin , расположенное в папке Source/Ex2-WebForms/Begin/ .
1. Прежде чем продолжить, вам потребуется скачать некоторые отсутствующие пакеты NuGet. Для этого откройте меню Проект и выберите Управление пакетами NuGet.
2. В диалоговом окне Управление пакетами NuGet нажмите кнопку Восстановить , чтобы скачать отсутствующие пакеты.
3. Наконец, выполните сборку решения, щелкнув Сборка | решения.
  
  Примечание
  
  Одним из преимуществ использования NuGet является то, что вам не нужно отправлять все библиотеки в проекте, уменьшая размер проекта. С помощью NuGet Power Tools, указав версии пакета в файле Packages.config, вы сможете скачать все необходимые библиотеки при первом запуске проекта. Именно поэтому эти действия необходимо выполнить после открытия существующего решения из этого лабораторного задания.
В Обозреватель решений найдите страницу Default.aspx, щелкните ее правой кнопкой мыши и выберите Вид в Инспектор страниц.

Открытие Default.aspx с помощью Инспектор страниц
В окне Инспектор страниц будет отображаться default.aspx.

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

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

Примечание

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

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

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

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

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

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

Примечание

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

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

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

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

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

Примечание

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

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

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

Примечание

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

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

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

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

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

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

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

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

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

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

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

С помощью проверки страницы найдите ссылки Регистрация и Вход в левой части заголовка.

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

Ссылка "Вход" в левой части экрана
Выбрав режим проверки, щелкните ссылку Вход, чтобы открыть код.

Обратите внимание, что исходный код ссылки находится в файле Site.Master , а не на странице Default.aspx, где вы можете искать в первую очередь. вы были помещены непосредственно в правильный исходный файл.
На вкладке Стили найдите и щелкните <раздел> #login элемент, который является html-контейнером для этих ссылок.

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

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

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

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

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

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

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

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

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

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

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

Итоги

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

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

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

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

Установка Visual Studio Express
Прочтите все лицензии и условия продуктов и нажмите кнопку Принимаю , чтобы продолжить.

Принятие условий лицензии
Дождитесь завершения процесса скачивания и установки.

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

Установка завершена
Нажмите кнопку Выйти , чтобы закрыть установщик веб-платформы.
Чтобы открыть Visual Studio Express для Интернета, перейдите на начальный экран и начните писать "VS Express", а затем щелкните плитку VS Express для Web.

Плитка VS Express для Web