Quali funzioni Firebug avere quel Developer Tools di Chrome non hanno? [chiuso]

StackOverflow https://stackoverflow.com/questions/3124974

  •  30-09-2019
  •  | 
  •  

Domanda

Sono uno sviluppatore web alle prime armi, e ho avuto Firebug consigliato per il debug più volte. Finora, però, ho appena usato Chrome built-in strumenti di sviluppo. Sembra di fare tutto quello che Firebug fa, ed è più pulita e più organizzata come un bonus.

Come ho più avanzata nel mio debug, ci sono caratteristiche che Firebug è che mi mancherà fuori su con DevTools di Chrome? Se sì, quali sono?

correlati: Firebug-like debugger per Google Chrome

È stato utile?

Soluzione

Ho usato Firebug fin dall'inizio ed è stata una manna dal cielo, come l'invenzione del fuoco. Ma poi Chrome è uscito con il suo debugger e ho provato. Ho continuato a utilizzare Firebug, ma tenuto d'occhio strumenti di sviluppo di Chome e, infine, non poteva venire più a lungo con un motivo per non passare dopo strumenti JSON sono stati aggiunti nel v12.

DevTools di Chrome calci culo perché ha:

  • Costruito nel Timeline, Profiler e analizzatore Heap
  • Costruito nel strumento Audit
  • L'accesso può e modificare Local / SessionStorage, biscotti, SqlLite DB, WebSQL, AppCache ecc ...
  • rete WebSockets sniffing
  • JS debugger presenta alcune caratteristiche (ad esempio punti di interruzione WebWorker)
  • JS debugger ti permette di modificare JS al volo ed eseguirlo (JSFiddle w / o il violino)
  • Ogni finestra viene presentata una finestra devtools se ti piace; Firebug è un singoletto
  • Firebug perturba pagina rallentando il suo carico verso il basso e iniettando CSS per la sua caratteristica ispettore

UPDATE: 2 anni più tardi devo congratularmi con il team di Firefox per fare enormi incursioni. Detto questo, il team di Chrome e debugger fare enormi passi avanti su base mensile, leader del settore. Mi piacerebbe aggiornare l'elenco di cui sopra, ma francamente sarebbe riempire l'intera pagina.

Altri suggerimenti

Non ho incontrato una caratteristica Firebug ho ancora perso dopo il passaggio a Chrome.

mi sento molto più a suo agio con Firebug. Non riesco a pensare delle specifiche in questo momento, ma a volte cercherò di debug qualcosa in Safari o Chrome e sembra che una tale valle di lacrime che io lancio Firefox e ottenere quello fatto in fretta.

La scheda DOM è un plus, per uno. E 'più accessibile e ben definito di equivalente di Chrome. Io preferisco la via DOM e altri JS oggetti vengono registrati alla console di Firebug, anche.

Firebug plug-in come Pixel Perfect sono molto utili pure. Non so se esista un tale strumento per Chrome.

Nel complesso, non importa perché devi testare in entrambi i browser, in ogni caso. E IE, così potrebbe anche confrontarlo con strumenti di sviluppo di IE (che hanno migliorato, ma ancora non sono buone rispetto a FF o Webkit di).

Non credo di qualcosa avanzata, in particolare, presente in Firebug ma non in Chrome che ti mancherà.

