Qual é o equivalente do Google Chrome para o Firebug?

29

Estou procurando uma ferramenta que possa:

  • inspecionar elementos HTML
  • gerenciar / depurar JavaScript
  • desempenho do perfil
  • modificar elementos em tempo real
development performance google-chrome profiling Evan Plaice
fonte

Respostas:

32

Está embutido. Página [documento] -> Desenvolvedor -> Ferramentas de desenvolvedor (no Chrome v5 e abaixo). É provável que seja diferente na v6, pois o botão Página parece estar desaparecendo nessa versão.

Mark Hatton
fonte
3
Existem algumas desvantagens na ferramenta do Google: visualizar solicitações de ajax não é tão fácil, não há um modo multilinha conveniente, você não pode editar HTML em uma janela, ele não mostra o preenchimento / margens ao passar o mouse na árvore HTML, você simplesmente não pode navegar no DOM real (apenas a árvore HTML) e, por último, mas não menos importante, acho que os recursos de edição de CSS são mais desajeitados - não há preenchimento automático no Google para uma coisa. Ainda é muito utilizável, mas o Firebug é apenas melhor.
Cgp
2
Ou shift-ctrl-I para os preguiçosos :)
Tim Post
1
@ Mark Note, eu estou usando 5.0.375.99. Não tenho certeza se isso faz diferença agora ou no futuro.
Evan Plaice
1
Na v6, é Wrench -> Ferramentas -> Ferramentas de desenvolvedor
enobrev
17

Clique com o botão direito do mouse -> Inspecionar elemento

HoLyVieR
fonte
5

Faz 4 anos desde que a pergunta original foi feita. O Chrome (estável) agora está na versão 38. Por um longo tempo, incluiu um conjunto completo de Ferramentas do Desenvolvedor que são aproximadamente equivalentes ao Firebug for Firefox (embora, aliás, o Firefox também tenha um inspetor interno).

Algumas ferramentas do desenvolvedor do Chrome permitem que você faça:

  • Inspecione o DOM
  • Inspecionar CSS
  • Acesse um console JavaScript
  • Depurar JavaScript
  • Visualize solicitações, horários e respostas da rede
  • Visualizar desempenho de renderização, JavaScript e CSS
  • Inspecionar armazenamento local e cookies

As ferramentas de desenvolvimento podem ser acessadas de várias maneiras.

  • Menu Chrome -> Ferramentas -> Ferramentas do desenvolvedor

  • Ctrl+ Shift+ Ino Windows ou Cmd+ Shift+ Iem um Mac

  • F12 no Windows

  • Clique com o botão direito do mouse em qualquer lugar da página e selecione Inspecionar Elemento


fonte
3

As ferramentas do navegador são ótimas em seu trabalho e geralmente são sua melhor primeira escolha, mas às vezes não fornecem detalhes técnicos suficientes sobre as cargas úteis de solicitação / resposta HTTP ou são muito específicas da página.

Nesses casos, você pode descobrir que uma ferramenta de inspeção HTTP dedicada como o Fiddler ou uma das alternativas do Linux fornecerá mais informações.

Se você realmente precisar se despir, o Wireshark vai além do HTTP para a análise completa do tráfego de rede, mas esteja preparado para ser sobrecarregado no início.

JasonBirch
fonte
Não posso dizer que estou familiarizado com o violinista, mas o Wireshark é definitivamente excessivamente bare-metal. O Wireshark é realmente útil apenas se você precisar ver os detalhes dos protocolos de nível inferior.
Evan Plaice
O Fiddler está mais perto das ferramentas de desenvolvedor do firebug / chrome para usabilidade. Um dos lugares que eu achei mais útil é ao publicar arquivos KML no meu site; você pode ver as solicitações e respostas dos aplicativos da área de trabalho do Windows, como o Google Earth, não apenas os navegadores da web. Eu usei o Wireshark algumas vezes, mas concordo que geralmente não é útil para as coisas do dia a dia para webmasters.
JasonBirch 1:12
1

Você também pode experimentar o Speed ​​Tracer de código aberto do Google - http://code.google.com/webtoolkit/speedtracer/

O Speed ​​Tracer é uma ferramenta para ajudá-lo a identificar e corrigir problemas de desempenho em seus aplicativos da web. Ele visualiza as métricas obtidas de pontos de instrumentação de baixo nível dentro do navegador e as analisa à medida que o aplicativo é executado. O Speed ​​Tracer está disponível como uma extensão do Chrome e funciona em todas as plataformas em que as extensões são suportadas atualmente (Windows e Linux).

Usando o Speed ​​Tracer, você pode ter uma ideia melhor de onde o tempo está sendo gasto em seu aplicativo. Isso inclui problemas causados ​​pela análise e execução de JavaScript, layout, recálculo de estilo CSS e correspondência de seletor, manipulação de eventos DOM, carregamento de recursos de rede, acionamentos por timer, retornos de chamada XMLHttpRequest, pintura e muito mais.

mvark
fonte