Usando Inspetor de Página com um navegador integrado no ASP.NET MVC
por Tim Ammann
Inspetor de Página no Visual Studio 2012 é uma ferramenta de desenvolvimento para a Web com um navegador integrado. Selecione qualquer elemento no navegador integrado e Inspetor de Página realça instantaneamente a origem e o CSS do elemento. Você pode procurar qualquer modo de exibição MVC, 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 a marcação e o CSS em seu projeto Web. O tutorial usa um Projeto MVC, mas você também pode usar Inspetor de Página para Web Forms e outros aplicativos ASP.NET.
O tutorial tem as seguintes seções:
- Pré-requisitos
- Criar um aplicativo Web
- Usar Inspetor de Página para navegar até um modo de exibição
- Habilitar Modo de Inspeção
- Usar Inspetor de Página para fazer alterações na marcação
- Modo de inspeção e a janela HTML
- Visualizar alterações de CSS na janela Estilos
- Sincronização Automática do CSS
- Usando o seletor de cores CSS
- Mapeando elementos de página dinâmica para JavaScript
Pré-requisitos
Observação
Para obter a versão mais recente do Inspetor de Página, use o Web Platform Installer para instalar o SDK do Windows Azure para .NET 2.0.
Inspetor de Página é agrupada com Microsoft Web Developer Tools. A versão mais recente é a 1.3. Para marcar qual versão você tem, execute o Visual Studio e selecione Sobre o Microsoft Visual Studio no menu Ajuda.
Criar um aplicativo Web
Primeiro, crie um aplicativo Web com o qual você usará Inspetor de Página. No Visual Studio, escolha Arquivo>Novo Projeto. À esquerda, expanda Visual C#, selecione Web e, em seguida, selecione ASP.NET Aplicativo Web MVC4.
Clique em OK.
Na caixa de diálogo Novo projeto ASP.NET MVC 4 , selecione Aplicativo da Internet. Deixe o Razor como o mecanismo de exibição padrão.
O aplicativo é aberto no modo de exibição Origem .
Agora que você tem um aplicativo com o qual trabalhar, você pode usar Inspetor de Página para examiná-lo e modificá-lo.
Usar Inspetor de Página para navegar até um modo de exibição
No Visual Studio 2012, você pode clicar com o botão direito do mouse em qualquer exibição do projeto, selecionar Exibir no Inspetor de Página e Inspetor de Página descobrirá a rota e exibirá a página.
Em Gerenciador de Soluções, expanda a pasta Exibições e, em seguida, a pasta Página Inicial. Clique com o botão direito do mouse no arquivo Index.cshtml e escolha Exibir no Inspetor de Página.
Por padrão, Inspetor de Página é encaixado como uma janela no lado esquerdo do ambiente do Visual Studio. Se preferir, você pode encaixá-lo em outro lugar ou desencaixar a janela. Consulte Como organizar e encaixar janelas.
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, juntamente com algumas guias que permitem inspecionar diferentes aspectos da página. O painel inferior é semelhante ao Explorer F12 Developer Tools in Internet.
Neste tutorial, você usará as guias HTML e Estilos para navegar rapidamente e fazer alterações no aplicativo.
Modo EnableInspection
Para colocar Inspetor de Página no Modo de Inspeção, clique no botão Inspecionar. No Modo de Inspeção, quando você mantém o ponteiro do mouse sobre qualquer parte da página renderizada, a marcação ou o código-fonte correspondente é realçado.
Agora mova o mouse sobre diferentes partes da página em Inspetor de Página. Como você faz, o ponteiro do mouse muda para um sinal de adição grande e o elemento abaixo é realçado:
Conforme você move o ponteiro do mouse, o Visual Studio realça a sintaxe razor correspondente no arquivo de origem. Se o elemento HTML vier de outro arquivo de origem, o Visual Studio abrirá automaticamente o arquivo.
Em Inspetor de Página, a guia HTML mostra o HTML que foi gerado a partir da sintaxe Razor. Conforme você move o ponteiro do mouse, os elementos HTML são realçados. A guia Estilos mostra as regras CSS para o elemento .
Usar Inspetor de Página para fazer alterações na marcação
Inspetor de Página permite encontrar marcação cuja localização pode não ser óbvia. Em seguida, você pode modificar a marcação e ver as alterações resultantes.
Para ver isso, clique em Inspecionar e role até a parte inferior da página na janela Inspetor de Página.
Quando você move o ponteiro do mouse para a área do rodapé, Inspetor de Página abre o arquivo _Layout.cshtml e realça a seção da página de layout selecionada. Como você pode ver, a área do rodapé é definida no arquivo de layout e não na exibição em si.
Agora mova o ponteiro do mouse sobre a linha com o aviso de direitos autorais . Na página _Layout.cshtml, a linha correspondente é realçada.
Adicione algum texto ao final da linha no arquivo _Layout.cshtml.
<p>&cópia; @DateTime.Now.Year - My ASP.NET MVC Application Rocks!</P>
Agora, pressione Ctrl+Alt+Enter ou clique na Barra de Atualização para ver os resultados na janela Inspetor de Página navegador.
Você pode ter pensado que o rodapé foi definido em Index.cshtml, mas ele acabou por estar no _Layout.cshtml e Inspetor de Página encontrado para você.
Modo de inspeção e a janela HTML
Em seguida, você terá uma visão rápida da janela HTML e como ela mapeia elementos para você.
Clique em Inspecionar para colocar 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 seja mais alterada à medida que você move o ponteiro do mouse.
Agora, mova o ponteiro do mouse para a janela HTML . Conforme você move o ponteiro do mouse, Inspetor de Página descreve o elemento dentro da janela HTML e realça o elemento correspondente na janela do navegador.
Como antes, Inspetor de Página abre o arquivo _Layout.cshtml para você em uma guia temporária. Clique na guia temporária _Layout.cshtml e a marcação correspondente será realçada na <seção de cabeçalho> para você:
Visualizar alterações de CSS na janela Estilos
Em seguida, você usará a janela estilos Inspetor de Página para visualizar as alterações no CSS.
Clique em Inspecionar para colocar Inspetor de Página no Modo de Inspeção.
Na janela do navegador Inspetor de Página, mova o ponteiro do mouse sobre a seção "Home Page" até que o rótulo div.content-wrapper seja exibido.
Clique na seção div.content-wrapper uma vez e mova o ponteiro do mouse para a janela Estilos . A janela Estilos mostra todas as regras CSS para esse elemento. Role para baixo para encontrar o seletor de classe .content-wrapper em destaque. Agora desmarque a caixa de seleção da propriedade de cor da tela de fundo.
Observe como a alteração é visualizada instantaneamente na janela do navegador Inspetor de Página.
Marque a caixa de seleção novamente e clique duas vezes no valor da propriedade e altere-o para vermelho. A alteração é mostrada imediatamente:
A janela Estilos facilita o teste e a visualização de alterações de CSS antes de confirmar as alterações na própria folha de estilos.
Sincronização Automática do CSS
Observação
Esse recurso requer a versão 1.3 do Inspetor de Página.
O recurso de Sincronização Automática do CSS permite editar um arquivo CSS diretamente e ver as alterações imediatamente no navegador Inspetor de Página.
Clique em Inspecionar para colocar Inspetor de Página no Modo de Inspeção.
No navegador Inspetor de Página, mova o ponteiro do mouse sobre a seção "Home Page" até que o rótulo div.content-wrapper seja exibido. Clique uma vez para selecionar esse elemento.
A janela Estilos mostra todas as regras CSS para esse elemento. Role para baixo para encontrar o seletor de classe .content-wrapper em destaque. Clique em ".featured .content-wrapper". 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 para background-color "vermelho". A alteração aparece imediatamente no navegador Inspetor de Página.
Usando o seletor de cores CSS
O editor de CSS no Visual Studio 2012 tem um seletor de cores que facilita a escolha e a inserção de cores. O seletor de cores inclui uma paleta padrão de cores, 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 usadas mais recentemente no documento.
Na seção anterior, você alterou o valor da background-color propriedade . Para invocar o seletor de cores, coloque o ponto de inserção após o nome da propriedade e digite # ou rgb(.
Clique em uma cor para selecioná-la ou pressione a tecla de seta para baixo e use as teclas de seta para a esquerda e para a direita para percorrer as cores. Quando você visita uma cor, o valor hexadecimal correspondente é visualizado:
Se a barra de cores não tiver a cor exata desejada, você poderá usar o pop-down do seletor de cores. Para abri-la, 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 da barra vertical à direita. Isso mostra um gradiente para essa cor na janela main. Escolha uma cor diretamente na barra vertical pressionando Enter ou clique em qualquer ponto na janela main 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 eyedropper 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, pois o formato RGBA pode representar opacidade.
Depois de escolher uma cor, pressione Enter e digite um ponto e vírgula para concluir a entrada de cor da tela de fundo no arquivo Site.css .
A barra de atualização do Inspetor de Página
Inspetor de Página detecta imediatamente a alteração no arquivo Site.css e exibe um alerta em uma barra de atualização.
Para salvar todos os 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.
Mapeando elementos de página dinâmica para JavaScript
Em aplicativos Web modernos, os elementos na página geralmente são gerados dinamicamente com JavaScript. Isso significa que não há marcação estática (HTML ou Razor) que corresponda a esses elementos de página.
Com a versão 1.3, Inspetor de Página agora pode mapear itens que foram adicionados dinamicamente à página de volta ao código JavaScript correspondente. Para demonstrar esse recurso, usaremos o modelo SPA (Aplicativo de Página Única).
Observação
O modelo SPA requer a atualização ASP.NET and Web Tools 2012.2.
No Visual Studio, escolha Arquivo>Novo Projeto. À esquerda, expanda Visual C#, selecione Web e, em seguida, selecione ASP.NET Aplicativo Web MVC4. Clique em OK.
Na caixa de diálogo Novo projeto ASP.NET MVC 4 , selecione Aplicativo de Página Única.
Em Gerenciador de Soluções, expanda a pasta Exibições e, em seguida, a pasta Página Inicial. Clique com o botão direito do mouse no arquivo Index.cshtml e escolha Exibir no Inspetor de Página.
A primeira coisa que é exibida no navegador Inspetor de Página é uma página de logon. Clique em "Inscrever-se" e crie um nome de usuário e senha. Depois de se inscrever, o aplicativo faz logon e cria uma lista de tarefas pendentes com alguns itens de exemplo.
Clique em Inspecionar para colocar Inspetor de Página no Modo de Inspeção. No navegador Inspetor de Página, clique em um dos itens pendentes. Observe que, em vez de ser realçado em azul, o elemento é realçado em laranja, com "JS" ao lado do nome do elemento. Isso indica que o elemento foi criado dinamicamente por meio de script.
Além disso, um sublinhado laranja aparece na guia Pilha de Chamadas . Isso indica que o painel Pilha de Chamadas tem mais informações sobre o elemento .
Clique na guia Pilha de Chamadas . O painel Pilha de Chamadas mostra a pilha de chamadas para a chamada JavaScript que criou o elemento. As chamadas para bibliotecas externas, como jQuery, são recolhidas, para que você possa ver facilmente as chamadas para o script do aplicativo.
Para ver a pilha completa, incluindo chamadas para bibliotecas externas, você pode expandir os nós rotulados como "Bibliotecas Externas":
Se você clicar em um item na pilha de chamadas, o Visual Studio abrirá o arquivo de código e realçará o script correspondente.
Consulte Também
Introdução ao ASP.NET MVC 4 com o Visual Studio (ASP.net site)
Apresentando Inspetor de Página (vídeo do Canal 9)