Depurador semelhante ao Firebug para Google Chrome

278

Existe algo como o Firebug que você pode usar no Google Chrome?

Recursos essenciais que eu gostaria:

  • Inspecionar a fonte HTML (selecione elementos, exclua-os etc.)
  • verifique os valores CSS (a solução embutida é estranha, de alguma forma)
Sebastian Hoitz
fonte
9
Como o Chrome agora suporta extensões, podemos revisar isso, pois muitas das respostas existentes estão tecnicamente incorretas. Devemos atualizar esta resposta em vez de iniciar uma nova.
Nathan Koop
3
@ Nathan Koop: Eu posso estar errado, mas não acho que o sistema de extensão do Chrome seja poderoso o suficiente para permitir algo como o Firebug.
Sasha Chedygov 26/07/10
1
verifique este link para obter o firebug no navegador: getfirebug.com/releases/lite/chrome
Techie

Respostas:

243

Já existe uma ferramenta semelhante ao Firebug incorporada no Chrome. Clique com o botão direito do mouse em qualquer lugar da página e escolha "Inspecionar elemento" no menu. O Chrome possui uma ferramenta gráfica para depuração (como no Firebug), para que você possa depurar JavaScript. Ele também faz uma inspeção CSS bem e pode até alterar a renderização CSS em tempo real.

Para mais informações, consulte https://developers.google.com/chrome-developer-tools/

Dmitry Torba
fonte
19
++ Isso é bom o suficiente para solucionar problemas específicos do Chrome. Se eu quiser uma introspecção mais profunda, posso fazê-lo com o Firebug. Agora, com o novo modo de desenvolvedor do IE8, todos os principais navegadores criaram modos de desenvolvimento. Bons tempos.
armas
1
Ah, demorei um pouco para encontrá-lo, mas a funcionalidade de edição html do firebug também está lá, no mesmo lugar em que você pode editar o css, a barra de ferramentas do desenvolvedor, clicar duas vezes em um elemento, digitar e pressionar enter, e você vai, html editado.
Kzqai 17/10/2009
4
As Ferramentas do desenvolvedor do Chrome (ctrl + shift + j) oferecem suporte à depuração de Javascript, como o Firebug. Clique na guia Scripts e, em seguida, no segundo ícone na parte inferior (> =) que possui uma dica de ferramenta "Mostrar console". A partir daí, você pode executar comandos Javascript como o console do Firebug.
Pierre-Antoine LaFayette
1
Lembre-se em algum sistema baseado em Linux que não é instalado automaticamente, então você precisa instalá-lo manualmente: sudo apt-get install cromo-browser-inspector
Manuel
1
O desenvolvedor atual 4.0.xxxx tem um conjunto de ferramentas de desenvolvedor. Eu sabia sobre as coisas dos elementos de inspeção antes, mas sem o painel "Net" não era bom o suficiente. Mas agora existe um painel de "recursos" que parece estar funcionando muito bem e tem todos os mesmos filtros que o firebug (scripts, xhr, imagens etc.). Uso a compilação do desenvolvedor há uma semana e parece bastante estável. Acabei de definir meu navegador padrão para o chrome - agora também é meu navegador de desenvolvimento! :)
Mark J Miller
37

O Firebug Lite suporta para inspecionar elementos HTML, estilo CSS calculado e muito mais. Como é JavaScript puro, ele funciona em muitos navegadores diferentes. Basta incluir o script na sua fonte ou adicionar o bookmarklet à sua barra de favoritos para incluí-lo em qualquer página com um único clique.

http://getfirebug.com/lite.html

gregers
fonte
Ótimo link! Não sabia sobre a versão do IE
Patrick Desjardins
15

