Quais recursos exclusivos o Firebug tem que não são integrados ao Firefox?

99

Acabei de limpar meus complementos do Firefox e me perguntei:

  • Quais recursos o Firebug possui que o tornam único?

  • Quais recursos estão disponíveis no Firebug e nas Ferramentas de desenvolvedor do Firefox?

Janpio
fonte
3
Estou lendo meu feed de rss para Mozilla Hacks e parece que agora as ferramentas nativas estão começando a se tornar melhores que o Firebug. Seria bom se alguém que trabalha com eles pudesse confirmar isso para 2014. por exemplo - hacks.mozilla.org/2014/02/…
llamerr
2
Dado o atual ciclo de lançamento relativamente rápido do Firefox, não seria viável simplesmente combinar esforços? Eu sempre fiquei intrigado sobre por que o Firebug não funcionava da mesma maneira que digamos pdf.js quando os DevTools do Firefox eram primitivos ... Com o DevTools mais recente a partir do Firefox 29, posso me ver alternando entre o Firebug e o DevTools para algumas tarefas que pode ser melhor executado em um ou outro.
unode

Respostas:

53

As ferramentas nativas para desenvolvedores do Firefox já percorreram um longo caminho desde que esta pergunta foi escrita. As diferenças se reduziram principalmente aos seguintes pontos:

  • Não é possível interromper a execução do script em mutações DOM, XHRs ou alterações de cookies.
  • XPaths não podem ser copiados.
  • Falta um painel lateral de eventos no Inspetor (embora os eventos sejam exibidos dentro da estrutura DOM).
  • Falta um painel lateral DOM no Inspetor.
  • Sem visualização ao vivo durante a edição de HTML.
  • Preenchimento automático ausente para propriedades não enumeráveis ​​na linha de comando.
  • Não é possível pesquisar em vários arquivos no Editor de estilo.
  • Sem linha de comando multi-linha no console da Web (embora eles tenham Scratchpad e uma linha de comando "smart-multi-line")
  • Nenhum botão da barra de ferramentas para alternar as ferramentas ou o Inspetor.
  • Não é possível pesquisar nas respostas das solicitações da rede.
  • Preenchimento automático ausente para várias propriedades CSS.
  • Vários comandos de linha de comando ausentes.
  • Não é possível adicionar cookies, apenas edite os existentes.
  • Sem modo sempre ligado e ativação por domínio (em vez de por guia).

Há mais coisas faltando, que são rastreadas em um relatório de bug arquivado para todas as lacunas entre o Firebug e o Firefox DevTools .

Integração Firebug

O Firebug agora é baseado nas ferramentas nativas do desenvolvedor. Desde o Firefox 48, há também um tema Firebug que se parece com a extensão Firebug, fazendo com que você se sinta em casa se estiver acostumado com o Firebug. Uma vez que o Firefox multiprocessado esteja habilitado, pressionar F12ou clicar no botão Firebug abre o Firefox DevTools e com o tema Firebug.

Há também um guia de migração explicando as diferenças entre o Firebug e o Firefox DevTools.

Sebastian Zartner
fonte
2
15.11.2014 - FF 33.0: Muitas melhorias foram feitas na ferramenta de inspeção nativa: Filtros estão disponíveis para a guia rede ; Muitos recursos realmente interessantes e úteis : Visualização em 3D, modo de design responsivo, captura de cores, fonte usada + visualização da fonte; Grande vantagem de desempenho em relação ao Firebug ; Os cookies podem ser visualizados através do Firefox -> Ferramentas -> Informações da página -> Segurança . Espero poder substituir o firebug pelas ferramentas nativas algum dia, porque acho que é impossível para o addon firebug obter o alto desempenho das ferramentas nativas.
malisokan de
Como o FireBug 3.0 se compara às ferramentas nativas? Parece que eles basicamente removeram a capa das ferramentas nativas e não consigo encontrar nenhuma comparação entre o Firebug 3.0a9 e as ferramentas de desenvolvimento nativas no FF 36.0.1.
gabaum10
31

