it-swarm.it

Che cosa è Google Chrome equivalente a Firebug?

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
29
Evan Plaice

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

32
Mark Hatton

Tasto destro del mouse -> Ispeziona elemento

17
HoLyVieR
13
Emmett

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 sviluppatori che sono approssimativamente equivalenti a Firebug per Firefox (anche se per inciso Firefox ha anche a ispettore incorporato troppo).

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 + I in Windows o Cmd + Shift + I su un Mac

  • F12 Su Windows

  • Fare clic con il tasto destro del mouse in un punto qualsiasi di una pagina e selezionare Ispeziona elemento

5
user9877

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

3
JasonBirch

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 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 da analisi ed esecuzione di JavaScript, layout, ricalcolo in stile CSS e corrispondenza dei selettori, gestione degli eventi DOM, caricamento delle risorse di rete, incendi con timer, richiamate XMLHttpRequest, disegno e altro.

1
mvark