Nota
O acesso a esta página requer autorização. Pode tentar iniciar sessão ou alterar os diretórios.
O acesso a esta página requer autorização. Pode tentar alterar os diretórios.
por Tim Ammann
O Page Inspector para Visual Studio 2012 é uma ferramenta de desenvolvimento web com navegador integrado. Selecione qualquer elemento no navegador integrado e o Inspetor de Páginas destaca instantaneamente a fonte e o CSS do elemento. Pode navegar por qualquer página da sua aplicação, encontrar rapidamente as fontes de marcação renderizada e usar ferramentas de navegador diretamente no ambiente Visual Studio.
Este tutorial mostra como ativar o Modo de Inspeção e depois localizar e editar rapidamente regras CSS e texto dentro do seu projeto web. O tutorial utiliza um Projeto de Aplicação de Formulários Web, mas também pode usar o Inspetor de Páginas para projetos de sites web e aplicações MVC .
O tutorial tem as seguintes secções:
Use o Inspetor de Páginas para visualizar a aplicação
Use o Inspetor de Páginas para Fazer Alterações à Marcação
Modo de Inspeção e a Janela HTML
Pré-requisitos
Observação
Para obter a versão mais recente do Page Inspector, use o Web Platform Installer para instalar o Azure SDK para .NET 2.0.
O Inspetor de Páginas está incluído com as Ferramentas de Desenvolvimento Web da Microsoft. A versão mais recente é a 1.3. Para verificar a versão que tem, execute o Visual Studio e selecione Sobre o Microsoft Visual Studio no menu de Ajuda .
Criar uma Aplicação Web
Primeiro, irá criar uma aplicação web com a qual irá usar o Page Inspector. No Visual Studio, escolhe Fichar>Novo Projeto. À esquerda, expanda Visual C#, selecione Web e depois selecione ASP.NET Web Forms Application.
Clique em OK.
A aplicação abre na vista de código-fonte.
Agora que tem uma aplicação para usar, pode usar o Page Inspector para a analisar e modificar.
Use Inspetor de Páginas para visualizar a aplicação
De seguida, irá visualizar a aplicação com o Page Inspector. No Explorador de Soluções, clique com o botão direito no projeto e depois escolha Ver no Inspetor de Páginas.
Por defeito, quando o Page Inspector é iniciado pela primeira vez, está acoplado como uma janela estreita no lado esquerdo do ambiente Visual Studio. Deixa-o acoplado do lado esquerdo e ajusta-o numa largura confortável para ti, ou encaixa-o numa das áreas de ferramentas no topo, em baixo ou à direita:
Se desacoplares a janela do Page Inspector, podes colocá-la fora do Visual Studio, ou até num segundo monitor se tiveres um. No entanto, para conseguir alternar entre o Página Inspetor e o Visual Studio quando a janela do Página Inspetor estiver desacoplada, vá a Ferramentas>Opções>Ambiente>Separadores e Janelas, e em Tabulação, desmarque a caixa de seleção chamada Janelas de ferramentas flutuantes sempre no topo da janela principal:
O painel superior da janela do Inspetor de Páginas mostra a página atual numa janela do navegador. O painel inferior mostra a página em marcação HTML à esquerda, e alguns separadores à direita que permitem inspecionar diferentes aspetos da página. O painel inferior é semelhante ao F12 Developer Tools no Internet Explorer. (No entanto, ao contrário das ferramentas de desenvolvimento, podes usar o Page Inspector diretamente no Visual Studio.)
Neste tutorial, irá usar o painel do navegador do Inspetor de Páginas e os separadores HTML e Estilos para o ajudar a navegar rapidamente e a fazer alterações na aplicação.
Ativar Modo de Inspeção
A seguir, verá como funciona o Modo de Inspeção do Inspetor de Páginas. Na janela do Inspetor de Páginas, clique no botão Inspecionar .
Para ver o modo de inspeção em ação, mova o rato sobre diferentes partes da página dentro da janela do navegador do Inspetor de Páginas. À medida que faz, o ponteiro do mouse muda para um grande sinal de mais, e o elemento debaixo é destacado.
Ao mover o ponteiro do rato, note que
O conteúdo na vista de Fonte muda para mostrar a marcação correspondente ao elemento selecionado na página. A marcação relevante é realçada. Se a fonte estiver noutro ficheiro, esse ficheiro é aberto na vista de Fonte com a marcação relevante destacada.
A marcação exibida no separador HTML do Inspetor de Páginas também muda para corresponder ao elemento selecionado na página. Na aba HTML, a marcação relevante está delineada.
O separador Estilos mostra as regras CSS relevantes para a seleção atual.
Use o Inspetor de Páginas para Fazer Alterações à Marcação
Agora verá como pode usar o Page Inspector para encontrar e fazer alterações a marcações ou textos cuja localização pode não ser imediatamente óbvia.
Coloque o Inspetor de Páginas em Modo de Inspeção e depois desça até ao final da página inicial.
Assim que entrar na zona do rodapé, o Inspector de Página abre o ficheiro de layout Site.Master na vista Código-fonte num separador temporário à direita dos outros separadores e destaca a secção da página principal que tenha selecionado. Isto mostra-lhe como o Page Inspector pode encontrar e mostrar conteúdo numa página que pode realmente vir de um ficheiro diferente daquele que abriu originalmente.
Na janela do navegador do Page Inspector, mova o ponteiro do rato sobre a linha com o aviso de direitos de autor .
Na página Site.Master , a linha correspondente está destacada.
Adiciona algum texto no final da linha no ficheiro Site.Master .
<p>© <%: DateTime.Now.Year %> - A minha aplicação ASP.NET é fantástica!</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áginas.
Poderias pensar que o rodapé estava na página Default.aspx , mas afinal estava na página principal de layout, e o Page Inspector encontrou-o para ti.
Modo de Inspeção e a Janela HTML
De seguida, vais dar uma vista de olhos rápida à janela HTML e como ela mapeia os elementos para ti.
Coloque o Inspetor de Páginas em modo de inspeção.
Clique na parte superior da página que diz "o seu logótipo aqui". Está a examinar um elemento específico com mais detalhe, por isso o ecrã na janela do navegador já não muda ao mover o ponteiro do rato.
Agora mova o ponteiro do rato para a janela HTML . À medida que move o ponteiro do rato, o Inspetor de Páginas delineia o elemento dentro da janela HTML e destaca o elemento correspondente na janela do navegador.
Como antes, o Page Inspector abre o ficheiro Site.Master para si numa aba temporária. Clique no separador Site.Master e a marcação correspondente é destacada na <secção do> cabeçalho:
Pré-visualizar Alterações CSS na janela de estilos
De seguida, verá como pode usar a janela de Estilos do Inspetor de Páginas para pré-visualizar alterações ao CSS.
Clique no botão Inspecionar para colocar o Inspetor de Páginas em Modo de Inspeção.
Na janela do navegador do Inspetor de Páginas, mova o ponteiro do rato sobre a secção "Página Inicial" até aparecer a etiqueta div.content-wrapper .
Clique uma vez na secção div.content-wrapper e depois mova o ponteiro do rato para a janela Estilos . No seletor de classe .featured .content-wrapper, limpe e selecione a caixa de seleção para a propriedade de cor de fundo.
Repare como a alteração é pré-visualizada instantaneamente na janela do navegador do Inspetor de Páginas.
Selecione novamente a caixa, depois clique duas vezes no valor da propriedade e altere para red. A alteração manifesta-se imediatamente:
A janela de Estilos facilita testar e pré-visualizar as alterações CSS antes de as comprometeres com a própria folha de estilo.
CSS Sincronização Automática
Observação
Esta funcionalidade requer a versão 1.3 do Page Inspector.
A funcionalidade CSS Auto-Sync permite-lhe editar diretamente um ficheiro CSS e ver as alterações imediatamente no navegador Page Inspector.
Clique em Inspecionar para colocar o Inspetor de Páginas em Modo de Inspeção.
No navegador Page Inspector, mova o ponteiro do rato sobre a secção "Página Inicial" até aparecer o rótulo div.content-wrapper . Clica 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áginas abre o ficheiro CSS que define este estilo (Site.css) e destaca o estilo CSS correspondente.
Agora altera o valor de background-color para "vermelho". A alteração aparece imediatamente no navegador Page Inspector.
Utilização do seletor de cores CSS
De seguida, vais aprender a usar o Page Inspector para encontrar e alterar rapidamente o CSS do texto destacado na aplicação predefinida. Neste exemplo, decidiu que não gosta do realce azul e quer mudar para outra cor.
Clique no botão Inspecionar .
Na janela do navegador do Inspector de Páginas, mova o ponteiro do rato sobre o texto destacado "vídeos, tutoriais e exemplos" para que a label CSS "mark" apareça.
Clica no texto para o selecionar. O seletor de marcas CSS correspondente aparece na parte inferior da janela de Estilos .
Clica no seletor de marcas. Isto abre o ficheiro Site.css da aplicação web. Clique na aba Site.css e o CSS correspondente do seletor é destacado.
Selecione e remova a linha com a propriedade de cor de fundo.
Agora, irá usar o novo seletor de cor CSS do Visual Studio 2012 para escolher uma nova cor para a propriedade de cor de fundo do mark.
Usando o Visual Studio 2012 CSS Color Picker
O editor CSS no Visual Studio 2012 tem um seletor de cores que facilita a escolha e inserção de cores. Tem uma barra de cor simples e um seletor deslizante que oferece um controlo mais preciso.
O seletor de cores inclui uma paleta padrão de cores, suporta nomes de cores padrão, códigos hash, cores RGB, RGBA, HSL e HSLA, e mantém uma lista das cores que utilizou mais recentemente no documento.
Na linha onde estava a propriedade de cor de fundo, escreva "bc" e pressione a seta para baixo uma vez.
Quando escreve o primeiro carácter de cada palavra numa propriedade separada por hífen, como "background-color", o IntelliSense filtra a lista para mostrar apenas as propriedades que correspondem:
Agora escreve um cólon. Quando o fazes, é inserido o nome completo da propriedade da cor de fundo. Digite # ou rgb(, e a barra seletora de cor aparece:
Para ver como funciona a barra seletora de cores, clique nas cores com o ponteiro do rato, ou pressione a seta para baixo e depois use as setas esquerda e direita para percorrer as cores. Quando visita uma cor, o valor correspondente para a propriedade de cor de fundo é pré-visualizado:
Neste ponto, podias carregar em Enter para selecionar o valor e depois um ponto e vírgula (;) para completar a entrada CSS. Por agora, segue para a próxima secção para veres como funciona o pop-down do seletor de cores.
Usar o seletor de cores Pop-Down
Quando a barra de cores não tem exatamente a cor que procuras, podes usar o pop-down do seletor de cores.
Para o abrir, clique no duplo chevron na extremidade direita da barra de cor, ou pressione a seta para baixo uma ou duas vezes no teclado.
Clique numa cor da barra vertical à direita. Isto mostra um gradiente para essa cor na janela principal. Escolha uma cor diretamente da barra vertical pressionando Enter, ou clique em qualquer ponto da janela principal para escolher com maior precisão.
Se houver uma cor no ecrã do teu computador que queiras usar (não tem de estar dentro da interface do Visual Studio), podes capturar o seu valor usando a ferramenta conta-gotas no canto inferior direito.
Também podes alterar a opacidade de uma cor movendo o slider na parte inferior do seletor de cores. Ao fazê-lo, os valores de cor são alterados para valores RGBA porque o formato RGBA pode representar opacidade.
Depois de escolher uma cor, pressione Enter e depois digite um ponto e vírgula para completar a entrada da cor de fundo no ficheiro Site.css .
A Barra de Atualização do Inspetor de Páginas
O Inspetor de Páginas deteta imediatamente a alteração no ficheiro Site.css (ou em qualquer ficheiro da aplicação) e apresenta um alerta numa barra de atualização.
Para guardar todos os seus ficheiros e atualizar o navegador do Inspetor de Páginas, pressione Ctrl+Alt+Enter ou clique na barra de atualização. A alteração na cor de destaque aparece no navegador:
Repara que atualizou convenientemente o navegador Page Inspector diretamente do ambiente Visual Studio. Usar o Page Inspector em vez de um navegador externo permite-lhe permanecer no editor quando desenvolve as suas aplicações web.
Ver também
Apresentando o Page Inspector (vídeo do Canal 9)