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

— Evan Plaice
fonte

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

13

Firebug Lite para Google Chrome .

— Emmett
fonte

Firebug Lite é uma grande ferramenta e também funciona no IE, Opera, Safari e Firefox: getfirebug.com/firebuglite

— Nat Ryall

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

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