Como usar as ferramentas do desenvolvedor da Web do Firefox para visualizar as estruturas do site em 3D
O Firefox 11 adicionou duas novas ferramentas para desenvolvedores web ao já impressionante arsenal do Firefox. O recurso Tilt visualiza estruturas de website em 3D, enquanto o Style Editor pode editar folhas de estilo CSS em tempo real.
O recurso 3D, conhecido como Tilt, é uma maneira de visualizar o DOM de um site. Ele se integra ao Document Inspector existente e usa o WebGL para exibir gráficos 3D avançados em seu navegador.
Inclinação - visualização do site em 3D
Você pode acessar o Tilt no Inspetor de Páginas do Firefox. Para começar, abra o Page Inspector selecionando “Inspecionar” no menu do Web Developer. Você também pode clicar com o botão direito do mouse na página atual e selecionar "Inspecionar elemento" para iniciar o inspetor em um elemento específico.
Clique no botão "3D" na barra de ferramentas do inspetor.
Você verá a estrutura da página depois de ativar o modo 3D, mas ficará plana até que você a gire.
Gire o modelo clicando com o botão esquerdo do mouse, mova a imagem ao clicar com o botão direito e amplie e reduza usando a roda do mouse.
Esta visão é integrada com as outras ferramentas no inspetor. Se você tiver os painéis HTML ou Estilo abertos, poderá clicar em um elemento na página para exibir o código HTML ou as propriedades CSS desse elemento.
Mais recursos 3D
O recurso de visualização 3D foi baseado na extensão do Tilt, mas não possui todos os recursos da extensão do Tilt. Se você quiser personalizar as cores ou até mesmo exportar a visualização como um arquivo de modelo 3D para uso com um programa de edição 3D, será necessário instalar o complemento do Tilt 3D. Uma vez que você tenha, você terá uma nova opção "Tilt" no menu Web Developer.
Clique no botão Cancelar para usar a versão antiga do Tilt quando solicitado.
Você encontrará controles para personalizar a visualização no lado esquerdo da janela e outras opções, incluindo o recurso de exportação, na parte superior da página..
Editor de Estilos CSS
Para visualizar e editar as folhas de estilo CSS de uma página, abra o Editor de Estilos no menu Desenvolvedor da Web..
O editor de estilo lista as folhas de estilo na página atual. Ative ou desative uma folha de estilo clicando no ícone de olho à esquerda do nome da folha de estilo. Edite uma folha de estilo selecionando-a e modificando o código.
As alterações são refletidas na página imediatamente. Se você desativar uma folha de estilos, a página perderá as informações de estilo. Se você editar uma folha de estilo, verá as edições aparecerem na página enquanto digita.
Você pode salvar uma cópia de uma das folhas de estilo em seu computador, importar uma folha de estilo existente em seu computador ou adicionar uma nova folha de estilo em branco com os links Salvar, Importar ou Novo na janela do Editor de Estilos.
O recurso de visualização 3D observa as alterações na página atual e percebe quando ocorrem alterações. Quando você usa o Editor de estilos com o inspetor 3D aberto, suas alterações serão refletidas imediatamente na visualização 3D. Isso também funciona com extensões de terceiros que modificam páginas da Web, como o Firebug.
