Firefox 11 adicionou duas novas ferramentas de desenvolvedor web para O já impressionante arsenal do Firefox . O recurso Inclinação visualiza as estruturas do site em 3D, enquanto o Editor de Estilos pode editar as folhas de estilo CSS rapidamente.
O recurso 3D, conhecido como Tilt, é uma forma de visualizar o DOM de um site. Ele se integra ao Document Inspector existente e usa WebGL para exibir gráficos 3D ricos em seu navegador.
Inclinação - Visualização 3D do site
Você pode acessar o Tilt de dentro do Inspetor de página do Firefox. Para começar, abra o Inspetor de página selecionando “Inspecionar” no menu do Web Developer. Você também pode clicar com o botão direito 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 após ativar o modo 3D, mas parecerá plana até que você a gire.
Gire o modelo clicando com o botão esquerdo, mova a imagem clicando com o botão direito e aumente e diminua o zoom usando a roda do mouse.
Esta visualização é integrada com as outras ferramentas do inspetor. Se você estiver com os painéis HTML ou Estilo abertos, poderá clicar em um elemento na página para visualizar o código HTML ou as propriedades CSS desse elemento.
Mais recursos 3D
O recurso de visualização 3D foi baseado na extensão Tilt, mas não possui todos os recursos da extensão Tilt. se você deseja personalizar as cores ou mesmo exportar a visualização como um arquivo de modelo 3D para uso com um programa de edição 3D, você precisará instalar o Complemento Tilt 3D . Depois de fazer isso, você obterá uma nova opção “Inclinar” no menu do Desenvolvedor da Web.
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, no topo da página.
Editor de estilo CSS
Para visualizar e editar as folhas de estilo CSS de uma página, abra o Editor de estilo 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 estilo, a página perderá suas informações de estilo. Se você editar uma folha de estilo, verá que as edições aparecem na página enquanto você digita.
Você pode salvar uma cópia de uma das folhas de estilo em seu computador, importar uma folha de estilo existente de 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 mudanças na página atual e avisa quando as mudanças ocorrem. Ao usar o Editor de estilo 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 Firebug.