Gli strumenti di sviluppo di Chrome ha assunto le caratteristiche di Firebug, in modo che tutti le caratteristiche principali e la familiarità sono lì (come ad esempio il $0, e l'oggetto console).

Ci sono alcune piccole differenze, come ad esempio i DevTools non hanno un CSS pannello (anche se i fogli di stile CSS possono essere manipolati in Elementi pannello).

strumenti di Chrome hanno inoltre le Linea temporale , Profili e archiviazione pannelli. Il Linea temporale Pannello registri di carico, il rendering CSS, JavaScript e l'analisi. Il Profilo profili a pannelli utilizzo delle risorse e bagagli spettacoli del pannello e consente cambiamenti nel database del sito, archiviazione locale, memorizzazione delle sessioni, e biscotti.

Infine, entrambi gli strumenti hanno la loro minore varianze, che rendono varie azioni un pochino più facile o più difficile. Il mio consiglio è di usare Firebug per Firefox, e DevTools per i browser Webkit, dal momento che solo Firebug Lite funziona su Chrome, e manca molte caratteristiche della normale Firebug ha (e le DevTools sono costruiti in Chrome).

Modifica :. Questo usato per essere vero, ma Chrome strumenti di sviluppo implementato

Firebug può cercare in tutti gli script caricati su una pagina. Chrome Dev Tools puoi solo cercare nello script correntemente selezionato, per quanto ne so.

Per quanto posso dire, Firebug è l'unico che può modificare codice HTML e il testo dal vivo durante la digitazione. Molto utile, se siete per esempio cercando di vedere come il testo si adatterebbe in un recipiente e aggiungere un carattere alla volta.

In Chrome quando si modifica il codice HTML, è necessario premere TAB o INVIO per uscire "modalità di modifica", e vedere i cambiamenti nella tua pagina.

In Firebug è possibile anche inserire codice HTML subito. In Chrome, è necessario fare clic destro e scegliere "Modifica HTML". In caso contrario, verrà visualizzato come grassetto .

Ho molta voglia di cambiamento a Chrome, dal momento che sembra correre più veloce, ma la modifica dal vivo è troppo importante per me.

Il Firebug selezione del mouse ha è grande, ma io non riesco a trovarlo negli strumenti per sviluppatori di Chrome.

Mi da fastidio perché non riesco a trovare un tasto di scelta rapida per esso in Firebug, mentre Chrome manca completamente.

Sono uno sviluppatore niubbo, in modo che il mouse è ancora usato la maggior parte del tempo in cui in via di sviluppo.

Al momento questa domanda è stato chiesto Firebug era una bestia, ma ora gli strumenti di Chrome Developer (DevTools) sono a portata di mano per gli sviluppatori web. Anche se non sono farneticando su Firebug perché ho imparato lo sviluppo web utilizzando Firefox con Firebug.

E 'stato un ottimo strumento per lo sviluppo web e ha introdotto tutte le principali caratteristiche di DevTools e DevTools di Firefox ha. Tuttavia, sono passato alle DevTools Chrome se non coprono tutte le caratteristiche di Firebug, perché sono leggero ponderata e molto più veloce di Firebug, accedendo localStorage è facilmente definito e le fonti sono organizzati lì a mio parere.

Qui ho intenzione di lista come le caratteristiche sono uniche in Firebug,

  • Cerca :

    opzione di ricerca è ben definito in Firebug, perché la sua facilmente raggiungibile e si può cercare parole chiave con maiuscole e minuscole e espressioni regolari .

  • DOM:

    La struttura DOM è facilmente raggiungibile in Firebug con vari Opzioni come Mostra proprietà definite dall'utente , Mostra funzioni definite dall'utente e filtrare così via.

  • Cookie:

    Firebug permette di creare i nostri propri cookie e dà disposizione a Esporta cookie .

  • Rete / netto:

    Firebug ha un pannello di Net wheras le DevTools chiamano Rete . Entrambi sono utili per analizzare tutte le richieste fatte per caricare le risorse e il loro stato. In Firebug, possiamo facilmente cogliere le risorse IP remoto .

  • Fonti:

    Anche se la Modifica origine è disponibile nelle DevTools, mi sento Firebug è meglio durante l'utilizzo di Modifica origine , perché se si desidera modificare un file CSS nei DevTools , si deve andare a Fonti pannello, quindi premere Ctrl + O per trovare il file. Solo allora si può modificare il file. In Firebug si può facilmente trovare il Modifica origine sotto ogni scheda del menu.

  • Supporto per dojo:

    Una volta ero uno sviluppatore dojo Firebug è stato facilmente esteso per supportare dojo sviluppo utilizzando il Dojo Firebug estensione .

Obiettivamente visto Firebug 2.0 ha molte piccole caratteristiche, che i DevTools Chrome non hanno. Alcuni di essi sono elencati qui:

Console Pannello

HTML Pannello

CSS Pannello

DOM Pannello

  • Visualizza tutte le proprietà DOM in un unico luogo
  • chiusure
  • Permette di filtrare la visualizzazione da proprietà, funzioni, ecc.

Net Pannello

  • Permette di fermare il XMLHttpRequests
  • informazioni Spettacoli di cache per richiesta

Cookie Pannello

  • Creare e modificare i cookie
  • Il controllo delle autorizzazioni dei cookie
  • Spettacoli formato raw e formattati di cookie
  • Permette di interrompere l'esecuzione di script sul cambiamento dei cookie
  • cookie di esportazione in formato standard

Generale

  • Apri HTML, CSS e JavaScript editor esterno
  • permette di personalizzare le scorciatoie

Una "caratteristica" che va oltre l'usabilità è che Firebug è open source . Così tutti possono partecipare su di esso.

Detto questo, il Chrome DevTools (così come il Firefox DevTools) hanno molte più funzionalità e altri vantaggi più piccoli e più grandi oltre Firebug come il team dietro Firebug è molto piccolo rispetto alle squadre che stanno dietro gli altri DevTools.

Inoltre, Firebug 3+ integra in il built-in di Firefox DevTools , il che significa quelle versioni ereditano tutte le caratteristiche di Firefox DevTools e possono aggiungere ulteriori funzionalità.

Firebug ha la possibilità di avere altri plugin di allegare ad esso come ad esempio Firecookie . Per il resto sono abbastanza simili, è tutta una questione gusto a mio parere.

anche aggiungere che si può copiare selettore CSS XPATH aggiuntivo per un elemento HTML.

Questo è davvero a portata di mano a volte! :))) hahaha

