Como usar as ferramentas do desenvolvedor da Web do Firefox para exibir as estruturas do site em 3D

Índice:

Como usar as ferramentas do desenvolvedor da Web do Firefox para exibir as estruturas do site em 3D
Como usar as ferramentas do desenvolvedor da Web do Firefox para exibir as estruturas do site em 3D

Vídeo: Como usar as ferramentas do desenvolvedor da Web do Firefox para exibir as estruturas do site em 3D

Vídeo: Como usar as ferramentas do desenvolvedor da Web do Firefox para exibir as estruturas do site em 3D
Vídeo: Como faço para voltar do Microsoft Edge para o Internet Explorer? - YouTube 2024, Abril
Anonim
O Firefox 11 adicionou duas novas ferramentas para desenvolvedores web ao já impressionante arsenal do Firefox. O recurso Tilt visualiza estruturas de sites em 3D, enquanto o Editor de estilos pode editar folhas de estilo CSS rapidamente.
O Firefox 11 adicionou duas novas ferramentas para desenvolvedores web ao já impressionante arsenal do Firefox. O recurso Tilt visualiza estruturas de sites em 3D, enquanto o Editor de estilos pode editar folhas de estilo CSS rapidamente.

O recurso 3D, conhecido como Tilt, é uma maneira de visualizar o DOM de um website. 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 a partir do Inspetor de páginas do Firefox. Para começar, abra o Page Inspector selecionando “Inspecionar” no menu Desenvolvedor da Web. 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.
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.
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 do mouse, mova a imagem ao clicar com o botão direito do mouse e amplie e reduza a imagem usando a roda do mouse.
Gire o modelo clicando com o botão esquerdo do mouse, mova a imagem ao clicar com o botão direito do mouse e amplie e reduza a imagem 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 visualizar o código HTML ou as propriedades CSS desse elemento.
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 visualizar o código HTML ou as propriedades CSS desse elemento.
Image
Image

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 usar com um programa de edição 3D, será necessário instalar o complemento do Tilt 3D. Depois disso, você terá uma nova opção "Inclinação" no menu do desenvolvedor da Web.

Clique no botão Cancelar para usar a versão antiga do Tilt quando solicitado.
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.
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.
Image
Image

Editor de Estilos 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.
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 você digita.
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 você 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.
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 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 o Firebug.

Recomendado: