Uso do Inspetor de Página no Visual Studio 2012

por Equipe de Campos da Web

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:


Exercícios

Este laboratório prático inclui os seguintes exercícios:

  1. Exercício 1: Usando Inspetor de Página em projetos do ASP.NET MVC
  2. 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.

  1. Abra a solução Begin localizada na pasta Source/Ex1-MVC4/Begin/ .

    1. Você precisará baixar alguns pacotes NuGet ausentes antes de continuar. Para fazer isso, clique no menu Projeto e selecione Gerenciar Pacotes NuGet.

    2. Na caixa de diálogo Gerenciar Pacotes NuGet , clique em Restaurar para baixar pacotes ausentes.

    3. 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.

  2. 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

    Selecionando um arquivo para visualizar no Inspetor de Página

  3. A janela Inspetor de Página mostrará a URL /Home/Index mapeada para a Exibição de origem selecionada.

    O primeiro contato com PageInspector

    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.

  4. 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.

    Guia Arquivos

    A guia Arquivos

  5. 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 Desativar-Inspeção-Modo

    Botão Alternar Modo de Inspeção

  6. 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.

    Captura de tela mostrando a janela Inspetor de Página e o editor do Visual Studio com o tipo de elemento exibido e a marcação de origem correspondente realçada.

    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.

    Captura de tela da janela Inspetor de Página e do arquivo Index.cshtml do editor do Visual Studio mostrando que a parte do código-fonte que gera o elemento selecionado está realçada.

    Inspecionando elementos

  7. Clique no botão Alternar Modo de Inspeção (selecione a guia HTML para exibir o código HTML renderizado no navegador Inspetor de Página. ) para desabilitar o cursor.

  8. Selecione a guia HTML para exibir o código HTML renderizado no navegador Inspetor de Página.

  9. 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

    Selecionando o elemento HTML na página

  10. 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

    Descobrindo estilos e arquivos de origem de um elemento selecionado

  11. 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.

    Captura de tela da janela Inspetor de Página mostrando o ponteiro do mouse selecionando o meio círculo abaixo da barra azul em destaque no canto superior esquerdo da tela.

    Selecionando um elemento

  12. 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

    Habilitar e desabilitar estilos CSS

  13. Agora, clique no texto "seu logotipo aqui" no cabeçalho usando o modo de inspeção.

  14. 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 nos valores de CSS Inspetor de Página

    Alterando valores de CSS no Inspetor de Página

  15. 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

    Rastreamento de estilos CSS do elemento selecionado

  16. 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.

    Captura de tela mostrando a barra de navegação com a guia Layout selecionada exibindo um diagrama do layout do elemento.

    Layout do elemento no Inspetor de Página

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:

  1. Execute a Solução no Visual Studio ou implante a página no servidor Web.
  2. 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.
  3. Depois que o erro for detectado, interrompa o navegador da Web e o servidor.
  4. Limpe o cache do navegador.
  5. 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.

  1. 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

    Localizando os links Registrar e Fazer logon

  2. 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.

  3. 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.

    Captura de tela da guia Estilos, na barra de navegação, os estilos CSS para logon são selecionados com o código correspondente realçado.

    Selecionando os estilos CSS

  4. 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.

  5. No navegador Inspetor de Página, clique na barra localizada abaixo da barra de endereços para recarregar a página.

    Captura de tela do navegador Inspetor de Página exibindo a barra localizada abaixo da barra de endereços usada 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.

    Captura de tela do canto superior direito da janela Inspetor de Página mostrando os links Registrar e Fazer Logon exibidos como uma lista com marcadores.

    Página atualizada

  6. 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 .

    Captura de tela mostrando a janela Inspetor de Página no modo de inspeção e selecionando os links Registrar e Fazer Logon para acessar o código Styles.css.

    Localizando o estilo

  7. 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.

    Captura de tela de Style.css reestilando os links de logon para exibição horizontal.

    Reativando os links de logon

  8. 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.

    Captura de tela do canto superior direito da janela Inspetor de Página mostrando os links Registrar e Fazer Logon alinhados horizontalmente.

    Links alinhados ao lado direito

  9. 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.

  10. 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

    Atribuindo um novo título

    Página galeria de fotos

    Página galeria de fotos atualizada

  11. 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.

  1. Abra a solução Begin localizada na pasta Source/Ex2-WebForms/Begin/ .

    1. Você precisará baixar alguns pacotes NuGet ausentes antes de continuar. Para fazer isso, clique no menu Projeto e selecione Gerenciar Pacotes NuGet.

    2. Na caixa de diálogo Gerenciar Pacotes NuGet , clique em Restaurar para baixar pacotes ausentes.

    3. 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.

  2. 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

    Abrindo Default.aspx com Inspetor de Página

  3. A janela Inspetor de Página mostrará Default.aspx.

    Exibindo Default.aspx em Inspetor de Página

    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.

  4. 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

    A guia Arquivos

  5. 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

    Botão Alternar Modo de Inspeção

  6. 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.

    Captura de tela da janela Inspetor de Página e do editor do Visual Studio com o tipo de elemento exibido e o código correspondente está realçado.

    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.

    Captura de tela da janela Inspetor de Página e do arquivo Default.aspx do editor do Visual Studio mostrando que a parte do código-fonte que gera o elemento selecionado está realçada.

    Inspecionando elementos

  7. Clique no botão Alternar Modo de Inspeção (Select-the-HTML-tab-to-display-the-HTML-code-rendered-in-the-Page-Inspector-browser. ), localizado em Inspetor de Página guias, para desabilitar o cursor.

  8. Selecione a guia HTML para exibir o código HTML renderizado no navegador Inspetor de Página.

  9. 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

    Selecionando um elemento HTML na página

  10. 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 WebForms

    Descobrindo estilos e arquivos de origem de um elemento selecionado

  11. 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.

    Captura de tela do canto superior esquerdo da janela Inspetor de Página mostrando o ponteiro do mouse selecionando o meio círculo abaixo da barra em destaque azul.

    Selecionando um elemento

  12. 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 CSS2

    Habilitar e desabilitar estilos CSS

  13. Agora, clique no texto "seulogotipo aqui" no cabeçalho usando o modo de inspeção.

  14. 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 CSS no Page Inspector2

    Alterando valores de CSS no Inspetor de Página

  15. 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.

    de estilos CSS do rastreamento deRastreamento

    Rastreamento de estilos CSS do elemento selecionado

  16. 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.

    Captura de tela da barra de navegação com a guia Layout selecionada exibindo um diagrama do layout do elemento.

    Layout do elemento no Inspetor de Página

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:

  1. Execute a Solução no Visual Studio ou implante a página no servidor Web.
  2. 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.
  3. Depois que o erro for detectado, interrompa o navegador da Web e o servidor.
  4. Limpe o cache do navegador.
  5. 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.

  1. 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 no

    Link de logon posicionado à esquerda

  2. 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.

  3. 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.

    Captura de tela mostrando a guia Estilos na barra de navegação em que os estilos CSS para logon são selecionados com o código correspondente realçado.

    Selecionando os estilos CSS

  4. 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.

  5. 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.

    Captura de tela do navegador Inspetor de Página mostrando a barra localizada abaixo da barra de endereços usada 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.

    Captura de tela exibindo o canto superior direito da janela Inspetor de Página mostrando os links Registrar e Fazer Logon como uma lista com marcadores.

    Página atualizada

  6. 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 .

    Captura de tela da janela Inspetor de Página no modo de inspeção e selecionando os links Registrar e Fazer Logon para acessar o código Styles.css.

    Localizando o estilo

  7. 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.

    Captura de tela de Style.css adicionando o estilo para que os links de logon sejam exibidos horizontalmente.

    Reativando os links de logon

  8. 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.

    Captura de tela mostrando o canto superior direito da janela Inspetor de Página exibindo os links Registrar e Fazer logon alinhados horizontalmente.

    Links alinhados ao lado direito

  9. 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

    Localizando o título do site

  10. 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

    Página galeria de fotos atualizada

  11. 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.

  1. 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".

  2. Clique em Instalar Agora. Se você não tiver o Web Platform Installer , será redirecionado para baixá-lo e instalá-lo primeiro.

  3. Depois que o Web Platform Installer estiver aberto, clique em Instalar para iniciar a instalação.

    Instalar Visual Studio Express

    Instalar Visual Studio Express

  4. Leia todas as licenças e termos dos produtos e clique em Aceito para continuar.

    Aceitando os termos de licença

    Aceitando os termos de licença

  5. Aguarde até que o processo de download e instalação seja concluído.

    Progresso da instalação

    Progresso da instalação

  6. Quando a instalação for concluída, clique em Concluir.

    Instalação concluída

    Instalação concluída

  7. Clique em Sair para fechar o Web Platform Installer.

  8. 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

    Bloco do VS Express para Web