Logo do siteSilhueta da face do Maujor seguida do texto Maujor o dinossauro das CSS

Menu hamburger Três barras horizontais na cor laranja destinadas a ser clicada para abrir o menu menu do site

Você está no BLOG do Maujor. IR PARA O SITE

Extensão Aardvark para Firefox

Publicado em: 2006-03-29 — 15.185 visualizacoes

A extensão Aardvark para o Firefox foi atualizada e agora funciona no FF 1.5.0.1
Esta extensão juntamente com a extensão WebDeveloper formam meu par preferido como ferramentas de auxílio no desenvolvimento Web.

Trata-se de uma ferramenta que expõe a estrutura de uma página Web aberta no browser revelando os elementos HTML ao simples passar do mouse sobre as diferentes áreas da página
Depois de instalada, clique com botão direito do mouse na página, para abrir o menu de contexto e escolha a opção Start Aardwark ou opcionalmente vá em menu Tools > Start Aardwark e pronto a ferramenta está ativa.
Deslize o mouse sobre a página e cada elemento HTML sob o cursor será cercado por uma borda vermelha formando um retângulo e o tipo de elemento, sua classe ou ID se houver, será revelado no canto inferior esquerdo do retângulo dentro de uma ‘caption’ amarela.
Para desativar a ferramenta tecle ‘Q’ ou F5 (refresh). Ao sair da página a ferramenta é desativada automaticamente.

Funcionalidades adicionais

Uma vez ativada a ferramenta você poderá interagir na página pressionando teclas de atalho cuja função descrevo na tabela abaixo.
Na primeira coluna está indicada a tecla de atalho, na segunda um nome para sua função (em inglês) e na terceira uma breve descrição da ação desempenhada ao se pressionar a tecla.
Notar que a função é exercida sobre o elemento que está em destaque (com o mouse em cima) na página.

W Wider Seleciona a área que contém o elemento em destaque
N Narrower Undo – desfaz o comando “Wider”
Q Quit Desativa a extensão na página
U Undo Undo – desfaz os comandos “remove” ou “isolate”
R Remove Deleta o elemento em destaque da página
I Isolate Isola o elemento em destaque
E Erase Remove o conteúdo do elemento em destaque
B Black on white Coloca uma cor preta para primeiro plano e um fundo branco no elemento em destaque e seu conteúdo
C Colorize Coloca uma cor de fundo aleatória no elemento em destaque
V View Source Mostra o código fonte para o elemento em destaque
D “De-widthify” Remove valores fixos de largura definida para o elemento em destaque e elementos nele contidos

Download e demonstração

Aqui o link para blog do autor , onde você poderá fazer o download da ferramenta. Lá você encontra ainda um link para demonstração (o link está no banner azul do blog) do funcionamento da ferramenta. Aconselho a experimentar a demonstração antes de baixar e instalar a extensão.

Livros do Maujor

Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Clique a "capinha" para visitar o site do livro.

capa livro Grid Layout   capa livro html5   capa livro css3   capa livro HTML5 e CSS3   capa livro RWD   capa livro jQuery   capa livro Bootstrap3   capa livro ajaxjQuery   capa livro css   capa livro html   capa livro javascript   capa livro jQuery Mobile   capa livro jQuery UI   capa livro SVG   capa livro foundation   capa livro Sass e Compass

Esta matéria foi publicada em: 2006-03-29 (quarta-feira). Subscreva o feed RSS 2.0 para comentários.
Comente abaixo, ou link para http://www.maujor.com/blog/2006/03/29/aardvark/trackback no seu site.

7 comentários na matéria: “Extensão Aardvark para Firefox”

  1. Matheus de OliveiraNo Gravatar disse:

    Essa eu não conheica, a WDT tem a funcionalidade de marcar o elemento atual (Outline Outline Current Element), mas não faz essas outras coisas, como remover o elemento…

    Valew pela dica, estou instalando neste exato momento…abços

  2. charlesNo Gravatar disse:

    mauro, restaurando seu post antigo, rodei o demo dessa ferramenta mas não achei suficiente, estava procurando uma que mostrasse o conteudo css do elemento corrente, atualmente estou testando a extensao cssviewer, é muito util, mas nem sempre funciona não sei porque, já testou essa extensao?

  3. Adriano.IsON.com.br - Blog » Mais uma super extenso para desenvolvedores no Firefox… disse:

    […] Como diz um dos blogs aonde eu vi essa extenso, a Aardvark junto WebDeveloper, fazem um timo par de ferramentas de auxlio ao desenvolvedor web. […]

  4. at Farley disse:

    […] Ótima a dica do Maurício do http://www.maujor.com! Testei a ferramenta no SITE e resolvi baixa pra teste a versão pra desktop … RECOMENDO! Muito bom mesmo o programa e faz coisas que eu realmente preciso muito em relação às cores. Nuances variadíssimas, cores muito além das que normalmente consigo e coisa do gênero. O link do blog do Mauricio Samy Silva é no maujor.com/blog e o link onde está específicamente a matéria é este AQUI. Muita coisa boa lá. Outra ferramenta FANTÁSTICA que conheci no blog do Mauricio é a Extensão Aardvark para Firefox comentada lá no blog. O link pra download é ESTE. No blog que referencio aqui – http://www.maujor.com – há toda a referência necessária, assim como os muito bem elaborados comentários e dicas. […]

  5. MarcusNo Gravatar disse:

    Curti essa dupla que vc mencionou! Agora fica mais facil para mim que sou iniciante total.

  6. MaujorNo Gravatar disse:

    Ola Farley:
    Localize o arquivo index.php no diretório raiz do WP e renomeie para index1.php ou outro nome qualquer a sua escolha.
    Nomeie a página que você criou para ser a inicial como index. (a extensão que ela tenha html, shtml, php, asp, jsp…) e coloque no diretório raiz.
    O link para a página default inicial vai ser <a href="/index1.php">blog</a>

  7. farley rangelNo Gravatar disse:

    Maurício, como sempre ÓTIMA dica a sua! Gostei de ver como funciona. Irá inclusive me ajudar a entender melhor o conceito de estrutura dos sites que tenho curiosidade e estudo.
    Queria ainda te fazer uma pergunta: Usando o WordPress, vc faz idéia de como colocar uma das páginas criadas para aparecer ao acessar o WP ? Como página inicial sempre aparece o blog. Eu criei uma página que queria que fosse a inicial. Será que pode me ajudar a resolver isso ? Estou na tentativa faz um mês e ainda nada.

    Obrigado!

Comentário:





Teclar "Enter" cria um novo parágrafo. Teclar "Shift + Enter" causa uma quebra de linha.

Subscribe without commenting

topo