30Jun
O 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 folhas de estilo CSS sobre a marcha.
O recurso 3D, conhecido como Tilt, é uma maneira de visualizar o DOM de um site. Integra-se com o Inspetor de documentos existente e usa WebGL para exibir gráficos em 3D ricos em seu navegador.
Inclinação - visualização do site 3D
Você pode acessar o Inclinação do Inspector de Páginas do Firefox. Para começar, abra o Inspetor de Página selecionando "Inspecionar" no menu do desenvolvedor da Web. 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 depois de ativar o modo 3D, mas ficará plana até você girá-la.
Gire o modelo clicando com o botão esquerdo, mova a imagem ao redor, clicando com o botão direito do mouse e aumentando e diminuindo o zoom usando a roda do mouse.
Esta visão está integrada com as outras ferramentas no inspetor. Se você abrir os painéis HTML ou Estilo, você pode clicar em um elemento na página hte 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ê quiser personalizar as cores ou mesmo exportar a visualização como um arquivo modelo 3D para uso com um programa de edição em 3D, você precisará instalar o complemento Tilt 3D.Depois de ter, 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.
CSS Style Editor
Para visualizar e editar as folhas de estilo CSS de uma página, abra o Editor de estilos no menu Web Developer.
O editor de estilos lista as folhas de estilos na página atual. Alternar uma folha de estilo ativada ou desativada clicando no ícone do 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ê alternar uma folha de estilo desativada, a página perderá suas informações de estilo. Se você editar uma folha de estilo, verá as edições aparecerem 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 do seu computador ou adicionar uma nova folha de estilo em branco com os links Salvar, Importar ou Novos na janela do Editor de Estilo.
O recurso de visualização 3D observa as mudanças na página atual e percebe quando as mudanças ocorrem. 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.
