Sou um desenvolvedor web novato e recomendei o Firebug para depuração várias vezes. Até agora, no entanto, tenho usado apenas as ferramentas de desenvolvedor integradas do Chrome. Parece fazer tudo que o Firebug faz, e é mais limpo e organizado como um bônus.
À medida que fico mais avançado em minha depuração, há recursos que o Firebug tem que vou perder com o DevTools do Chrome? Se sim, quais são eles?
Relacionado: depurador semelhante a Firebug para Google Chrome
Respostas:
Usei o Firebug desde o início e foi uma dádiva de Deus como a invenção do fogo. Mas então o Chrome apareceu com seu depurador e eu tentei. Continuei usando o Firebug, mas fiquei de olho nas ferramentas de desenvolvimento de Chome e, finalmente, não consegui mais encontrar um motivo para não mudar depois que as ferramentas JSON foram adicionadas na v12.
As DevTools do Chrome são ótimas porque tem:
ATUALIZAÇÃO: 2 anos depois, tenho de parabenizar a equipe do Firefox por fazer grandes incursões. Dito isso, a equipe e o depurador do Chrome dão grandes saltos mensais, liderando o setor. Eu atualizaria a lista acima, mas, francamente, preencheria toda a página.
As Ferramentas de desenvolvedor do Chrome assumiram os recursos do Firebug, então todos os principais recursos e familiaridade estão lá (como o $0, e o consoleobjeto).
Existem algumas pequenas diferenças, como as DevTools não têm um painel CSS (embora as folhas de estilo CSS possam ser manipuladas no painel Elementos ).
As ferramentas do Chrome também possuem os painéis Linha do tempo , Perfis e Armazenamento . O painel Timeline registra o carregamento, a renderização de CSS e a análise de JavaScript. O painel Perfil cria perfis de uso de recursos e o painel Armazenamento mostra e permite mudanças no banco de dados do site, armazenamento local, armazenamento de sessão e cookies.
Finalmente, ambas as ferramentas têm suas próprias variações menores, o que torna várias ações um pouco mais fáceis ou mais difíceis. Meu conselho é usar Firebug para Firefox e DevTools para navegadores Webkit, uma vez que apenas o Firebug Lite funciona no Chrome e não possui muitos recursos que o Firebug normal possui (e as DevTools são integradas ao Chrome).
Eu me sinto muito mais confortável usando o Firebug. Não consigo pensar em detalhes no momento, mas às vezes tento depurar algo no Safari ou no Chrome e parece um PITA tão grande que inicio o Firefox e faço tudo rapidamente.
A guia DOM é um ponto positivo. É mais acessível e bem organizado do que o equivalente do Chrome. Eu prefiro a forma como o DOM e outros objetos JS são registrados no console no Firebug também.
Plug-ins Firebug como Pixel Perfect também são muito úteis. Não sei se essa ferramenta existe para o Chrome.
No geral, não importa porque você tem que testar em ambos os navegadores de qualquer maneira. E o IE, também pode compará-lo às ferramentas Dev do IE (que melhoraram, mas ainda não são boas em comparação com o FF ou Webkit).
Não acho que haja algo avançado em particular presente no Firebug, mas não no Chrome que você vai perder.
EDIT : Isso costumava ser verdade, mas o Chrome Dev Tools o implementou.
O Firebug pode pesquisar em todos os scripts carregados em uma página. O Chrome Dev Tools só pode pesquisar no script atualmente selecionado, AFAIK.
Pelo que eu posso dizer, o Firebug é o único que pode editar o código HTML e o texto enquanto você o digita. Muito útil se você está, por exemplo, tentando ver como o texto caberia em um contêiner e adicionar um caractere por vez.
No Chrome, ao editar o HTML, você deve pressionar TAB ou ENTER para sair do "modo de edição" e ver as alterações em sua página.
No Firebug, você também pode inserir o código HTML imediatamente. No Chrome, você deve clicar com o botão direito e escolher "Editar HTML". Caso contrário, aparecerá como <b> negrito </b>.
Eu realmente quero mudar para o Chrome, já que parece funcionar mais rápido, mas a edição ao vivo é muito importante para mim.
A seleção do mouse que o firebug tem é ótima, mas não consigo encontrá-la nas Ferramentas do desenvolvedor do Chrome.
Isso me incomoda porque não consigo encontrar uma tecla de atalho para ele no firebug, enquanto o Chrome não tem isso.
Sou um desenvolvedor novato, então o mouse ainda é usado na maioria das vezes durante o desenvolvimento.
Na época em que essa pergunta foi feita, o Firebug era uma fera, mas agora as Ferramentas de desenvolvedor do Chrome (DevTools) são úteis para desenvolvedores da web. Embora eu não esteja reclamando do Firebug porque aprendi o desenvolvimento web usando Firefox com Firebug.
Foi uma ótima ferramenta para desenvolvimento web e introduziu todos os principais recursos do DevTools e do Firefox. No entanto, mudei para o Chrome DevTools embora eles não cubram todos os recursos do Firebug, porque eles são leves e muito mais rápidos do que o Firebug, acessar localStorage é facilmente definido e as fontes são organizadas lá na minha opinião.
Aqui vou listar como os recursos são únicos no Firebug,
Pesquisa :
A opção de pesquisa está bem definida no Firebug, porque é facilmente acessível e podemos pesquisar palavras - chave com distinção entre maiúsculas e minúsculas e expressão regular .
DOM:
A estrutura DOM pode ser facilmente acessada no Firebug com várias opções de filtragem, como Mostrar propriedades definidas pelo usuário , Mostrar funções definidas pelo usuário e assim por diante.
Biscoitos:
O Firebug nos permite criar nossos próprios cookies e fornece recursos para exportá-los .
Rede / Rede:
O Firebug tem um painel Net , que as DevTools chamam de Network . Ambos são úteis para analisar todas as solicitações feitas para carregar os recursos e seu status. No Firebug, podemos compreender facilmente o IP remoto dos recursos .
Fontes:
Mesmo que o Source Edit esteja disponível no DevTools, acho que o Firebug é melhor ao usar o Source Edit , porque se você deseja editar um arquivo CSS dentro do DevTools, você deve ir ao painel Sources e pressionar Ctrl+ Opara localizar o arquivo. Só então você pode editar o arquivo. No Firebug você pode encontrar facilmente a edição de código - fonte em cada guia do menu.
Suporte para dojo:
Uma vez que eu era um desenvolvedor dojo, o Firebug foi facilmente estendido para suportar o desenvolvimento do dojo usando a extensão do Dojo Firebug .
Visto de maneira objetiva, o Firebug 2.0 tem muitos recursos pequenos, que o Chrome DevTools não tem. Alguns deles estão listados aqui:
Geral
Um "recurso" que vai além da usabilidade é que o Firebug é open source . Para que todos possam participar.
Dito isso, o Chrome DevTools (assim como o Firefox DevTools) tem muito mais recursos e outras vantagens menores e maiores sobre o Firebug, já que a equipe por trás do Firebug é muito pequena em comparação com as equipes por trás das outras DevTools.
Além disso, o Firebug 3+ se integra ao Firefox DevTools embutido , o que significa que essas versões herdam todos os recursos do Firefox DevTools e podem adicionar recursos adicionais.
O Firebug tem a possibilidade de ter outro plugin anexado a ele, como Firecookie . De resto, são bastante semelhantes, na minha opinião é tudo uma questão de gosto.
chrome.devtoolsAPI .
Acho que as ferramentas de desenvolvimento são semelhantes, mas tive problemas para forçar o Chrome a não armazenar nada em cache. Mesmo definir a configuração "Desativar cache" do Chrome não funcionou 100% do tempo; Não sei por quê.
Não tive esse problema com o Firefox / Firebug, então ainda estou usando.
Adicionando meus poucos centavos ...
O Chrome Inspector não conseguiu classificar as propriedades CSS em ordem alfabética, enquanto o Firebug poderia fazer isso como um encanto. Ajuda quando você inspeciona algum elemento css e precisa pegá-lo, o firebug é útil nisso.
De acordo com as boas práticas de codificação CSS, é sempre melhor ter suas propriedades CSS classificadas em ordem alfabética em seu código.
Quando você está trabalhando em um projeto que envolve muitos scripts. No firebug sob a tag do script, você tem a opção de pesquisar um arquivo js na caixa de sugestões fornecida. Onde, como com o cromo, você terá uma visão em árvore coxa para localizar seu arquivo JS, o que é tedioso para ver o namespace de seu arquivo js e percorrer a árvore.
Esta opção pode não afetar ninguém que envolva pequenos arquivos JS em seu projeto. Esse recurso é uma explosão com o firebug que eu uso quando meus scripts têm mais de 1000 arquivos JS.
Quase fiz a troca hoje, mas percebi que não consigo clicar com o botão direito no CSS modificado no Chrome e copiar as declarações de regra ou estilo como faço no firebug. DEUS, eu gostaria que o firefox não começasse a sugar de repente ou eu não teria esse problema.
Eu amo a ferramenta de desenvolvimento do Chrome, mas às vezes perdi esse poderoso recurso do firebug.
Recurso de solicitação "Editar e Reenviar"
Com o recurso "Editar e Reenviar" nas ferramentas do Firefox Developer (Replay XHR ou algo no Firebug), você pode reproduzir a solicitação XHR com alterações na solicitação, incluindo cabeçalhos de solicitação, corpo da solicitação, método http e até mesmo url. O Replay XHR do Google Chrome simplesmente repete a solicitação e não permite nenhuma modificação na solicitação.
Eu uso o Firefox Devtools quando preciso desse recurso.