Sono uno sviluppatore web alle prime armi e ho ricevuto Firebug consigliato per il debug più volte. Finora, tuttavia, ho appena utilizzato gli strumenti per sviluppatori integrati di Chrome. Sembra fare tutto ciò che fa Firebug ed è più pulito e più organizzato come bonus.
Man mano che divento più avanzato nel mio debug, ci sono funzionalità di Firebug che mi perderò con DevTools di Chrome? Se sì, quali sono?
Correlati: debugger simile a Firebug per Google Chrome
Risposte:
Ho usato Firebug dall'inizio ed è stata una manna dal cielo come l'invenzione del fuoco. Ma poi Chrome è uscito con il suo debugger e l'ho provato. Ho continuato a utilizzare Firebug, ma ho tenuto d'occhio gli strumenti di sviluppo di Chome e alla fine non sono più riuscito a trovare un motivo per non cambiare dopo che gli strumenti JSON sono stati aggiunti nella v12.
Il DevTools di Chrome è un vero toccasana perché ha:
AGGIORNAMENTO: 2 anni dopo devo congratularmi con il team di Firefox per aver fatto enormi progressi. Detto questo, il team e il debugger di Chrome compiono enormi passi avanti su base mensile, guidando il settore. Aggiornerei l'elenco sopra, ma francamente riempirebbe l'intera pagina.
Gli Strumenti per sviluppatori di Chrome hanno assunto le funzionalità di Firebug, quindi tutte le funzionalità e la familiarità principali sono presenti (come $0, e consoleoggetto).
Ci sono alcune piccole differenze, ad esempio DevTools non ha un pannello CSS (sebbene i fogli di stile CSS possano essere manipolati nel pannello Elementi ).
Gli strumenti di Chrome hanno inoltre i pannelli Timeline , Profili e Archiviazione . Il pannello Timeline registra il caricamento, il rendering CSS e l'analisi JavaScript. Il pannello Profilo profila l'utilizzo delle risorse e il pannello Archiviazione mostra e consente modifiche nel database del sito, nella memoria locale, nella memorizzazione della sessione e nei cookie.
Infine, entrambi gli strumenti hanno le proprie variazioni minori, che rendono le varie azioni un po 'più facili o più difficili. Il mio consiglio è di utilizzare Firebug per Firefox e DevTools per i browser Webkit, poiché solo Firebug Lite funziona su Chrome e manca di molte funzionalità del normale Firebug (ei DevTools sono integrati in Chrome).
Mi sento molto più a mio agio usando Firebug. Non riesco a pensare a dettagli al momento, ma a volte cercherò di eseguire il debug di qualcosa in Safari o Chrome e sembra un tale PITA che avvio Firefox e faccio qualsiasi cosa rapidamente.
La scheda DOM è un vantaggio, per uno. È più accessibile e ben strutturato rispetto all'equivalente di Chrome. Preferisco anche il modo in cui DOM e altri oggetti JS vengono registrati sulla console in Firebug.
Anche i plug-in Firebug come Pixel Perfect sono molto utili. Non so se esiste uno strumento del genere per Chrome.
Nel complesso, non importa perché devi testare in entrambi i browser, comunque. E IE, quindi potrei anche confrontarlo con gli strumenti di sviluppo di IE (che sono migliorati, ma non sono ancora buoni rispetto a FF o Webkit).
Non penso che ci sia qualcosa di avanzato in particolare presente in Firebug ma non in Chrome che ti mancherà.
EDIT : Questo era vero, ma Chrome Dev Tools lo ha implementato.
Firebug può cercare in tutti gli script caricati su una pagina. Chrome Dev Tools può cercare solo nello script attualmente selezionato, AFAIK.
Per quanto ne so, Firebug è l'unico in grado di modificare il codice HTML e il testo dal vivo mentre lo digiti. Molto utile, ad esempio, se stai cercando di vedere come il testo si adatterebbe a un contenitore e aggiungere un carattere alla volta.
In Chrome, quando modifichi l'HTML, devi premere TAB o INVIO per uscire dalla "modalità di modifica" e vedere le modifiche sulla tua pagina.
In Firebug puoi anche inserire subito il codice HTML. In Chrome, devi fare clic con il tasto destro e scegliere "Modifica HTML". In caso contrario, verrà visualizzato come in <b> grassetto </b>.
Voglio davvero passare a Chrome, dal momento che sembra funzionare più velocemente, ma l'editing dal vivo è troppo importante per me.
La selezione del mouse che Firebug ha è ottima, ma non riesco a trovarla negli Strumenti per sviluppatori di Chrome.
Mi dà fastidio perché non riesco a trovare un tasto di scelta rapida per esso in Firebug, mentre Chrome lo manca completamente.
Sono uno sviluppatore noob, quindi il mouse viene ancora utilizzato la maggior parte del tempo durante lo sviluppo.
All'epoca in cui è stata posta questa domanda, Firebug era una bestia, ma ora gli strumenti per sviluppatori di Chrome (DevTools) sono utili per gli sviluppatori web. Anche se non mi sto lamentando di Firebug perché ho imparato lo sviluppo web usando Firefox con Firebug.
È stato un ottimo strumento per lo sviluppo web e ha introdotto tutte le principali funzionalità di DevTools e DevTools di Firefox. Tuttavia, sono passato ai Chrome DevTools anche se non coprono tutte le funzionalità di Firebug, perché sono leggeri e molto più veloci di Firebug, l'accesso a localStorage è facilmente definito e le fonti sono organizzate lì secondo me.
Qui elencherò come le funzionalità sono uniche in Firebug,
Ricerca :
L'opzione di ricerca è ben definita in Firebug, perché è facilmente accessibile e possiamo cercare parole chiave con distinzione tra maiuscole e minuscole e espressioni regolari .
DOM:
È possibile accedere facilmente alla struttura DOM in Firebug con varie opzioni di filtro come Mostra proprietà definite dall'utente , Mostra funzioni definite dall'utente e così via.
Biscotti:
Firebug ci consente di creare i nostri cookie e fornisce la possibilità di esportare i cookie .
Rete / Rete:
Firebug ha un pannello Net dove i DevTools lo chiamano Network . Entrambi sono utili per analizzare tutte le richieste fatte per caricare le risorse e il loro stato. In Firebug, possiamo facilmente cogliere l' IP remoto delle risorse .
Fonti:
Anche se Source Edit è disponibile in DevTools, credo che Firebug sia migliore durante l'utilizzo Source Edit , perché se vuoi modificare un file CSS all'interno di DevTools, devi andare al pannello Sources , quindi premere Ctrl+ Oper trovare il file. Solo allora puoi modificare il file. In Firebug puoi facilmente trovare la Modifica sorgente in ogni scheda del menu.
Supporto per dojo:
Una volta che ero uno sviluppatore di dojo, Firebug è stato facilmente esteso per supportare lo sviluppo di dojo utilizzando l' estensione Dojo Firebug .
Firebug 2.0 visto oggettivamente ha molte piccole funzionalità, che i Chrome DevTools non hanno. Alcuni di loro sono elencati qui:
Generale
Una "caratteristica" che va oltre l'usabilità è che Firebug è open source . Quindi tutti possono parteciparvi.
Detto questo, Chrome DevTools (così come Firefox DevTools) hanno molte più funzionalità e altri vantaggi sempre più piccoli rispetto a Firebug poiché il team dietro Firebug è molto piccolo rispetto ai team dietro gli altri DevTools.
Inoltre, Firebug 3+ si integra in Firefox DevTools integrato , il che significa che quelle versioni ereditano tutte le funzionalità di Firefox DevTools e possono aggiungere funzionalità aggiuntive.
Firebug ha la possibilità di collegare altri plugin come Firecookie . Per il resto sono abbastanza simili, è tutta una questione di gusto secondo me.
chrome.devtoolsAPI .
Penso che gli strumenti di sviluppo siano simili ma ho avuto problemi a costringere Chrome a non memorizzare nella cache nulla. Anche l'impostazione dell'impostazione "Disabilita cache" di Chrome non ha funzionato il 100% delle volte; Non sono sicuro del perché.
Non ho avuto questo problema con Firefox / Firebug, quindi lo sto ancora utilizzando.
Aggiungendo i miei pochi centesimi ...
Chrome Inspector non è riuscito a ordinare le proprietà CSS in ordine alfabetico, mentre Firebug potrebbe farlo come un incantesimo. Aiuta quando si ispeziona un elemento CSS e è necessario prenderlo, firebug è utile su questo.
Secondo una buona pratica di codifica CSS, è sempre meglio avere le proprietà CSS ordinate alfabeticamente nel codice.
Quando lavori a un progetto coinvolto con molti script, in Firebug sotto il tag script hai la possibilità di cercare un file js nella casella dei suggerimenti fornita. Dove, come con Chrome, avrai una vista ad albero zoppo per individuare il tuo file JS, che è noioso vedere lo spazio dei nomi del tuo file js e attraversare l'albero.
Questa opzione potrebbe non interessare chiunque abbia a che fare con piccoli file JS nel proprio progetto. Questa funzione è un botto con Firebug che uso quando i miei script sono più di 1000 file JS.
Ho quasi fatto il passaggio oggi, ma ho notato che non posso fare clic con il pulsante destro del mouse su CSS modificato in Chrome e copiare le dichiarazioni di regole o stili come posso fare in firebug. DIO Vorrei che Firefox non iniziasse improvvisamente a succhiare o non avrei questo problema.
Adoro lo strumento di sviluppo di Chrome, ma a volte mi sono perso queste potenti funzionalità di Firebug.
Funzione di richiesta "Modifica e invia di nuovo"
Con la funzione "Modifica e invia di nuovo" negli strumenti per sviluppatori di Firefox (Replay XHR o qualcosa in Firebug), puoi riprodurre la richiesta XHR con modifiche nella richiesta, comprese le intestazioni della richiesta, il corpo della richiesta, il metodo http e persino l'URL. Replay XHR di Google Chrome riproduce semplicemente la richiesta e non consente alcuna modifica alla richiesta.
Uso Firefox Devtools quando ho bisogno di questa funzione.