2009-12-11 1 views
6

Desidero raccogliere i migliori strumenti di debug per tutti i browser. Quindi quello sarebbe probabilmente Firebug per Firefox, ma cosa usi per IE? Safari? Musica lirica? Opera Mini? Che altro c'è là fuori? Ci sono strumenti che funzionano bene per IE 6? IE 5?Quali strumenti usi per eseguire il debug di HTML/JS nel tuo browser?

+0

e ora per un seguito una domanda sul perché ci sono assolutamente zero strumenti equivalenti per il debug direttamente su Android (vale a dire nessuno della merda remota che non funzionerà sul campo quando non si dispone di una connessione Internet o dispositivo non Android disponibile.) – Michael

+0

@ Michael: Fai la domanda e pubblica il link come commento qui :-) –

risposta

13

Per Firefox (qualsiasi versione> 2.0), utilizzare Firebug.

+0

Sto postando questo per completezza e quindi possiamo usare il voto per trovare uno strumento migliore (se ce ne dovrebbe essere uno :) –

+0

+1 C'è altro? – OscarRyz

+0

Firebug batte tutto. L'unica cosa che non può fare è trovare errori di rendering di IE, a quel punto sei tornato all'orrore dello sviluppo web in IE. –

5

Per IE, sia gli strumenti di sviluppo inclusi in IE 8 o il Developer Toolbar.

+0

Per quali versioni di IE funziona? –

+0

IE 6 e 7. Gli strumenti di sviluppo in IE 8 sono superiori in ogni caso, quindi non manca nulla. – Joey

13

Here is a roundup

  • Firefox ha Firebug e Webdeveloper Toolbar,
  • Safari e Chrome ha l'ispettore,
  • Opera ha Dragonfly,
  • Internet Explorer ha il Developer Toolbar

Firebug ha ancora le caratteristiche più avanzate, ma gli altri si stanno avvicinando.

+3

+1 per chrome Dev Tools, a mio avviso molto meglio di Firebug; – Rixius

0

Per Firefox 3.5, utilizzare Firebug.Per IE8, utilizzare strumenti di sviluppo

1

Firebug/Firebug Lite ovviamente :) JS console di Google Chrome è anche molto bello

0

Utilizzando Firefox, oltre a Firebug (come molti hanno detto in precedenza) Trovo che lo strumento di Mozilla Venkman JavaScript debugger sia piuttosto utile di tanto in tanto.

0

Una serie di chiamate di funzione window.alert posizionate in modo strategico è utile in un pizzico. Se posso, provo a usare Firebug Lite.

+0

Handy ma blocca anche il flusso dell'app. –

1

Suggerisco di utilizzare uno DIV con id="debug" e quindi aggiungere del testo ad esso per il debug. Ciò consente di sovrapporre l'HTML con l'output di debug e non blocca il flusso dell'app. Usa uno z-index per assicurarti che rimanga in cima e dargli trasparenza in modo da poterlo vedere attraverso. Vedi this answer per il CSS.

Oppure apri una nuova finestra e aggiungi qui i tuoi messaggi di debug.

È possibile utilizzare questo con nidificato DIV s per implementare la registrazione a pieno titolo. Dai un'occhiata allo this article on A List Apart e al log4js per avere qualche idea.

1

Firebug non è lo strumento più leggero, in modo a volte uso altri add-on per Firefox:

  • Se stai giocando con XPath, XPath Checker è maneggevole e leggero. L'ho ottimizzato da solo tuttavia per visualizzare l'origine HTML dei risultati come testo anziché come nodi HTML.

  • Tamper Data o HttpFox sono utili per vedere la richiesta da pagine web (o meglio, Adblock Plus può anche essere;), vedere i cookies impostati dal server web, ecc