Uso do Inspetor de Página no Visual Studio 2012
Neste Laboratório Prático, você descobrirá uma nova ferramenta para localizar e corrigir problemas de página da Web no Visual Studio – o Inspetor de Página.
O Inspetor de Página é uma nova ferramenta que traz ferramentas de diagnóstico do navegador para o Visual Studio e fornece uma experiência integrada entre o navegador, o ASP.NET e o código-fonte. Ele renderiza uma página da Web (HTML, Web Forms, ASP.NET MVC ou Páginas da Web) diretamente no IDE do Visual Studio e permite examinar o código-fonte e a saída resultante. O Page Inspector permite que você decomponha facilmente um site, crie páginas rapidamente do zero e diagnostique problemas rapidamente.
Hoje em dia temos uma série de frameworks Web que criam sites flexíveis e escaláveis em tempo hábil, como ASP.NET MVC e WebForms. Por outro lado, fica mais difícil encontrar problemas nas páginas porque o IDE não suporta a visualização do designer em páginas baseadas em modelo e conteúdo dinâmico. Portanto, esses sites precisam ser abertos em um navegador para ver como eles aparecem para um usuário.
Os desenvolvedores da Web usam ferramentas externas para encontrar problemas que são executados regularmente no navegador. Em seguida, eles retornam ao IDE e começam a corrigir. Essa atividade de ida e volta entre o IDE, o navegador e as ferramentas de criação de perfil pode ser ineficiente e, às vezes, requer uma nova implantação e limpeza de cache sempre que você deseja reproduzir um problema.
O Page Inspector preenche uma lacuna no desenvolvimento da Web entre o cliente (ferramentas do navegador) e o servidor (ASP.NET e código-fonte), reunindo o melhor dos dois mundos usando um conjunto combinado de recursos.
Usando o Inspetor de Página, você pode ver quais elementos nos arquivos de origem (incluindo o código do lado do servidor) produziram a marcação HTML a ser renderizada no navegador. O Inspetor de Página também permite modificar as propriedades CSS e os atributos do elemento DOM para ver as alterações refletidas imediatamente no navegador.
Este laboratório prático orientará você pelos recursos do Inspetor de Página e mostrará como você pode usá-los para corrigir problemas em aplicativos Web. Este laboratório contém dois exercícios usando fluxos semelhantes, mas visando tecnologias diferentes. Se você for um desenvolvedor MVC ASP.NET, siga o exercício um; se você for um desenvolvedor WebForms, siga o exercício dois.
Este laboratório orienta você pelos aprimoramentos e novos recursos descritos anteriormente, aplicando pequenas alterações a um aplicativo Web de exemplo fornecido na pasta Origem.
Objetivos
Neste laboratório prático, você aprenderá a:
- Decompor um site usando o Inspetor de página
- Inspecionar e visualizar alterações de estilos CSS com o Inspetor de Página
- Detecte e corrija problemas em suas páginas da Web usando o Inspetor de páginas
Pré-requisitos
Você deve ter os seguintes itens para concluir este laboratório:
- Microsoft Visual Studio Express 2012 para Web ou superior (leia o Apêndice A para obter instruções sobre como instalá-lo).
- Internet Explorer 9 ou superior
Exercícios
Este laboratório prático inclui os seguintes exercícios:
- Exercício 1: Usando o Inspetor de Página em ASP.NET projetos MVC
- Exercício 2: Usando o Inspetor de Página em Projetos WebForms
Observação
Cada exercício é acompanhado por uma solução inicial, localizada na pasta Begin do exercício, que permite seguir cada exercício independentemente dos outros. Dentro do código-fonte de um exercício, você também encontrará uma pasta End contendo uma solução do Visual Studio com o código resultante da conclusão das etapas no exercício correspondente. Você pode usar essas soluções como orientação se precisar de ajuda adicional enquanto trabalha neste laboratório prático.
Tempo estimado para concluir este laboratório: 30 minutos.
Exercício 1: Usando o Inspetor de Página em ASP.NET projetos MVC
Neste exercício, você aprenderá a visualizar e depurar uma solução MVC 4 do ASP.NET usando o Inspetor de Página. Primeiro, você executará uma breve volta na ferramenta para aprender os recursos que facilitam o processo de depuração da Web. Em seguida, você trabalhará em uma página da web que contém problemas de estilo. Você aprenderá a usar o Page Inspector para encontrar o código-fonte que gera o problema e corrigi-lo.
Tarefa 1 – Explorando o Inspetor de Página
Nesta tarefa, você aprenderá a usar o Inspetor de Página no contexto de um projeto ASP.NET MVC 4 que mostra uma galeria de fotos.
Abra a solução Begin localizada na pasta Source/Ex1-MVC4/Begin/ .
Você precisará baixar alguns pacotes NuGet ausentes antes de continuar. Para fazer isso, clique no menu Projeto e selecione Gerenciar Pacotes NuGet.
Na caixa de diálogo Gerenciar Pacotes NuGet, clique em Restaurar para baixar pacotes ausentes.
Por fim, crie a solução clicando em Compilar | Compilar Solução.
Observação
Uma das vantagens de usar o NuGet é que você não precisa enviar todas as bibliotecas em seu projeto, reduzindo o tamanho do projeto. Com o NuGet Power Tools, especificando as versões do pacote no arquivo Packages.config, você poderá baixar todas as bibliotecas necessárias na primeira vez que executar o projeto. É por isso que você terá que executar essas etapas depois de abrir uma solução existente neste laboratório.
No Gerenciador de Soluções, localize a exibição Index.cshtml na pasta do projeto /Views/Home, clique com o botão direito do mouse e selecione Exibir no Inspetor de Página.
Selecionando um arquivo para visualizar no Inspetor de páginas
A janela Inspetor de página mostrará o URL /Home/Index mapeado para a exibição de origem selecionada.
O primeiro contato com o Page Inspector
A ferramenta Inspetor de Página é integrada ao seu ambiente do Visual Studio. O inspetor contém um navegador incorporado, juntamente com um poderoso criador de perfil HTML. Observe que você não precisa executar a solução para ver a aparência de suas páginas.
Observação
Quando a largura do navegador do Inspetor de Página for menor que a largura da página aberta, você não verá a página corretamente. Se isso acontecer, ajuste a largura do Inspetor de Página.
Clique na guia Arquivos no Inspetor de Página.
Você verá todos os arquivos de origem que estão compondo a página Índice. Esse recurso ajuda a identificar todos os elementos rapidamente, especialmente quando você está trabalhando com exibições parciais e modelos. Observe que você também pode abrir cada um dos arquivos se clicar nos links.
A guia Arquivos
Clique no botão Alternar modo de inspeção, localizado à esquerda das guias.
Essa ferramenta permitirá que você selecione qualquer elemento da página e veja seu código HTML e Razor.
Alternar o botão Modo de inspeção
No navegador Inspetor de Página, mova o ponteiro do mouse sobre os elementos da página. Enquanto você move o ponteiro do mouse sobre qualquer parte da página renderizada, o tipo de elemento é exibido e a marcação ou o código de origem correspondente é realçado no editor do Visual Studio.
Modo de inspeção em ação
Observação
Não maximize a janela Inspetor de página ou você não poderá ver a guia de visualização mostrando o código-fonte. Se você clicar no elemento no Inspetor de Página quando ele estiver maximizado, o código-fonte da seleção aparecerá, mas ocultará a janela do Inspetor de Página.
Se você prestar atenção ao arquivo Index.cshtml , observará que a parte do código-fonte que gera o elemento selecionado é realçada. Esse recurso facilita a edição de arquivos de origem longos, fornecendo uma maneira direta e rápida de acessar o código.
Inspecionando elementos
Clique no botão Alternar modo de inspeção (
) para desativar o cursor.Selecione a guia HTML para exibir o código HTML renderizado no navegador Inspetor de página.
Na marcação HTML, localize o item da lista com o link Koala e selecione-o.
Observe que, quando você seleciona o código, a saída correspondente é realçada automaticamente no navegador. Esse recurso é útil para ver como um bloco HTML é renderizado na página.
Selecionando o elemento HTML na página
Clique no botão Alternar modo de inspeção para ativar o modo de inspeção e clique na barra de navegação. À direita do código HTML, no painel Estilos, você verá uma lista com os estilos CSS aplicados ao elemento selecionado.
Observação
Como o cabeçalho faz parte do layout do site, o Inspetor de Página também abrirá o arquivo _Layout.cshtml e realçará o segmento de código afetado.
Descobrindo estilos e arquivos de origem de um elemento selecionado
Com o ponteiro de inspeção de alternância ativado, mova o ponteiro do mouse abaixo da barra azul em destaque e clique no semicírculo.
Selecionando um elemento
No painel Estilos, localize o item background-image no grupo .main-content . Desmarque a imagem de fundo e veja o que acontece. Você notará que o navegador refletirá as alterações imediatamente e o círculo ficará oculto.
Observação
As alterações aplicadas na guia Estilos do Inspetor de página não afetam a folha de estilo original. Você pode desmarcar estilos ou alterar seus valores quantas vezes quiser, mas eles serão restaurados após a atualização da página.
Ativando e desativando estilos CSS
Agora, clique no texto 'seu logotipo aqui' no cabeçalho usando o modo de inspeção.
Na guia Estilos, localize o atributo CSS font-size no grupo .site-title. Clique duas vezes no valor do atributo e substitua o valor de 2,3 em por 3 em e pressione ENTER. Observe que o título parece maior.
Alteração de valores CSS no Inspetor de páginas
Clique na guia Estilos de rastreamento, localizada no painel direito do Inspetor de páginas. Essa é uma maneira alternativa de ver todos os estilos aplicados à seleção, ordenados pelo nome do atributo.
Traçado de estilos CSS do elemento selecionado
Outro recurso do Inspetor de Página é o painel Layout. Usando o modo de inspeção, selecione a barra de navegação e clique na guia Layout no painel direito. Você verá o tamanho exato do elemento selecionado, bem como seu deslocamento, margem, preenchimento e tamanho da borda. Observe que você também pode modificar os valores dessa exibição.
Layout do elemento no Inspetor de Página
Tarefa 2 – Localizando e corrigindo problemas de estilo na Galeria de Fotos
Como você diagnosticaria problemas de páginas da Web com versões anteriores do Visual Studio? Você provavelmente está familiarizado com as ferramentas de depuração da Web que são executadas fora do IDE do Visual Studio, como as Ferramentas de Desenvolvedor do Internet Explorer ou o Firebug. Os navegadores entendem apenas HTML, scripts e estilos, enquanto uma estrutura subjacente gera o HTML que será renderizado. Por esse motivo, muitas vezes você precisa implantar todo o site para ver a aparência das páginas da web.
Você provavelmente seguiu estas etapas quando quis detectar e corrigir um problema em seu site:
- Execute a solução no Visual Studio ou implante a página no servidor Web.
- No navegador, abra as ferramentas de desenvolvedor que você usa ou simplesmente abra o código-fonte e os estilos e tente corresponder ao problema. Para encontrar os arquivos envolvidos, você teria usado os recursos "Pesquisar" ou "Pesquisar em arquivos" com o nome das classes de estilo.
- Assim que o erro for detectado, pare o navegador da Web e o servidor.
- Limpe o cache do navegador.
- Retorne ao Visual Studio para aplicar uma correção. Repita todas as etapas para testar.
Como não há WYSIWYG real no MVC 4 ASP.NET, a maioria dos problemas de estilo é detectada em um estágio posterior, após a execução ou implantação do aplicativo Web. Agora, com o Page Inspector, é possível visualizar qualquer página sem executar a solução.
Nesta tarefa, você usará o inspetor de páginas e corrigirá alguns problemas do aplicativo Galeria de fotos.
Usando o Inspetor de Página, localize os links Registrar e Fazer login no lado esquerdo do cabeçalho.
Observe que os links não são exibidos no local esperado à direita e são mostrados como uma lista com marcadores. Agora você alinhará os links à direita e os reestilizará de acordo.
Localizando os links Registrar e Fazer login
Com a opção Alternar modo de inspeção selecionada, clique em fechar, mas não em ativar, o link Registrar para abrir seu código.
Observe que o código-fonte dos links está localizado no arquivo _LoginPartial.cshtml , não no Index.cshtml nem no _Layout.cshtml, que são os locais que você pode procurar em primeiro lugar. Você foi colocado diretamente no arquivo de origem correto.
Na guia Estilos, localize e clique na <seção> #login item, que é o contêiner HTML para esses links.
Observe que o estilo #login é localizado automaticamente em Site.css depois que você clica. Além disso, o código agora está destacado.
Selecionando os estilos CSS
Remova o comentário do atributo text-align no código realçado removendo os caracteres de abertura e fechamento e salve o arquivo Site.css .
O Inspetor de Página está ciente de todos os diferentes arquivos que compõem a página atual e pode detectar quando qualquer um desses arquivos é alterado. Ele alerta sempre que a página atual no navegador não está sincronizada com os arquivos de origem.
No navegador Inspetor de Página, clique na barra localizada abaixo da barra de endereço para recarregar a página.
Recarregando a página
Os links estão agora à direita, mas ainda parecem uma lista com marcadores. Agora, você removerá os marcadores e alinhará os links horizontalmente.
Página atualizada
Usando o modo de inspeção, selecione qualquer um dos <itens li> que contenham os links "Registrar" e "Entrar". Em seguida, clique na <seção> #login item para acessar Styles.css código.
Encontrando o estilo
Em Style.css, remova o comentário do código para #login itens li . O estilo que você está adicionando ocultará o marcador e exibirá os itens horizontalmente.
Reestilizando os links de login
Salve Style.css arquivo e clique uma vez na barra localizada abaixo do endereço para recarregar a página. Observe que os links aparecem corretamente.
Links alinhados ao lado direito
Por fim, você alterará o título do cabeçalho. Use o modo de inspeção para clicar no texto do seu logotipo e acessar o código-fonte que o gera.
Agora que você está em _Layout.cshtml, substitua o texto 'seu logotipo aqui' por 'Galeria de Fotos'. Salve e atualize o navegador Inspetor de Página.
Atribuindo um novo título
Página da Galeria de Fotos atualizada
Por fim, selecione o projeto PhotoGallery e pressione F5 para executar o aplicativo. Confira todas as mudanças que funcionam conforme o esperado.
Exercício 2: Usando o Inspetor de Página em Projetos WebForms
Neste exercício, você aprenderá a visualizar e depurar uma solução WebForms usando o Inspetor de Página. Primeiro, você dará uma breve volta na ferramenta para aprender os recursos do Inspetor de página que facilitam o processo de depuração da Web. Em seguida, você trabalhará em uma página da web que contém problemas de estilo. Você aprenderá a usar o Page Inspector para encontrar o código-fonte que gera o problema e corrigi-lo.
Tarefa 1 – Explorando o Inspetor de Página
Nesta tarefa, você aprenderá a usar os recursos do Inspetor de Página no contexto de um projeto WebForms que mostra uma galeria de fotos.
Abra a solução Begin localizada na pasta Source/Ex2-WebForms/Begin/ .
Você precisará baixar alguns pacotes NuGet ausentes antes de continuar. Para fazer isso, clique no menu Projeto e selecione Gerenciar Pacotes NuGet.
Na caixa de diálogo Gerenciar Pacotes NuGet, clique em Restaurar para baixar pacotes ausentes.
Por fim, crie a solução clicando em Compilar | Compilar Solução.
Observação
Uma das vantagens de usar o NuGet é que você não precisa enviar todas as bibliotecas em seu projeto, reduzindo o tamanho do projeto. Com o NuGet Power Tools, especificando as versões do pacote no arquivo Packages.config, você poderá baixar todas as bibliotecas necessárias na primeira vez que executar o projeto. É por isso que você terá que executar essas etapas depois de abrir uma solução existente neste laboratório.
No Gerenciador de Soluções, localize Default.aspx página, clique com o botão direito do mouse nela e selecione Exibir no Inspetor de Página.
Abrindo Default.aspx com o Inspetor de Página
A janela Inspetor de página mostrará Default.aspx.
Exibindo Default.aspx no Inspetor de Página
A ferramenta Inspetor de Página é integrada ao seu ambiente do Visual Studio. O inspetor contém um navegador incorporado, juntamente com um poderoso criador de perfil HTML que mostrará o código selecionado. Observe que você não precisa executar a solução para ver a aparência de suas páginas.
Observação
Quando a largura do navegador do Inspetor de Página for menor que a largura da página aberta, você não verá a página corretamente. Se isso acontecer, ajuste a largura do Inspetor de Página.
Clique na guia Arquivos no Inspetor de Página.
Você verá todos os arquivos de origem que estão compondo a página Padrão renderizada. Esse é um recurso útil para identificar todos os elementos rapidamente, especialmente quando você está trabalhando com controles de usuário e páginas mestras. Observe que você também pode navegar para cada um dos arquivos.
A guia Arquivos
Clique no botão Alternar modo de inspeção, localizado à esquerda das guias.
Esta ferramenta permitirá que você selecione qualquer elemento da página e veja seu código HTML e .aspx fonte.
Alternar o botão Modo de inspeção
No navegador Inspetor de Página, mova o mouse sobre os elementos da página. Enquanto você move o ponteiro do mouse sobre qualquer parte da página renderizada, o tipo de elemento é exibido e a marcação ou o código de origem correspondente é realçado no editor do Visual Studio.
Modo de inspeção em ação
Observação
Não maximize a janela Inspetor de página ou você não poderá ver a guia de visualização mostrando o código-fonte. Se você clicar no elemento no Inspetor de Página quando ele estiver maximizado, o código-fonte da seleção aparecerá, mas ocultará a janela do Inspetor de Página.
Se você prestar atenção a Default.aspx arquivo, notará que a parte do código-fonte que gera o elemento selecionado é destacada. Esse recurso facilita a edição de arquivos de origem longos, fornecendo uma maneira direta e rápida de acessar o código.
Inspecionando elementos
Clique no botão Alternar modo de inspeção (
), localizado nas guias Inspetor de página, para desativar o cursor.Selecione a guia HTML para exibir o código HTML renderizado no navegador Inspetor de página.
No código HTML, localize o item da lista com o link Koala e selecione-o.
Observe que, quando você seleciona o código, a saída correspondente é destacada automaticamente navegador. Esse recurso é útil para ver como um bloco HTML é renderizado na página.
Selecionando um elemento HTML na página
Clique no botão Alternar modo de inspeção para ativar o modo de inspeção e clique na barra de navegação. À direita do código HTML, no painel Estilos, você verá uma lista com os estilos CSS aplicados ao elemento selecionado.
Observação
como o cabeçalho faz parte do layout do site, o Inspetor de Página também abrirá o arquivo Site.Master e realçará o segmento de código afetado.
Descobrindo estilos e arquivos de origem de um elemento selecionado
Com o ponteiro de inspeção de alternância ativado, mova o ponteiro do mouse abaixo da barra de menus e clique no semicírculo em branco.
Selecionando um elemento
No painel Estilos, localize o item background-image no grupo .main-content . Desmarque a imagem de fundo e veja o que acontece. Você notará que o navegador refletirá as alterações imediatamente e o círculo ficará oculto.
Observação
As alterações aplicadas na guia Estilos do Inspetor de página não afetam a folha de estilo original. Você pode desmarcar estilos ou alterar seus valores quantas vezes quiser, mas eles serão restaurados após a atualização da página.
Ativando e desativando estilos CSS
Agora, clique no texto 'seu logotipo aqui' no cabeçalho usando o modo de inspeção.
Na guia Estilos, localize o atributo CSS font-size no grupo .site-title. Clique duas vezes no atributo uma vez para editar seu valor. Substitua o valor de 2,3em por 3em e pressione ENTER. Observe que o título parece maior.
Alteração de valores CSS no Inspetor de páginas
Clique na guia Estilos de rastreamento, localizada no painel direito do Inspetor de páginas. Essa é uma maneira alternativa de ver todos os estilos aplicados à seleção, ordenados pelo nome do atributo.
Traçado de estilos CSS do elemento selecionado
Outro recurso do Inspetor de Página é o painel Layout. Usando o modo de inspeção, selecione a barra de navegação e clique na guia Layout no painel direito. Você verá o tamanho exato do elemento selecionado, bem como seu deslocamento, margem, preenchimento e tamanho da borda. Observe que você também pode modificar os valores dessa exibição.
Layout do elemento no Inspetor de Página
Tarefa 2 – Localizando e corrigindo problemas de estilo na Galeria de Fotos
Como você diagnosticaria problemas de páginas da Web com versões anteriores do Visual Studio? Você provavelmente está familiarizado com as ferramentas de depuração da Web que são executadas fora do IDE do Visual Studio, como as Ferramentas de Desenvolvedor do Internet Explorer ou o Firebug. Os navegadores entendem apenas HTML, scripts e estilos, enquanto uma estrutura subjacente gera o HTML que será renderizado. Por esse motivo, muitas vezes você precisa implantar todo o site para ver a aparência das páginas da web.
Você provavelmente seguiu estas etapas quando quis detectar e corrigir um problema em seu site:
- Execute a solução no Visual Studio ou implante a página no servidor Web.
- No navegador, abra as ferramentas de desenvolvedor que você usa ou simplesmente abra o código-fonte e os estilos e tente corresponder ao problema. Para encontrar os arquivos envolvidos, você teria usado os recursos "Pesquisar" ou "Pesquisar em arquivos" com o nome das classes de estilo.
- Assim que o erro for detectado, pare o navegador da Web e o servidor.
- Limpe o cache do navegador.
- Retorne ao Visual Studio para aplicar uma correção. Repita todas as etapas para testar.
Como não há WYSIWYG real em ASP.NET WebForms, alguns problemas de estilo são detectados em um estágio posterior, após a execução ou implantação. Agora, com o Page Inspector, é possível visualizar qualquer página sem executar a solução.
Nesta tarefa, você usará o inspetor de páginas para corrigir alguns problemas do aplicativo Galeria de fotos. Nas etapas a seguir, você detectará e corrigirá rapidamente algum problema de estilo simples no cabeçalho.
Usando a Inspeção de página, localize os links Registrar e Fazer login no lado esquerdo do cabeçalho.
Observe que o link não é exibido no local esperado à direita. Agora você alinhará o link à direita e o reestilizará de acordo.
Link de login posicionado à esquerda
Com a opção Alternar modo de inspeção selecionada, selecione o link Fazer login para abrir seu código.
Observe que o código-fonte do link está localizado no arquivo Site.Master , não na página Default.aspx, que é o lugar que você pode procurar em primeiro lugar; você foi colocado diretamente no arquivo de origem correto.
Na guia Estilos, localize e clique na <seção> #login item, que é o contêiner HTML para esses links.
Observe que o estilo #login é localizado automaticamente em Site.css depois que você clica. Além disso, o código agora está destacado.
Selecionando os estilos CSS
Remova o comentário do atributo text-align no código realçado removendo os caracteres de abertura e fechamento e salve o arquivo Site.css .
O Inspetor de Página está ciente de todos os diferentes arquivos que compõem a página atual e pode detectar quando qualquer um desses arquivos é alterado. Ele alerta sempre que a página atual no navegador não está sincronizada com os arquivos de origem.
No navegador Inspetor de Página, clique na barra localizada abaixo da barra de endereço para salvar as alterações e recarregar a página.
Recarregando a página
Os links estão agora à direita, mas ainda parecem uma lista com marcadores. Agora, você removerá os marcadores e alinhará os links horizontalmente.
Página atualizada
Usando o modo de inspeção, selecione qualquer um dos <itens li> que contenham os links "Registrar" e "Entrar". Em seguida, clique na <seção> #login item para acessar Styles.css código.
Encontrando o estilo
Em Style.css, remova o comentário do código para #login itens li . O estilo que você está adicionando ocultará o marcador e exibirá os itens horizontalmente.
Reestilizando os links de login
Salve Style.css arquivo e clique uma vez na barra localizada abaixo do endereço para recarregar a página. Observe que os links aparecem corretamente.
Links alinhados ao lado direito
Por fim, você alterará o título do cabeçalho. Em vez de pesquisar o texto 'seu logotipo aqui' em todos os arquivos, use o modo de inspeção para clicar no texto e acessar o código-fonte que o gera.
Encontrando o título do site
Agora que você está no Site.Master, substitua o texto 'seu logotipo aqui' por 'Galeria de fotos'. Salve e atualize o navegador Inspetor de Página.
Página da Galeria de Fotos atualizada
Por fim, pressione F5 para executar o aplicativo e verificar se todas as alterações funcionam conforme o esperado.
Resumo
Ao concluir este Laboratório Prático, você aprendeu a usar o Inspetor de Página para visualizar seu aplicativo Web sem precisar recompilar e executar o site em um navegador. Além disso, você aprendeu como encontrar e corrigir bugs rapidamente acessando diretamente da saída renderizada para o código-fonte.
Apêndice A: Instalando o Visual Studio Express 2012 para Web
Você pode instalar o Microsoft Visual Studio Express 2012 para Web ou outra versão "Express" usando o Microsoft Web Platform Installer. As instruções a seguir orientam você pelas etapas necessárias para instalar o Visual Studio Express 2012 para Web usando o Microsoft Web Platform Installer.
Vá para [/iis/extensions/introduction-to-iis-express/iis-express-overview?linkid=9810169](/iis/extensions/introduction-to-iis-express/iis-express-overview?linkid=9810169). Como alternativa, se você já instalou o Web Platform Installer, poderá abri-lo e pesquisar o produto "Visual Studio Express 2012 for Web with Windows Azure SDK".
Clique em Instalar agora. Se você não tiver o Web Platform Installer , será redirecionado para baixá-lo e instalá-lo primeiro.
Quando o Web Platform Installer estiver aberto, clique em Instalar para iniciar a configuração.
Instalar o Visual Studio Express
Leia todas as licenças e termos dos produtos e clique em Aceito para continuar.
Aceitando os termos da licença
Aguarde até que o processo de download e instalação seja concluído.
Progresso da instalação
Quando a instalação for concluída, clique em Concluir.
Instalação concluída
Clique em Sair para fechar o Web Platform Installer.
Para abrir o Visual Studio Express para Web, vá para a tela Iniciar e comece a escrever "VS Express" e clique no bloco VS Express para Web .
Bloco do VS Express para Web