Guia para instalar o Firebug nos principais navegadores e dispositivos iOS

Firebug é um add-on do Firefox com ferramentas legais para inspecionar elementos de páginas web, depurar e desenvolver páginas web. No entanto, não há como ter essas ferramentas em outros navegadores, além do Firefox.

O desenvolvimento de uma ferramenta semelhante para outros navegadores pode exigir muito trabalho, mas será de grande ajuda se você conseguir que o Firebug funcione em outros navegadores também, considerando que todos têm seus navegadores preferidos..

Bem, aqui é onde o Firebug Lite entra para resolver suas necessidades. O Firebug Lite é uma versão mais simples do Firebug, mas pode ser usado no IE, Opera, Chrome, Safari, iPad e iPhone, mantendo opções e recursos semelhantes.

Instalando o Firebug Lite no Opera, Safari e Chrome

Com o Firebug Lite, não é necessária nenhuma instalação. Escrito em Java Script, você pode marcar um link do Firebug Lite e ele estará pronto para a inspeção da página. Então, o que você precisa fazer é simplesmente marcar o link abaixo (você também pode arrastar o link para a barra de favoritos do seu navegador).

Firebug Lite

Se você estiver usando o navegador Chrome, o marcador deverá aparecer como abaixo, se a barra de favoritos estiver visível.

É isso aí, o seu Firebug Lite deve funcionar agora quando você precisar usá-lo.

Usando o Firebug Lite no Opera, Safari e Chrome

Agora você pode usar o Firebug Lite para inspecionar praticamente qualquer página da web. Para este exemplo, usaremos a Wikipedia.org.

Quando a página da Web for carregada, clique no marcador do Firebug Lite que você salvou anteriormente e verá uma caixa de consolação na parte inferior da página da Web..

Se fecharmos, isso é o que você verá no canto inferior esquerdo da página.

Agora você pode ver o (+) e o (-) no ponto inicial de muitas linhas. O (+) significa que há mais linhas fechadas sob o one-liner do html, e se você destacar a linha, você verá qual parte da página representa.

Mas se você quiser facilitar a identificação das linhas representadas por qualquer texto, foto, link ou qualquer outro elemento na própria página da Web, clique no botão "Inspecionar".

Agora você pode passar o cursor do mouse para qualquer parte dos elementos disponíveis na página da web, e você verá a linha HTML destacada. Isso torna mais fácil para você fazer alguma inspeção.

Instalando o Firebug Lite no iPad e iPhone

Bookmarklets realmente não vai bem com o iPad e iPhone. Para ter o Firebug Lite instalado no iPad e iPhone, veja como:

1. Marque esta página em seu iPad ou iPhone.

   

2. Renomeie o marcador para "Firebug".

   

3. Selecione e copie todo o script abaixo.

   javascript: (função (F, eu, r, e, b, eu, g, L, eu, T, E) se (F.getElementById (b)) retorno; E = F [i + 'NS'] && F. documentElement.namespaceURI; E = E? F [i + 'NS'] (E, 'script'): F [i] ('script'); E [r] ('id', b); E [r] ( 'src', I + g + T); E [r] (b, u); (F [e] ('cabeça') [0] || F [e] ('corpo') [0]). appendChild (E); E = novo% 20Imagem; E [r] ('src', I + L);) (documento, 'createElement', 'setAttribute', 'getElementsByTagName', 'FirebugLite', '4', 'firebug-lite.js', 'releases / lite / mais recentes / skin / xp / sprite.png', 'https: //getfirebug.com/','#startOpened');

4. Vá para a opção de favoritos e pressione "Editar". Em seguida, selecione o favorito "Firebug".

   

5. Remova o URL original e cole o bookmarklet.

   

6. Escolher “Feito” no seu teclado.

Agora, tente abrir qualquer site e selecione o marcador "Firebug" e você verá um Firebug funcionando na parte inferior da tela do seu iPad.

Conclusão

O Firebug Lite é de longe bom o suficiente para fazer uma rápida inspeção de página. Você pode ver o html, css e qualquer script usado para construir a página da web. Embora o Chrome tenha sua própria extensão de desenvolvedor da Web, o Firebug Lite não decepciona por uma milha.