Al volo CSS e più

Firebug. Oh glorioso Firebug. Potete darmi un motivo per amore di Firefox, nonostante i suoi numerosi orribile perdite di memoria. Lei mi auguro che ci sono ancora persone là fuori cercando di aiutare i progettisti / codificatori. Potete darmi un motivo per installare le estensioni. Si salva me abbastanza tempo ed energia che sono in grado di scrivere questo post. Grazie per Firefox, per essere un amico.

Firebug è un'estensione per Mozilla Firefox che è stato progettato per aiutare gli sviluppatori web il loro codice di debug al volo, come pure di disporre di informazioni per quanto riguarda le dimensioni, la struttura, e la composizione di un sito web sono in via di sviluppo. Ho trovato alcune delle sue funzioni superflue sono effettivamente più utile nel mondo reale sviluppatori rispetto alla sua effettiva destinazione. Ecco alcuni dei miei preferiti cose il plugin:

1) Il CSS al volo di editing.

Ho scoperto su questo incidente l'altro giorno, e lo hanno utilizzato probabilmente 50 volte nelle ultime settimane. Basta tirare il vostro Firefox, fare clic su CSS, e si può disattivare, modificare e aggiungere le proprietà CSS al volo, e guardare il browser renderli in tempo reale. Sorprendente. Gran solo per trovare la giusta quantità di imbottitura per il tuo testo, o quando il diamine mettere che "chiaro: galleggiare" immobile. Si può utilizzare per provare qualche altro testo / colori di sfondo, o vedere se 'border: 1px solid nero "davvero non fanno che guardare sidebar pulite. È possibile controllare gli elementi, e poi vedere cosa e dove CSS è applicato a loro, e modificarlo da lì come bene. Nel complesso ... è molto di web design che rende un gioco da ragazzi. Ecco una prima e dopo il tiro.

2) Il Yahoo! YSlow plugin. <- È link. Lo giuro.

Dovrete installare Firebug prima. Si tratta di un plugin per Firefox Firebug. Non funziona stand-alone. Essa, tuttavia, non si chiede per la vostra installazione di Firefox.

Yslow farà uno abbastanza completo controllo punto 13 della tua pagina web, al fine di contribuire a determinare il strozzature. Se si pensa che il più lento parti del tuo sito, e come risolverle ... non si pensa thats un buon passo per rendere più veloce? Ecco la mia pagina principale:

  Performance Grado: C (71) 
 --------------------------- 
  A 1.  Fare un minor numero di richieste HTTP 
  F 2.  Utilizzare un CDN 
  F 3.  Aggiungi un Expires 
  B 4.  Gzip componenti 
  5.  CSS Metti in cima 
  A 6.  JS Metti in fondo 
  A 7.  Evitare espressioni CSS 
  n / a 8.  Marca JS e CSS esterni 
  Prendere in considerazione solo se la vostra proprietà è un comune utente home page. 
  A 9.  Ridurre i lookup DNS 
  A 10.  Minify JS 
  A 11.  Evitare i reindirizzamenti 
  A 12.  Rimuovi duplicati script 
  F 13.  Configurazione ETags 

Nel complesso, che mi punteggi a un 71% (C). Per la mia pagina, che è più che bene. Non ho bisogno eTags, e certamente non è necessario per ospitare i miei 3 immagini su un altro server. Vorrei aggiungere un scade intestazione di quello che posso per assicurare una corretta caching. I'll get su questo punto.

Inoltre, si ispezionare tutti gli elementi sulla tua pagina, e dare loro a voi in un bel po 'di lettura accurata. Ecco la mia home page:

  Svuota cache cache primed 
 ------------------------------------------------ 
  1.3K 1 1.3K 1 documento HTML 
  2.4K 1 0.0K 1 Style Sheet file 
  6.3K 1 0.0K 0 file JavaScript 
  115.5K 3 0.0K 3 Immagini 
  1.2K 4 0.0K 4 CSS Immagini 
  10 9 richieste HTTP 
  126.9K 1.3K Dimensione totale 

Non male ... sono sicuro che ho potuto tagliare l'immagine di dimensioni un po 'giù, ma anche su una connessione dial-up, che sarà carico in circa 20 secondi. La buona notizia è che, una volta che la pagina è in cache, non c'è molto da aggiornare per le successive visite. fresco.

3) in tempo reale di debug JavaScript

Ora, questo è veramente ciò che Firebug è stato progettato per dall'inizio. Mi capita di non utilizzare javascript molto, quindi trovare il precedente utilizza più prossimi a portata di mano. Non sto andando a riscrivere la documentazione per Firebug, ma Ti propongo l'idea di base.

È possibile inserire pause nel vostro Javascript per contribuire a vedere dove e quando qualcosa sta andando storto. Coppia questo con la capacità di guardare le variabili in tempo reale (mentre il vostro javscript è in pausa), e vi sentirete come avete il controllo di quickbasic 4.5 pro ... (perso?) Di Visual Basic 6.0? Ancora troppo vecchio? Ok ... il controllo di un 2007 Shelby. * Sigh *. Un lotto di controllo. Un lotto di controllo.

4) Whisper tranquilla debug

Ci sono più metodi di Io vado alla lista (di nuovo, leggere la documentazione), ma il più utile per me è il
console.log () metodo. che ti permette di uscita informazioni al Firebug console senza dover utilizzare fastidiosi "alert ()" finestre o l'output di testo che avrà un impatto tuo sito in formato. Si potrebbe anche mettere po 'di uova di Pasqua sul tuo sito per coloro che utilizzano Firefox ....

Stumble it!

Post Info

Questa voce è stato postato su Mercoledì, 24 Ottobre 2007 ed è elencato sotto css, lo sviluppo. Ha 91 punti di vista

Tag: CSS, plugin, il software, la razionalizzazione

Commenti feed. | Lascia un commento | Lascia Trackback.

Post Precedente: Guadagna da distacco »
Next Post: 390 Club »

Più visti posti