Webpoint

Explorando mais a fundo as possibilidades de de usar o Firebug com o jQuery, encontrei o jQuerify.

Como havia mostrado no post Usando o Firebug com o jQuery, é possível pelo console do firebug executar comandos Javascript. Se o jQuery estiver na página que você deseja debugar, você pode usar todas as suas funcionalidades para navegar no documento através do Firebug. Mas e se o site for o Google? Se você deseja debugar em outros sites, ou até treinar o poder dos seletores do jQuery, existe o jQuerify.

Esta ferramenta nada mais é que um link que executa um javascript on the fly para inserir no documento atual uma tag script para carregar o jQuery e torná-lo disponível para ser utilizado no console do Firebug.

Executar jQuerify

Se você carregar o link acima para o seu favoritos, ou até mesmo copiar o link e colar no navegador quando estiver em qualquer página, você pode usá-lo para deixar o jQuery disponível e usar a vontade no console do Firebug.

Vale lembrar que as modificações da página são feitas localmente (com a página no cache) e não terá efeito se a página for recarregada, então para cada página aberta você tem que executar o link. O próprio código exibe uma mensagem de que foi inserido o jQuery com sucesso.

Abaixo vai um exemplo usado no site do Google:

Para utilizar este método, apenas arraste este link para o seu favoritos, e execute no console do firebug qualquer comando jQuery.

O Firebug salva o desenvolvedor Web. Isto não tenha dúvida. Além de suas várias utilidades, tanto para o HTML / CSS, tanto para o Javascript. Neste último ele deixa disponível em seu console todas as variáveis e funções para serem acessadas.

Sendo assim, se você usa o jQuery em sua página, você pode usar o console do Firebug para executar métodos do jQuery. Como assim? A figura abaixo ilustra esta ferramenta:

Como você pode ver, eu digitei no console o seletor $('.doc') que retornou um array com todos os elementos retornados pelo jQuery. Depois disto mandei retornar o primeiro elemento através da sintaxe $('h3').get(0). O firebug logo abaixo retorna o primeiro elemento da página atual. Mas ele vai mais além...

Como você pode ver abaixo, ele linka o elemento retornado a aba HTML e mostra o elemento no contexto da página inteira:

Assim, você pode ter um controle e debugar o seu código muito mais facilmente.

O que acontece se você executar o seletor abaixo no firebug?

Este seletor irá retornar como previsto o primeiro parágrafo ligando ao documento atual.

Além de tudo, você pode modificar o dom utilizando o método $('seletor').html('conteudo'). As possibilidades são várias, depende da necessidade. Então não hesite em explorar esta ferramenta.

Espero que tenha sido útil para todos. Um abraço e até o próximo post.