Credo che gli strumenti di sviluppo sono simili, ma non ho avuto problemi costringendo Chrome di non cache di nulla. Anche l'impostazione del Chrome impostazione "Disattiva cache" non ha funzionato al 100% del tempo; Io non so perché.

non ho avuto questo problema con Firefox / Firebug, quindi sto ancora usando.

L'aggiunta miei pochi centesimi ...

  1. Chrome ispettore non poteva specie le proprietà CSS in ordine alfabetico in cui, come Firebug potrebbe fare questo come un fascino. Aiuta quando si ispezionare qualche elemento CSS e necessità di afferrare si tratta Firebug a portata di mano su questo.

    Come per buona CSS codifica pratica, la sua sempre meglio avere le proprietà CSS in ordine alfabetico nel codice.

  2. Quando si lavora su un progetto coinvolto con molta scripts.In Firebug sotto tag script avete un'opzione di ricerca di un file js nella cassetta dei suggerimenti forniti. Dove come con Chrome avrete una vista ad albero zoppo per individuare il file JS, che è noioso per vedere il namespacing del file js e attraversare l'albero.

    Questa opzione potrebbe non interessare nessuno che coinvolge con i file piccoli JS nel loro progetto. Questa caratteristica è un bang su con Firebug che uso quando i miei script sono più di 1000 file JS.

Quasi fatto il passaggio di oggi, ma ho notato che non posso fare clic destro sul CSS modificato in Chrome e copiare la regola o dichiarazioni di stile, come posso in Firebug. DIO Vorrei che Firefox non ha improvvisamente iniziare a succhiare o io non avere questo problema.

Con il debugger cromo posso eseguire il debug della JSNI del mio progetto GWT dove FireBug mostrano solo una funzione anonima e non mi riconosce la funzione actuale a tutti.

Amo strumento dev Chrome, ma qualche volta mi mancava questi potente funzione da Firebug.

  • condizionale punto di interruzione :. Pausa solo a condizione specifica
  • chiamate funzione di registrazione : marcare la funzione e vedere tutto quello che volete sapere in console.
  • Interrompi su Cambia proprietà :. Oggetti Marco e debugger andrà in pausa se la proprietà cambiarsi

"Modifica e inviare di nuovo" caratteristica richiesta

Con la funzione nei tool di sviluppo di Firefox (Replay XHR o qualcosa in Firebug) "Modifica e inviare di nuovo", è possibile riprodurre la richiesta XHR con i cambiamenti nella richiesta, tra cui intestazioni di richiesta, richiesta corpo, http metodo e persino url. Google Chrome Replay XHR riproduce semplicemente la richiesta, e non consente alcuna modifica alla richiesta.

Io uso Firefox Devtools quando ho bisogno di questa funzione.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top