desenv-web-rp.com

Qual é o Google Chrome equivalente ao Firebug?

Estou procurando uma ferramenta que possa:

  • inspecionar elementos HTML
  • gerenciar/depurar JavaScript
  • desempenho do perfil
  • modificar elementos em tempo real
29
Evan Plaice

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

32
Mark Hatton

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

17
HoLyVieR
13
Emmett

Faz 4 anos desde que a pergunta original foi feita. Chrome (stable) 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 ainda tenha a inspetor interno também).

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 do Chrome -> Ferramentas -> Ferramentas do desenvolvedor

  • Ctrl + Shift + I no Windows ou Cmd + Shift + I em um Mac

  • F12 no Windows

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

5
user9877

As ferramentas do navegador são ótimas no trabalho e geralmente são a melhor opção, 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 achar que uma ferramenta de inspeção HTTP dedicada como Fiddler ou uma das alternativas Linux fornecerá mais informações.

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

3
JasonBirch

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 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.

1
mvark