Existem muitos pequenos recursos que o Firebug tem que as ferramentas internas não têm. Brincando com a IU, isso é o que vem à mente, mas tenho certeza de que há mais:

  • habilidades de inspeção de fechamento, como a someFunction.%closureVarsintaxe da linha de comando
  • clique com o botão direito para jogar com qualquer valor na linha de comando
  • um único clique para editar
  • destacando elementos ao pairar
  • APIs de linha de comando, como includeegetEventListeners
  • capacidade de mostrar estilos UA
  • "Adicionar regra" no painel Estilo
  • um painel CSS que pode ser usado para CSS reduzido
  • quando um elemento contém apenas texto, o painel HTML exibe o texto embutido
  • Log de XHR no console com prettification JSON (e que não abre um pop-up)
  • "Quebra na mudança de atributo / mudança de subárvore / remoção de nó" no painel HTML
  • "Break on mutate", "Break on next", "Break on property change", "Break on cookie change"
  • um painel inteiro de cookies
  • rastreamentos de pilha no painel do console
  • editar e colar HTML
  • pesquisa de texto livre na maioria dos painéis
  • muitas opções para mexer se você precisar
  • registro de eventos

Existem também, é claro, aspectos subjetivos nisso. Por exemplo, eu pessoalmente gosto da IU e da aparência do Firebug mais do que a escuridão das ferramentas de desenvolvimento, e a familiaridade anterior com uma ferramenta é sempre importante.

