Extensão Aardvark para Firefox
Publicado em: 2006-03-29 — 19.979 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.
Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Visite o site dos livros.
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 https://www.maujor.com/blog/2006/03/29/aardvark/trackback no seu site.
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
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?
[…] 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. […]
[…] Ó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. […]
Curti essa dupla que vc mencionou! Agora fica mais facil para mim que sou iniciante total.
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>
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!