Observação
O acesso a essa página exige autorização. Você pode tentar entrar ou alterar diretórios.
O acesso a essa página exige autorização. Você pode tentar alterar os diretórios.
por Tim Ammann
O Inspetor de Páginas do Visual Studio 2012 é uma ferramenta de desenvolvimento da Web com um navegador integrado. Selecione qualquer elemento no navegador integrado e o Inspetor de Página destaca instantaneamente a origem e o CSS do elemento. Você pode procurar qualquer página em seu aplicativo, localizar rapidamente as fontes de marcação renderizada e usar ferramentas de navegador diretamente no ambiente do Visual Studio.
Este tutorial mostra como habilitar o Modo de Inspeção e, em seguida, localizar e editar rapidamente regras CSS e texto em seu projeto Web. O tutorial usa um Projeto de Aplicativo do Web Forms, mas você também pode usar o Inspetor de Páginas para projetos do Site e aplicativos MVC .
O tutorial tem as seguintes seções:
Usar o Inspetor de Páginas para exibir o aplicativo
Usar o Inspetor de página para fazer alterações na marcação
Modo de inspeção e a janela HTML
Visualizar alterações do CSS na janela Estilos
Pré-requisitos
Observação
Para obter a versão mais recente do Page Inspector, use o Web Platform Installer para instalar o SDK do Azure para .NET 2.0.
O Inspetor de Página é fornecido com as Ferramentas de Desenvolvedor da Web da Microsoft. A versão mais recente é 1.3. Para verificar qual versão você tem, execute o Visual Studio e selecione Sobre o Microsoft Visual Studio no menu Ajuda.
Criar um Aplicativo Web
Primeiro, você criará um aplicativo Web com o qual usará o Inspetor de Páginas. No Visual Studio, escolha Arquivo>Novo Projeto. À esquerda, expanda o Visual C#, selecione Web e selecione ASP.NET Aplicativo Web Forms.
Clique em OK.
O aplicativo abre na visão de Código-fonte.
Agora que você tem um aplicativo para trabalhar, pode usar o Inspetor de Página para examiná-lo e modificá-lo.
Usar o Inspetor de Páginas para exibir o aplicativo
Em seguida, você exibirá o aplicativo com o Inspetor de Páginas. No Gerenciador de Soluções, clique com o botão direito do mouse no projeto e escolha Exibir no Inspetor de Páginas.
Por padrão, quando o Inspetor de Página é iniciado pela primeira vez, ele é ancorado como uma janela estreita no lado esquerdo do ambiente do Visual Studio. Deixe-o encaixado no lado esquerdo e defina-o para uma largura confortável para você ou encaixe-o em uma das áreas de ferramentas na parte superior, inferior ou direita:
Se você desencaixar a janela do Inspetor de Páginas, poderá colocá-la fora do Visual Studio ou até mesmo em um segundo monitor se tiver um. No entanto, para ALT+TAB alternar entre o Inspetor de Páginas e o Visual Studio quando a janela do Inspetor de Páginas estiver desencaixada, vá para Ferramentas>Opções>, Ambiente>Guias e Janelas, e, em Tab Well, desmarque a caixa de seleção chamada Janelas de ferramentas flutuantes sempre fiquem em cima da janela principal:
O painel superior da janela Inspetor de Página mostra a página atual em uma janela do navegador. O painel inferior mostra a página na marcação HTML à esquerda e algumas guias à direita que permitem inspecionar diferentes aspectos da página. O painel inferior é semelhante às Ferramentas de Desenvolvedor F12 no Internet Explorer. (No entanto, ao contrário das ferramentas de desenvolvedor, você pode usar o Inspetor de Páginas diretamente no Visual Studio.)
Neste tutorial, você usará o painel do navegador Inspetor de Páginas e as guias HTML e Estilos para ajudá-lo a navegar rapidamente e fazer alterações no aplicativo.
Habilitar modo de inspeção
Em seguida, você verá como o Modo de Inspeção do Inspetor de Página funciona. Na janela Inspetor de Página, clique no botão Inspecionar .
Para ver o modo de inspeção em ação, mova o mouse sobre diferentes partes da página na janela do navegador Do Inspetor de Páginas. Ao fazer isso, o ponteiro do mouse muda para um sinal de adição grande e o elemento abaixo é realçado:
Ao mover o ponteiro do mouse, observe que
O conteúdo no modo de exibição Origem é alterado para mostrar a marcação correspondente ao elemento selecionado na página. A marcação relevante está realçada. Se a origem estiver em outro arquivo, esse arquivo será aberto no modo de exibição Origem com a marcação relevante realçada.
A marcação exibida na guia HTML no Inspetor de Páginas também é alterada para corresponder ao elemento selecionado na página. Na guia HTML , a marcação relevante é descrita.
A guia Estilos mostra as regras CSS relevantes para a seleção atual.
Usar o Inspetor de página para fazer alterações na marcação
Agora você verá como pode usar o Inspetor de Páginas para localizar e fazer alterações na marcação ou texto cujo local pode não ser imediatamente óbvio.
Coloque o Inspetor de Página no Modo de Inspeção e role até a parte inferior da home page.
Assim que você entra na área do rodapé, o Inspetor de Páginas abre o arquivo de layout Site.Master no modo de exibição Source em uma guia temporária à direita das outras guias e realça a seção da página mestra que você selecionou. Isso mostra como o Inspetor de Páginas pode encontrar e exibir conteúdo em uma página que pode realmente vir de um arquivo diferente daquele que você abriu originalmente.
Na janela do navegador Inspetor de Páginas, mova o ponteiro do mouse sobre a linha com o aviso de direitos autorais .
Na página Site.Mestre , a linha correspondente está realçada.
Adicione algum texto ao final da linha no arquivo Site.Master .
<p>© <%: DateTime.Now.Year %> – Minha Aplicação ASP.NET é Demais!</p>
Agora, pressione Ctrl+Alt+Enter ou clique na barra de atualização para ver os resultados na janela do navegador do Inspetor de Página.
Você pode ter pensado que o rodapé estava na página Default.aspx, mas estava na página de layout principal, e o Inspetor de Página a encontrou para você.
Modo de inspeção e a janela HTML
Em seguida, você terá uma rápida olhada na janela HTML e como ela mapeia elementos para você.
Coloque o Inspetor de Página no Modo de Inspeção.
Clique na parte superior da página que diz "seu logotipo aqui". Você está examinando um elemento específico com mais detalhes, para que a exibição na janela do navegador não mude mais à medida que você move o ponteiro do mouse.
Agora mova o ponteiro do mouse para a janela HTML . À medida que você move o ponteiro do mouse, o Inspetor de Página descreve o elemento dentro da janela HTML e realça o elemento correspondente na janela do navegador.
Como antes, o Inspetor de Páginas abre o arquivo Site.Master para você em uma guia temporária. Clique na guia Site.Master e a marcação correspondente está realçada na seção de <cabeçalho> :
Visualizar alterações de CSS na janela Estilos
Em seguida, você verá como pode usar a janela Estilos do Inspetor de Páginas para visualizar as alterações no CSS.
Clique no botão Inspecionar para colocar o Inspetor de Páginas no Modo de Inspeção.
Na janela do navegador Inspetor de Página, mova o ponteiro do mouse sobre a seção "Página Inicial" até que o rótulo div.content-wrapper apareça.
Clique na seção div.content-wrapper uma vez e mova o ponteiro do mouse para a janela Estilos . Sob o seletor de classe .featured .content-wrapper, desmarque e selecione a caixa de seleção para a propriedade de cor de plano de fundo.
Observe como a alteração é visualizada instantaneamente na janela do navegador do Inspetor de Página.
Marque a caixa de seleção novamente e clique duas vezes no valor da propriedade e altere-a para red. A alteração é exibida imediatamente:
A janela Estilos facilita o teste e a visualização das alterações de CSS antes de confirmar as alterações na própria folha de estilos.
Sincronização automática de CSS
Observação
Esse recurso requer a versão 1.3 do Page Inspector.
O recurso CSS Auto-Sync permite que você edite um arquivo CSS diretamente e veja as alterações imediatamente no navegador Page Inspector.
Clique em Inspecionar para colocar o Page Inspector no Modo de Inspeção.
No navegador Inspetor de Página, mova o ponteiro do mouse sobre a seção "Página Inicial" até que o rótulo div.content-wrapper apareça. Clique uma vez para selecionar este elemento.
A janela Estilos mostra todas as regras CSS para este elemento. Role para baixo para encontrar o seletor de classe .featured .content-wrapper. Clique em ".featured .content-wrapper". O Inspetor de Página abre o arquivo CSS que define esse estilo (Site.css) e realça o estilo CSS correspondente.
Agora altere o valor de background-color para "vermelho". A alteração aparece imediatamente no navegador Inspetor de Página.
Usando o seletor de cores CSS
Em seguida, você aprenderá a usar o Inspetor de Páginas para localizar e alterar rapidamente o CSS para texto realçado no aplicativo padrão. Neste exemplo, você decidiu que não gosta do realce azul e deseja alterá-lo para outra cor.
Clique no botão Inspecionar .
Na janela do navegador Inspetor de Páginas, mova o ponteiro do mouse sobre o texto realçado "vídeos, tutoriais e exemplos" para que o rótulo de "marca" do CSS seja exibido.
Clique no texto para selecioná-lo. O seletor de marca CSS correspondente aparece na parte inferior da janela Estilos .
Clique no seletor de marca. Isso abre o arquivo Site.css para o aplicativo Web. Clique na guia Site.css, e o CSS correspondente ao seletor será destacado:
Selecione e remova a linha com a propriedade de cor de plano de fundo.
Agora você usará o novo seletor de cores do CSS do Visual Studio 2012 para escolher uma nova cor para a propriedade de cor de plano de fundo mark.
Usando o Seletor de Cores do CSS do Visual Studio 2012
O editor CSS no Visual Studio 2012 tem um seletor de cores que facilita a escolha e a inserção de cores. Ele possui uma barra de cores simples e um seletor "pop-down" que oferece controle mais preciso.
O seletor de cores inclui uma paleta de cores padrão, dá suporte a nomes de cores padrão, códigos de hash, cores RGB, RGBA, HSL e HSLA e mantém uma lista das cores que você usou mais recentemente no documento.
Na linha em que a propriedade de cor de plano de fundo estava, digite "bc" e pressione a seta para baixo uma vez.
Quando você digita o primeiro caractere de cada palavra em uma propriedade separada por hífen como "background-color", o IntelliSense filtra a lista para que você mostre apenas as propriedades que correspondem:
Agora digite dois-pontos. Quando você faz isso, o nome completo da propriedade background-color é inserido. Digite # ou rgb(e a barra do seletor de cores será exibida:
Para ver como a barra do seletor de cores funciona, clique em suas cores com o ponteiro do mouse ou pressione a tecla de seta para baixo e, em seguida, use as teclas de seta para a esquerda e para a direita para percorrer as cores. Quando você visualiza uma cor, o valor correspondente da propriedade background-color (cor de fundo) é pré-visualizado.
Neste ponto, você pode pressionar Enter para selecionar o valor e, em seguida, um ponto e vírgula (;) para concluir a entrada CSS. Por enquanto, vá para a próxima seção para que você possa ver como o pop-down do seletor de cores funciona.
Usando o seletor de cores Pop-Down
Quando a barra de cores não tiver a cor exata que você está procurando, você poderá usar o pop-down do seletor de cores.
Para abri-lo, clique na divisa dupla na extremidade direita da barra de cores ou pressione a seta para baixo uma ou duas vezes no teclado.
Clique em uma cor na barra vertical à direita. Isso mostra um gradiente para essa cor na janela principal. Escolha uma cor diretamente na barra vertical pressionando Enter ou clique em qualquer ponto na janela principal para escolher com maior precisão.
Se houver uma cor na tela do computador que você deseja usar (ela não precisa estar dentro da interface do usuário do Visual Studio), você poderá capturar seu valor usando a ferramenta conta-gotas no canto inferior direito.
Você também pode alterar a opacidade de uma cor movendo o controle deslizante na parte inferior do seletor de cores. Isso altera os valores de cor para valores RGBA porque o formato RGBA pode representar opacidade.
Depois de escolher uma cor, pressione Enter e, em seguida, digite um ponto-e-vírgula para concluir a entrada de background-color no arquivo Site.css.
A barra de atualização do Inspetor de página
O Inspetor de Página detecta imediatamente a alteração no arquivo Site.css (ou em qualquer arquivo no aplicativo) e exibe um alerta em uma barra de atualização.
Para salvar todos os seus arquivos e atualizar o navegador Inspetor de Página, pressione Ctrl+Alt+Enter ou clique na barra de atualização. A alteração na cor de realce aparece no navegador:
Observe que você atualizou convenientemente o navegador Page Inspector diretamente de dentro do ambiente do Visual Studio. Usar o Inspetor de Páginas em vez de um navegador externo permite que você permaneça no editor ao desenvolver seus aplicativos Web.
Consulte Também
Apresentando o Page Inspector (vídeo do Channel 9)
Mensagens de erro do inspetor de página (MSDN)