image

O Page Inspector é um novo recurso do Visual Studio 2012. Ele consiste de um navegador que te permite selecionar elementos HTML, inspecionar suas propriedades e modificar o HTML/CSS.

Sem novidades! Este recurso o Firebug já tem há muito tempo.

Sim, o Firebug inspeciona os elementos do navegador e todos os códigos que são executados no cliente. Já o Page Inspector te permite inspecionar os elementos HTML ao mesmo tempo que destaca o código fonte de servidor.

Usando o Page Inspector

  • Crie uma Web Application (pode ser Web Forms ou MVC).
  • Selecione o projeto no Solution Explorer e clique em View in Page Inspector.

image

Será aberta uma ela como esta:

image

 

A partir dessa ferramenta podemos fazer modificações no HTML/CSS após ele ter sido renderizado no navegador. O processo de inspeção é simples, você clica no botão Inspect e usa o mouse para selecionar o elemento no HTML, ao mesmo tempo o elemento é destacado na aba HTML e o arquivo que originou o HTML é aberto com o trecho de código de servidor em destaque.

Um recurso interessante é a capacidade de selecionar um elemento no HTML e acompanhar o código fonte que o originou.

image

Usabilidade

A usabilidade da ferramenta é bastante limitada. Você não pode modificar o HTML diretamente no visualizador, isso deixa o processo pouco natural. Em relação ao Firebug essa ferramenta fica lá atrás.

Conclusão

Como novidade é interessante, principalmente por navegar no código fonte. Mas como ferramenta do dia a dia eu fico com o Firebug.