Apenas adicionando alguns pontos de discussão como alguém que usa o Firebug / Chrome Inspector todos os dias:

  1. No momento da redação deste artigo, existe apenas o inspetor do Google DOM e não, ele não possui todos os recursos do Firebug

  2. O Inspector é uma versão 'lite' do Firebug: a interface não é tão boa IMO, a inspeção de elementos nas duas versões recentes agora é desajeitada, mas o Firebug ainda é melhor; Eu me pego tentando encontrar o amor pelo Chrome (já que é uma experiência de navegador melhor e mais rápida), mas, para o trabalho de desenvolvimento, ainda é uma droga para mim.

  3. A visualização ao vivo / modificação de DOM / CSS ainda é muito melhor no Firebug; CSS calculado e visualização do modelo de caixa são melhores no Firebug;

  4. De alguma forma, é mais fácil ler / usar o Firebug, talvez devido à facilidade de navegação, manipulação / modificação do documento em várias áreas-chave? Quem sabe. Estou acostumado com a interface e acho que o Chrome Inspector não é tão bom, embora isso seja algo subjetivo que admito.

  5. A guia Cookies / Rede é extremamente útil para mim no Firebug. Talvez o Chrome Inspector tenha isso agora? A última vez que verifiquei, não, porque o Chrome se atualiza em segundo plano sem a sua intervenção (obtém seu consentimento por padrão, como todos os bons senhores).

  6. Último ponto: o dia em que o Google Chrome recebe um Firebug com todos os recursos é o dia em que o Firefox morre para desenvolvedores, porque o Firefox tinha 3 anos para tornar o mecanismo de layout do Firefox Gecko o mais rápido possível. WebKit, e eles não o fizeram. Desculpe por ser tão franco, mas é a verdade.

Agora, todo mundo quer se afastar do Flash, em vez do jQuery, motivado pela acessibilidade e interatividade móvel (iPhone, iPad, Android) e o JavaScript é 'repentinamente' um grande negócio (isso é sarcasmo), para que o navio navegue pelo Firefox. E isso me deixa triste, como fã do Mozilla. O Chrome é simplesmente um navegador melhor até o Firefox atualizar o mecanismo JavaScript.

negutron
fonte
O Firefox está indo ladeira abaixo. A partir de agora (2013), as ferramentas de cromo são muito mais poderosas que o firebug ... e o firefox está concentrando seus esforços no Firefox OS, que nem sequer é parecido com o Android Frodo ... eles nem se esforçaram muito para criar js e renderizar Mais rápido.
Phyo Arkar Lwin
14

F12

Eu amo teclas de atalho

Angel.King.47
fonte
6
um cara colocar ctrl turno j :)
Vishal Sharma
9

Você pode definir este bookmarklet na sua "Barra de favoritos" para que o Firebug lite esteja sempre disponível no navegador Chrome / Chromium (coloque-o como URL):

javascript:var firebug=document.createElement('script');firebug.setAttribute('src','http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js');document.body.appendChild(firebug);(function(){if(window.firebug.version){firebug.init();}else{setTimeout(arguments.callee);}})();void(firebug);
Manuel
fonte
4

O jQuerify é a extensão perfeita para incorporar o jQuery no Chrome Console e é tão simples quanto você pode imaginar. Essa extensão também indica se o jQuery já foi incorporado a uma página.

Esta extensão é usada para incorporar o jQuery em qualquer página que você desejar. Permite usar o jQuery no shell do console (você pode chamar o console do Chrome pressionando Ctrl+ Shift+ j".).

Para incorporar o jQuery na guia selecionada, clique no botão de extensão.

Andrey
fonte
4

A extensão oficial do Firebug Chrome ou você pode fazer o download e empacotar a extensão você mesmo.

https://getfirebug.com/releases/lite/chrome/

joshatjben
fonte
2
Apenas para maior clareza: este é um link para uma extensão do firebug lite e não para o firebug.
NeuroScr
O link fornecido anteriormente estava quebrado. Atualize esta resposta com um novo link.
Rob Hruska
3

Bem, é possível ativar os scripts Greasemonkey para o Google Chrome, então talvez haja uma maneira de instalar o Firebug usando esse método? O Firebug Lite também funcionaria, mas não é o mesmo que usar o completo :(

willshouse.com/2009/05/29/install-greasemonkey-for-chrome-a-better-guide/

Peter Mortensen
fonte
3

Esqueça tudo que você precisa deste inspetor independente de navegador, atualizador de Dom

https://goggles.webmaker.org/en-US

basta marcar e ir para qualquer página da Web e clicar nesse marcador.

este é realmente o projeto Mozilla Goggles, incrível incrível incrível ...

Vishal Sharma
fonte
Eles estão desligando.
Steve Moretz
3

F12 (apenas no Linux e Windows)

OU

Ctrl I

( Ise você estiver no Mac)

siannone
fonte
1

Se você estiver usando o Chromium no Ubuntu usando o ppa noturno, deverá ter o chromium-browser-inspector

Rory
fonte