Depurador semelhante ao Firebug para Google Chrome

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)

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/

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

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.

F12

Eu amo teclas de atalho

Experimente, ele se chama Firebug Lite e aparentemente funciona com a versão beta do Chrome.

Você também pode encontrá-lo em: https://chrome.google.com/extensions/

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);

Ou tente os scripts do usuário: http://dev.chromium.org/developers/design-documents/user-scripts

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.

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/

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/

Isso não responde à sua pergunta, mas, caso você tenha perdido, o desenvolvedor da Web de Chris Pederick já está disponível para Chrome: https://chrome.google.com/extensions/detail/bfbameneiokkgbdmiekhjnmfkcnldhhm .

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

F12 (apenas no Linux e Windows)

OU

Ctrl ⇧ I

( ⌥ ⌘ Ise você estiver no Mac)

Experimente o Firebug Lite para Google Chrome

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