Qual è l'equivalente di Google Chrome per Firebug?

29

Sto cercando uno strumento in grado di:

ispeziona gli elementi HTML
gestire / eseguire il debug di JavaScript
prestazioni del profilo
modificare gli elementi in tempo reale

— Evan Plaice
fonte

32

È integrato. Pagina [carta] -> Sviluppatore -> Strumenti per sviluppatori (in Chrome v5 e versioni precedenti). È probabile che sia diverso nella v6 poiché il pulsante Pagina sembra scomparire in quella versione.

— Mark Hatton
fonte

3

Lo strumento di Google presenta alcuni inconvenienti: visualizzare le richieste Ajax non è così semplice, non esiste una modalità multilinea che sia conveniente, non è possibile modificare l'HTML in una finestra, non mostra il riempimento / i margini al passaggio del mouse nell'albero HTML, semplicemente non riesci a navigare nel DOM attuale (solo l'albero HTML) e, ultimo ma non meno importante, trovo le funzionalità di modifica CSS più clunkier - per una cosa non c'è il completamento automatico in Google. È ancora molto utilizzabile, ma Firebug è semplicemente migliore.

— CG

2

O maiusc-ctrl-I per il pigro :)

— Tim Post

1

@Mark Nota, sto usando 5.0.375.99. Non sono sicuro che faccia la differenza ora o in futuro.

— Evan Plaice,

1

Nella v6 è Wrench -> Strumenti -> Strumenti per sviluppatori

— enobrev il

17

Tasto destro del mouse -> Ispeziona elemento

— HoLyVieR
fonte

13

Firebug Lite per Google Chrome .

— Emmett
fonte

FireBug Lite è un ottimo strumento e funziona anche su Internet Explorer, Opera, Safari e Firefox: getfirebug.com/firebuglite

— Nat Ryall

5

Sono passati 4 anni da quando è stata posta la domanda originale. Chrome (stable) è ora alla versione 38. Per molto tempo ha incluso un set completo di Strumenti per gli sviluppatori che sono approssimativamente equivalenti a Firebug per Firefox (anche se per inciso Firefox ha anche un ispettore incorporato ).

Alcune cose che gli Strumenti per sviluppatori di Chrome ti consentono di fare:

Ispeziona il DOM
Ispeziona CSS
Accedi a una console JavaScript
Debug JavaScript
Visualizza le richieste di rete, i tempi e le risposte
Visualizza le prestazioni di rendering, JavaScript e CSS
Ispeziona l'archiviazione locale e i cookie

Gli strumenti di sviluppo sono accessibili in vari modi.

Menu Chrome -> Strumenti -> Strumenti per sviluppatori
Ctrl+ Shift+ Iin Windows o Cmd+ Shift+ Isu un Mac
F12 Su Windows
Fare clic con il tasto destro del mouse in un punto qualsiasi di una pagina e selezionare Ispeziona elemento

3

Gli strumenti all'interno del browser sono fantastici nel loro lavoro e di solito sono la prima scelta migliore, ma a volte non forniscono sufficienti dettagli tecnici sui payload di richiesta / risposta HTTP, o sono troppo specifici della pagina.

In questi casi, potresti scoprire che uno strumento di ispezione HTTP dedicato come Fiddler o una delle alternative a Linux fornirà maggiori informazioni.

Se hai davvero bisogno di diventare bare metal, Wireshark va oltre l'HTTP fino all'analisi completa del traffico di rete, ma all'inizio devi essere sopraffatto.

— JasonBirch
fonte

Non posso dire di avere familiarità con il violinista, ma Wireshark è decisamente eccessivamente bare-metal. Wireshark è davvero utile solo se è necessario visualizzare i dettagli dei protocolli di livello inferiore.

— Evan Plaice,

Fiddler è più vicino agli strumenti di sviluppo firebug / chrome per usabilità. Uno dei posti in cui l'ho trovato più utile è quando ho pubblicato file KML sul mio sito Web; puoi vedere le richieste e le risposte dalle applicazioni desktop di Windows come Google Earth, non solo dai browser web. Ho usato Wireshark un paio di volte, ma sono d'accordo sul fatto che non è generalmente utile per le attività quotidiane dei webmaster.

— JasonBirch,

1

Puoi anche provare Speed Tracer open source di Google: http://code.google.com/webtoolkit/speedtracer/

Speed Tracer è uno strumento che consente di identificare e risolvere i problemi di prestazioni nelle applicazioni Web. Visualizza le metriche prese da punti di strumentazione di basso livello all'interno del browser e le analizza durante l'esecuzione dell'applicazione. Speed Tracer è disponibile come estensione di Chrome e funziona su tutte le piattaforme in cui le estensioni sono attualmente supportate (Windows e Linux).

Usando Speed Tracer sei in grado di ottenere una migliore immagine di dove viene trascorso il tempo nella tua applicazione. Ciò include problemi causati dall'analisi e dall'esecuzione di JavaScript, dal layout, dal ricalcolo dello stile CSS e dalla corrispondenza dei selettori, gestione degli eventi DOM, caricamento delle risorse di rete, incendi con timer, richiamate XMLHttpRequest, disegno e altro.

— mvark
fonte