Simon Lindholm
fonte
1
Parece que muito desta lista não é relevante hoje.
Aleks-Daniel Jakimenko-A.
O firebug foi integrado ao firefox recentemente (11.2016) ... e todos esses recursos simples / pequenas melhorias bonitas como "um único clique para editar" se foram ... todas as coisas boas se foram ... o mesmo que a produtividade dos usuários do firebug :( ... em geral, a IU do firebug era melhor e mais rápida de se trabalhar
webdev-dan
6

Isso será irrelevante em breve, pois o Firebug e as ferramentas nativas do desenvolvedor estão se fundindo:

O Firebug 2 não funciona em navegadores de múltiplos processos (por exemplo, e10s) e convertê-lo é muito complexo, ele deixará de funcionar quando o e10s for ativado no Firefox.

Queremos estar prontos quando o Firebug 2 parar de funcionar e criamos o seguinte plano.

Integre todos os recursos do Firebug 3 nas ferramentas integradas do Firefox e encaminhe todos os usuários do Firebug para ele.

Substitua o Firebug 2 lançando o Firebug 3 (no AMO) apenas se tivermos que fornecer em uma extensão quaisquer recursos críticos ausentes nas ferramentas de desenvolvedor do Firefox.

No momento, estamos trabalhando na portabilidade do XHR Inspector ( bug 1211525 ), painel DOM ( bug 1201475 ) e tema Firebug ( bug 1244054 ).

O objetivo principal para o próximo lançamento do Firebug será integrá-lo ao DevTools embutido no Firefox. Além disso, o Firebug Working Group planeja alguns novos recursos para estender o DevTools com novas funcionalidades.

Firebug 3.0 alpha (também conhecido como Firebug.next) é atualmente compatível com o Firefox 35 - 36 e irá suportar os próximos navegadores multiprocessos (bem como não multiprocessos).

Firebug 3.0 (também conhecido como Firebug.next) representa a próxima geração do Firebug construída sobre as ferramentas de desenvolvedor nativas do Firefox.

Se instalar o Firebug 2 em um navegador habilitado para multiprocessos (e10s), você será solicitado a atualizar para o Firebug 3 ou desligar o suporte a multiprocessos.

A Mozilla já adiou várias vezes o lançamento do Electrolysis. O plano atual é lançar o Firefox multiprocessado para o canal estável em 19 de abril de 2016, quando o Firefox 46 for lançado para o canal estável.

Esta é apenas uma data de lançamento projetada e é possível que a eletrólise seja adiada ainda mais.

Uma ideia interessante que a Mozilla tem para tornar o lançamento menos doloroso para os usuários do navegador é habilitar o Electrolysis apenas nas versões do Firefox sem add-ons, e nas versões do Firefox onde apenas add-ons compatíveis são instalados.

Há algum tempo, estamos trabalhando para unificar as ferramentas do Firefox Developer e o Firebug. Do Firefox 49, enviaremos o Firebug.next integrado.

Se você usar as Ferramentas de desenvolvedor do Firefox integradas, em vez do Firebug, talvez goste do painel DOM e do tema Firebug que adicionamos nesta mesclagem.

Além disso, portamos algumas extensões Firebug comuns (PixelPerfect, FireQuery e HARExportTrigger anteriormente NetExport). E já que estamos nisso, talvez você goste de nossa nova extensão WebSocket Monitor.

Como parte da portabilidade dos recursos do Firebug para as ferramentas integradas, também estamos portando o tema do Firebug, dando aos usuários do Firebug um ambiente mais familiar para trabalhar.

Este tema é quente, quente, quente! Diga oi para o tema Firebug para Ferramentas de Desenvolvedor

A Mozilla lançou hoje o Firefox 48 para Windows, Mac, Linux e Android. O navegador ganhou suporte para multiprocessador (finalmente), proteção aprimorada contra downloads prejudiciais e melhorias de mídia no Android. O suporte para versões antigas do OS X e Android Gingerbread foi abandonado.

No Firefox 48, o Mozilla está habilitando lentamente o suporte a vários processos, começando com 1 por cento dos usuários e aumentando para quase metade do canal de lançamento do Firefox. Para verificar se você está no grupo Eletrólise, digite “about: support” na barra de URL e verifique se diz “1/1 (habilitado por padrão)” no item de linha Multiprocess Windows.

Referências

Paul Sweatte
fonte
Isso ainda será relevante, eles não estão se fundindo , o novo Firebug será construído em cima das DevTools para que não duplique nenhum recurso existente, mas ainda terá alguns exclusivos.
usuário
@user Honza, um dos principais desenvolvedores, disse o seguinte no post do blog mozilla hacks com One of our goals is to bring Firebug UX into native devtools, so yes, features are mixing to devtools.
link
1
"Firebug 3 não é outra ferramenta de desenvolvedor, é antes uma camada fina construída sobre DevTools, fornecendo um novo tema que faz DevTools parecer Firebug. Existem também alguns recursos adicionais, que iremos portar para DevTools passo a passo . " ( fonte ) Então eu acredito que você está certo, eventualmente ele será integrado ao DevTools completamente.
usuário
5

Acho que a maior vantagem ainda - após a implementação da funcionalidade Painel de rede e linha do tempo - é a disponibilidade de várias extensões Firebug , como por exemplo YSlow, Page Speed, FirePython e assim por diante.

No final das contas, é provavelmente mais uma escolha baseada em suas preferências pessoais, chegar a uma arma de escolha que traga mais conveniência e velocidade.

Um detalhe interessante sobre essa decisão é que o Firebug já foi um dos plug-ins que teve impacto negativo mais significativo no desempenho do Firefox. Eu não sei sobre um estudo atual sobre isso, especialmente se as ferramentas de desenvolvimento integradas estão funcionando melhor em termos de desempenho do que o Firebug.

Volker E.
fonte
4
Essa lista é apenas sobre o desempenho de inicialização, que melhorou muito no 1.10, quando o Firebug foi atrasado para carregar. Ainda assim, os desenvolvedores do Firefox se preocupam mais com o desempenho durante o uso, em parte exatamente porque querem evitar serem manchados pela visão geral do Firebug como "lento". Se isso acaba sendo mais utilizável, não sei.
Simon Lindholm,
0

Uma vantagem das ferramentas de desenvolvimento nativas em relação à versão atual do firebug é que elas têm mapas de origem, ao contrário do que o firebug não tem.

Lajos Meszaros
fonte
0

Recursos exclusivos do Firebug, mas o inspetor integrado do Firefox não possui, incluem:

  • Copiar XPath
  • Copiar XPath mínimo
  • Copiar Caminho CSS

Os recursos exclusivos que o inspetor integrado do Firefox possui, mas o Firebug não possui, incluem:

  • Copiar Seletor Único
sampablokuper
fonte
Para sua informação, copiar o XPath de um elemento é solicitado no bug 987877 , copiar o caminho CSS é possível desde o Firefox 53.0 através de um clique com o botão direito em um elemento> Copiar > Caminho CSS (ver bug 1323700 ).
Sebastian Zartner
0

A linha de comando do console no modo de editor grande permite a execução de código no contexto atual. O novo Scratchpad não vê o escopo do ponto de interrupção atual. Esta é uma perda terrível.

tqwhite
fonte