Debugger simile a Firebug per Google Chrome


278

C'è qualcosa come Firebug che puoi usare in Google Chrome?

Caratteristiche essenziali che vorrei:

  • Ispeziona l'origine HTML (seleziona gli elementi, eliminali, ecc.)
  • controlla i valori CSS (la soluzione integrata è strana, in qualche modo)

9
Visto che Chrome ora supporta le estensioni, possiamo rivederlo poiché molte delle risposte esistenti sono ora tecnicamente errate. Dovremmo aggiornare questa risposta invece di avviarne una nuova.
Nathan Koop,

3
@Nathan Koop: potrei sbagliarmi, ma non credo che il sistema di estensione di Chrome sia abbastanza potente da consentire qualcosa come Firebug.
Sasha Chedygov,

1
controlla questo link per ottenere il firebug sul browser: getfirebug.com/releases/lite/chrome
Techie,

Risposte:


243

Esiste uno strumento simile a Firebug già integrato in Chrome. Basta fare clic con il tasto destro in qualsiasi punto di una pagina e scegliere "Ispeziona elemento" dal menu. Chrome ha uno strumento grafico per il debug (come in Firebug), quindi puoi eseguire il debug di JavaScript. Fa anche bene l'ispezione CSS e può persino cambiare il rendering CSS al volo.

Per ulteriori informazioni, consultare https://developers.google.com/chrome-developer-tools/


19
++ Questo è abbastanza buono per la risoluzione dei problemi specifici di Chrome. Se voglio introspezioni più profonde, posso farlo con Firebug. Ora con la nuova modalità sviluppatore di IE8, tutti i principali browser hanno incorporato le modalità di sviluppo. Bei tempi.
pistole

1
Ah, mi ci è voluto un po 'per trovarlo, ma c'è anche la funzionalità di modifica html di firebug, nello stesso posto in cui puoi modificare il CSS, la barra degli strumenti dello sviluppatore, fare doppio clic su un elemento, digitare e premere invio, e lì vai, html modificato.
Kzqai,

4
Chrome Developer Tools (ctrl + shift + j) supporta il debug Javascript come Firebug. Fai clic sulla scheda Script, quindi sulla seconda icona in basso (> =) con una descrizione comandi di "Mostra console". Da lì puoi eseguire i comandi Javascript come la console Firebug.
Pierre-Antoine LaFayette,

1
Ricorda che su alcuni sistemi basati su Linux non viene installato automaticamente, quindi è necessario installarlo manualmente: sudo apt-get install chromium-browser-inspector
Manuel

1
L'attuale sviluppo build 4.0.xxxx ha una serie di strumenti per sviluppatori. Conoscevo le cose degli elementi di ispezione prima, ma senza il pannello "Net" non era abbastanza buono. Ma ora esiste un pannello "risorse" che sembra funzionare abbastanza bene e ha tutti gli stessi filtri di firebug (script, xhr, immagini, ecc.). Uso la build Dev da una settimana e sembra abbastanza stabile. Ho appena impostato il mio browser predefinito su Chrome - ora è anche il mio browser di sviluppo! :)
Mark J Miller,

37

Firebug Lite supporta l'ispezione di elementi HTML, lo stile CSS calcolato e molto altro. Dal momento che è puro JavaScript, funziona in molti browser diversi. Includi semplicemente lo script nella tua fonte o aggiungi il bookmarklet alla barra dei segnalibri per includerlo in qualsiasi pagina con un solo clic.

http://getfirebug.com/lite.html


Ottimo collegamento! Non sapevo della versione di IE
Patrick Desjardins il

15

Basta aggiungere alcuni punti di discussione come qualcuno che utilizza Firebug / Chrome Inspector ogni giorno:

  1. Al momento in cui scrivo, c'è solo un ispettore DOM di Google e no, non ha tutte le funzionalità di Firebug

  2. Inspector è una versione 'lite' di Firebug: l'interfaccia non è buona come IMO, l'ispezione degli elementi in entrambe le versioni recenti è ora goffa, ma Firebug è ancora migliore; Mi ritrovo a cercare l'amore per Chrome (poiché è un'esperienza del browser migliore e più veloce), ma per il lavoro di sviluppo, fa ancora schifo per me.

  3. L'anteprima / modifica live di DOM / CSS è ancora molto migliore in Firebug; i CSS calcolati e la vista del modello box sono migliori in Firebug;

  4. In qualche modo è più semplice leggere / utilizzare Firebug forse a causa della facilità di navigazione, manipolazione / modifica del documento in diverse aree chiave? Chissà. Sono abituato all'interfaccia e penso che Chrome Inspector non sia buono, anche se è una cosa soggettiva, lo ammetto.

  5. La scheda Cookie / Net è estremamente utile per me in Firebug. Forse Chrome Inspector ce l'ha adesso? L'ultima volta che ho verificato non è stato possibile, perché Chrome si aggiorna in background senza il tuo intervento (ottiene il tuo consenso per impostazione predefinita come tutti i buoni signori).

  6. Ultimo punto: il giorno in cui Google Chrome ottiene un Firebug completo è il giorno in cui Firefox praticamente muore per gli sviluppatori perché Firefox ha avuto 3 anni per rendere Gecko il motore di layout di Firefox più veloce di WebKit e loro no. Mi spiace dirlo senza mezzi termini, ma è la verità.

Vedi, ora tutti vogliono allontanarsi da Flash al posto di jQuery motivato dall'accessibilità e dall'interattività mobili (iPhone, iPad, Android) e JavaScript è "improvvisamente" un grosso problema (questo è sarcasmo), quindi la nave ha navigato, Firefox. E questo mi rende triste, come fanperson di Mozilla. Chrome è semplicemente un browser migliore fino a quando Firefox non aggiorna il proprio motore JavaScript.


Firefox sta andando in discesa. A partire da ora (2013) i devtools di Chrome sono molto più potenti di firebug ... e firefox sta concentrando tutti i suoi sforzi su Firefox OS che non è nemmeno vicino al frodo di Android .. non hanno nemmeno fatto molti sforzi per creare js e rendering Più veloce.
Phyo Arkar Lwin,



9

Puoi impostare questo bookmarklet nella "Barra dei segnalibri" per avere Firebug Lite sempre disponibile nel browser Chrome / Chromium (inseriscilo come 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);


4

jQuerify è l'estensione perfetta per incorporare jQuery in Chrome Console ed è semplice come puoi immaginare. Questa estensione indica anche se jQuery è già stato incorporato in una pagina.

Questa estensione viene utilizzata per incorporare jQuery in qualsiasi pagina desiderata. Permette di usare jQuery nella shell della console (è possibile richiamare la console di Chrome di Ctrl+ Shift+ j".).

Per incorporare jQuery nella scheda selezionata, fare clic sul pulsante di estensione.



3

Bene, è possibile abilitare gli script Greasemonkey per Google Chrome, quindi forse c'è un modo per installare Firebug usando questo metodo? Anche Firebug Lite funzionerebbe, ma non è proprio la stessa sensazione dell'uso di quello completo :(

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



3

Dimentica tutto ciò di cui hai bisogno, questo ispettore indipendente dal browser, dom updater

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

basta aggiungere un segnalibro e andare a qualsiasi pagina Web e fare clic su quel segnalibro.

questo è in realtà il progetto Mozilla Goggles, incredibile incredibile incredibile ...


Lo stanno chiudendo.
Steve Moretz,

3

F12 (solo su Linux e Windows)

O

Ctrl I

( Ise sei su Mac)



1

Se stai usando Chromium su Ubuntu usando il ppa notturno, allora dovresti avere chromium-browser-inspector

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.