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.
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. Inspetor de Página permite decompor facilmente um site, criar rapidamente páginas do zero e diagnosticar problemas rapidamente.
Hoje em dia, temos várias estruturas da Web que criam sites flexíveis e escaloná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 dá suporte ao modo de exibição de 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ê quiser reproduzir um problema.
Inspetor de Página abre 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 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. Inspetor de Página também permite modificar propriedades CSS e atributos de elemento DOM para ver as alterações refletidas imediatamente no navegador.
Este laboratório prático orientará você pelos recursos de 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 ASP.NET MVC, siga o exercício um; se você for um desenvolvedor do 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 Inspetor de Página
- Inspecionar e visualizar alterações de estilos CSS com Inspetor de Página
- Detectar e corrigir problemas em suas páginas da Web usando Inspetor de Página
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 Inspetor de Página em projetos do ASP.NET MVC
- Exercício 2: Usando 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 que você siga 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 que resulta da conclusão das etapas no exercício correspondente. Você pode usar essas soluções como diretrizes 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 Inspetor de Página em projetos do ASP.NET MVC
Neste exercício, você aprenderá a visualizar e depurar uma solução ASP.NET MVC 4 usando Inspetor de Página. Primeiro, você executará uma breve volta em torno da 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 Inspetor de Página para localizar o código-fonte que gera o problema e corrigi-lo.
Tarefa 1 – Explorando Inspetor de Página
Nesta tarefa, você aprenderá a usar o Inspetor de Página no contexto de um projeto do 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ê precisará executar essas etapas depois de abrir uma solução existente neste laboratório.
Na Gerenciador de Soluções, localize a exibição Index.cshtml na pasta do projeto /Views/Home, clique com o botão direito do mouse nela e selecione Exibir no Inspetor de Página.
Selecionando um arquivo para visualizar no Inspetor de Página
A janela Inspetor de Página mostrará a URL /Home/Index mapeada para a Exibição de origem selecionada.
O primeiro contato com Inspetor de Página
A ferramenta Inspetor de Página é integrada ao seu ambiente do Visual Studio. O inspetor contém um navegador inserido, juntamente com um poderoso criador de perfil HTML. Observe que você não precisa executar a solução para ver a aparência das suas páginas.
Observação
Quando a largura de Inspetor de Página navegador 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 redigindo a página Índice. Esse recurso ajuda a identificar todos os elementos rapidamente, especialmente quando você está trabalhando com exibições e modelos parciais. 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.
Botão Alternar 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 código-fonte 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 em Inspetor de Página quando ele for maximizado, o código-fonte da seleção será exibido, mas ocultará a janela 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 está 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 desabilitar 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 de 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 habilitar 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, 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 habilitado, mova o ponteiro do mouse para baixo da barra azul em destaque e clique no meio círculo.
Selecionando um elemento
No painel Estilos, localize o item de imagem de plano de fundo no .main-content group. Desmarque a imagem de plano de fundo e veja o que acontece. Você observará que o navegador refletirá as alterações imediatamente e o círculo ficará oculto.
Observação
As alterações aplicadas na guia Estilos Inspetor de Página não afetam a folha de estilos original. Você pode desmarcar estilos ou alterar seus valores quantas vezes desejar, mas eles serão restaurados após a atualização da página.
Habilitar e desabilitar 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 do tamanho da fonte no grupo .site-title . Clique duas vezes no valor do atributo e substitua o valor 2.3 em por 3 em e pressione ENTER. Observe que o título parece maior.
Alterando valores de CSS no Inspetor de Página
Clique na guia Estilos de Rastreamento, localizada no painel direito do Inspetor de Página. Essa é uma maneira alternativa de ver todos os estilos aplicados à seleção, ordenados pelo nome do atributo.
Rastreamento de estilos CSS do elemento selecionado
Outro recurso de 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 – Encontrar e corrigir 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 ferramentas de depuração da Web que são executadas fora do IDE do Visual Studio, como Ferramentas para Desenvolvedores de Explorer da Internet ou Firebug. Os navegadores só entendem 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 como as páginas da Web se parecem.
Você provavelmente seguiu estas etapas quando queria 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 localizar os arquivos envolvidos, você teria usado os recursos "Pesquisar" ou "Pesquisar em arquivos" com o nome das classes de estilo.
- Depois que o erro for detectado, interrompa 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 a serem testadas.
Como não há WYSIWYG real no ASP.NET MVC 4, a maioria dos problemas de estilo é detectada em um estágio posterior, depois de executar ou implantar o aplicativo Web. Agora, com Inspetor de Página, é 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 Inspetor de Página, localize os links Registrar e Fazer Logon 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á adequadamente.
Localizando os links Registrar e Fazer logon
Com Ativar/Desativar Modo de Inspeção selecionado, clique em fechar, mas não em, no 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 em 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 de #login é localizado automaticamente em Site.css depois de clicar. Além disso, o código agora está realçado.
Selecionando os estilos CSS
Remova a marca de comentário do atributo text-align no código realçado removendo os caracteres de abertura e fechamento e salve o arquivo Site.css .
Inspetor de Página está ciente de todos os arquivos diferentes que compõem a página atual e pode detectar quando qualquer um desses arquivos é alterado. Ele alerta você 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ços 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 "Fazer logon". Em seguida, clique na <seção> #login item para acessar o código Styles.css .
Localizando o estilo
Em Style.css, remova a marca de comentário do código para #login itens li . O estilo que você está adicionando ocultará o marcador e exibirá os itens horizontalmente.
Reativando os links de logon
Salve o arquivo Style.css 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 logotipo aqui e acessar o código-fonte que o gera.
Agora 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 galeria de fotos atualizada
Por fim, selecione o projeto PhotoGallery e pressione F5 para executar o aplicativo. Confira se todas as alterações funcionam conforme o esperado.
Exercício 2: Usando Inspetor de Página em projetos WebForms
Neste exercício, você aprenderá a visualizar e depurar uma solução WebForms usando Inspetor de Página. Primeiro, você executará uma breve volta em torno da ferramenta para aprender os recursos de 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 Inspetor de Página para localizar o código-fonte que gera o problema e corrigi-lo.
Tarefa 1 – Explorando Inspetor de Página
Nesta tarefa, você aprenderá a usar os recursos 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 | solução de build.
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ê precisará executar essas etapas depois de abrir uma solução existente deste laboratório.
No Gerenciador de Soluções, localize a página Default.aspx, clique com o botão direito do mouse nela e selecione Exibir em Inspetor de Página.
Abrindo Default.aspx com Inspetor de Página
A janela Inspetor de Página mostrará Default.aspx.
Exibindo Default.aspx em Inspetor de Página
A ferramenta Inspetor de Página é integrada ao ambiente do Visual Studio. O inspetor contém um navegador inserido, 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 das suas páginas.
Observação
Quando a largura de Inspetor de Página navegador 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 redigindo 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 até cada um dos arquivos.
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 a origem .aspx.
Botão Alternar 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 de origem ou código correspondente é realçada 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 em Inspetor de Página quando ele for maximizado, o código-fonte da seleção será exibido, mas ocultará a janela Inspetor de Página.
Se você prestar atenção ao arquivo Default.aspx , observará que a parte do código-fonte que gera o elemento selecionado está 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 ( ), localizado em Inspetor de Página guias, para desabilitar 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 de lista com o link Coala 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 um elemento HTML na página
Clique no botão Alternar Modo de Inspeção para habilitar 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, Inspetor de Página também abrirá o arquivo Site.Master e destacará 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 habilitado, mova o ponteiro do mouse abaixo da barra de menus e clique no meio círculo em branco.
Selecionando um elemento
No painel Estilos, localize o item de imagem de plano de fundo no .main-grupo de conteúdo. Desmarque a imagem de plano de fundo e veja o que acontece. Você observará que o navegador refletirá as alterações imediatamente e o círculo ficará oculto.
Observação
As alterações aplicadas na guia Estilos de Inspetor de Página não afetam a folha de estilos original. Você pode desmarcar estilos ou alterar seus valores quantas vezes desejar, mas eles serão restaurados depois de atualizar a página.
Habilitar e desabilitar estilos CSS
Agora, clique no texto "seulogotipo aqui" no cabeçalho usando o modo de inspeção.
Na guia Estilos , localize o atributo CSS do tamanho da fonte 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.
Alterando valores de CSS no Inspetor de Página
Clique na guia Estilos de Rastreamento, localizada no painel direito do Inspetor de Página. Essa é uma maneira alternativa de ver todos os estilos aplicados à seleção, ordenados pelo nome do atributo.
Rastreamento
Rastreamento de estilos CSS do elemento selecionado
Outro recurso de 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 – Encontrar e corrigir 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 Ferramentas de Desenvolvedor de Explorer da Internet ou Firebug. Os navegadores só entendem 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 como as páginas da Web se parecem.
Você provavelmente seguiu estas etapas quando queria 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 localizar os arquivos envolvidos, você teria usado os recursos "Pesquisar" ou "Pesquisar em arquivos" com o nome das classes de estilo.
- Depois que o erro for detectado, interrompa 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 a serem testadas.
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 Inspetor de Página, é 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 Logon 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á adequadamente.
Link de logon posicionado à esquerda
Com Alternar Modo de Inspeção selecionado, selecione o link Fazer Logon 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 onde 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 de #login é localizado automaticamente em Site.css depois de clicar. Além disso, o código agora está realçado.
Selecionando os estilos CSS
Remova a marca de comentário do atributo text-align no código realçado removendo os caracteres de abertura e fechamento e salve o arquivo Site.css .
Inspetor de Página está ciente de todos os arquivos diferentes que compõem a página atual e pode detectar quando qualquer um desses arquivos é alterado. Ele alerta você 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ços 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 "Fazer logon". Em seguida, clique na <seção> #login item para acessar o código Styles.css .
Localizando o estilo
Em Style.css, remova a marca de comentário do código para #login itens li . O estilo que você está adicionando ocultará o marcador e exibirá os itens horizontalmente.
Reativando os links de logon
Salve o arquivo Style.css 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.
Localizando 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.
de Fotos atualizada
Página galeria de fotos atualizada
Por fim, pressione F5 para executar o aplicativo marcar todas as alterações funcionarem conforme o esperado.
Resumo
Ao concluir este Hands-On Lab, você aprendeu a usar Inspetor de Página para visualizar seu aplicativo Web sem precisar recompilar e executar o site em um navegador. Além disso, você aprendeu a localizar 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 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 Microsoft Web Platform Installer.
Vá para [https://go.microsoft.com/?linkid=9810169](https://go.microsoft.com/?linkid=9810169). Como alternativa, se você já tiver instalado o Web Platform Installer, poderá abri-lo e pesquisar o produto "Visual Studio Express 2012 para Web com o SDK do Windows Azure".
Clique em Instalar Agora. Se você não tiver o Web Platform Installer , será redirecionado para baixá-lo e instalá-lo primeiro.
Depois que o Web Platform Installer estiver aberto, clique em Instalar para iniciar a instalação.
Instalar Visual Studio Express
Leia todas as licenças e termos dos produtos e clique em Aceito para continuar.
Aceitando os termos de 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 Visual Studio Express para Web, vá para a tela Inicial e comece a escrever "VS Express" e clique no bloco DO VS Express para Web.
Bloco do VS Express para Web
Comentários
https://aka.ms/ContentUserFeedback.
Em breve: ao longo de 2024, vamos eliminar problemas do GitHub como o mecanismo de comentários para conteúdo e substituí-lo por um novo sistema de comentários. Para obter mais informações, consulte:Enviar e exibir comentários de