Che tu sia un principiante o un professionista, la risoluzione dei problemi del tuo codice HTML e CSS può essere un vero problema se non sei equipaggiato correttamente. Oggi vedremo alcuni strumenti per aiutarti a forzare la fastidiosa pagina web in sottomissione.
Gli strumenti del browser predefiniti
Prima di lanciarci in strumenti, applicazioni ed estensioni di terze parti, dovresti controllare gli strumenti disponibili nel tuo browser. La maggior parte dei browser moderni ha alcuni strumenti di sviluppo integrati nell'interfaccia.
Diamo uno sguardo veloce ad alcuni degli strumenti che Safari offre agli sviluppatori fin da subito.
Debug in Safari
Gli strumenti di sviluppo predefiniti di Safari sono molto più potenti di quelli a cui la gente attribuisce il merito. Per abilitarli, vai alle preferenze di Safari e seleziona la casella sotto? Avanzate? scheda che dice? Mostra sviluppare il menu nella barra dei menu.? Ora sotto il menu Sviluppo, vai a? Mostra Web Inspector.?
Questo dovrebbe apparire in un menu nella parte inferiore della finestra contenente tonnellate di ottime opzioni per l'ispezione e il debug delle pagine web. Oggi ci concentreremo su due aree chiave che contengono strumenti per il tuo processo di debug: risorse ed elementi.
Sotto la scheda Risorse puoi vedere tutti i file che compongono il sito web. Questi includono script, immagini, html, css, ecc. Puoi anche vedere per quanto tempo ciascun elemento sta caricando e se si verificano degli errori durante il processo di caricamento.
Sotto la scheda Elementi vedrai un profilo espandibile del tuo HTML:
Qui puoi passare con il mouse su porzioni di codice e vederle evidenziate nel sito sopra. Puoi anche fare clic sulla lente di ingrandimento in basso per selezionare direttamente tutto ciò che vedi nella pagina web per l'ispezione. La parte evidenziata nell'anteprima della pagina consente di vedere il riempimento e i margini che influiscono su quell'elemento.
Facendo doppio clic su qualsiasi parte dell'HTML, puoi modificare tutto ciò che desideri. Tieni presente che si tratta di modifiche sicure e non permanenti che visualizzano in anteprima solo le differenze senza influire sul tuo file originale.
Una volta selezionata una sezione o un oggetto, puoi vedere tutti gli stili associati a quell'oggetto all'estremità destra della finestra.
Come con l'HTML, puoi eseguire il debug e sperimentare modificando i tuoi stili qui (doppio clic). Ad esempio, se si desidera modificare il colore del testo dell'intestazione in giallo, fare doppio clic su? Bianco? e digitare un nuovo valore. Puoi anche utilizzare le piccole caselle di controllo per disabilitare porzioni di codice per ulteriore flessibilità di debug.
Infine, facendo clic sulla piccola forma del segnale di stop con una? X? nella parte in basso a destra dello schermo, è possibile visualizzare eventuali errori che si verificano quando la pagina viene caricata (come menzionato sopra, è anche possibile vederli in Risorse).
Come puoi vedere, Safari è un eccellente strumento di debug HTML / CSS tutto da solo. È possibile visualizzare tutti i file associati e vedere come / se stanno caricando, ispezionare da vicino i singoli elementi, modificare sia HTML che CSS direttamente nella finestra del browser e valutare gli errori.
Debug in altri browser
Consulta questi articoli per ulteriori informazioni su come utilizzare gli strumenti di sviluppo predefiniti in altri browser:
- Sviluppo Web con Firefox
- Alla scoperta degli strumenti di sviluppo di Internet Explorer
- Strumenti di sviluppo di Opera
Firebug
Non puoi semplicemente discutere degli strumenti di debug senza attivare Firebug. È ampiamente considerato come l'opzione migliore là fuori per modificare il tuo CSS all'interno del browser.
Firebug è un componente aggiuntivo gratuito per Firefox e contiene tantissime funzioni potenti e facili da usare per gli sviluppatori web. Clicca sull'immagine qui sotto per controllare il sito e scaricare il componente aggiuntivo.
Una volta installato e attivato Firebug, vedrai una finestra molto simile a quella che abbiamo visto in Safari nella parte inferiore dello schermo. Come con Safari, c'è una bella struttura del tuo file HTML con parti selezionabili e l'evidenziazione intelligente nell'anteprima. Qui Firebug trionfa Safari attraverso la codifica a colori dei margini e il riempimento nell'anteprima del sito Web per un facile riferimento visivo.
Facendo clic su una sezione verrà visualizzato il CSS associato sul lato destro.
In alternativa, puoi fare clic sulla scheda CSS e visualizzare l'intero file CSS in una vista completamente modificabile. Come con Safari, le modifiche apportate qui non rappresentano le effettive modifiche al file, ma semplicemente per darti una certa flessibilità per il debug e la sperimentazione.
Questo semplicemente graffia la superficie di ciò che Firebug può fare. Ci sono molte altre funzionalità avanzate per professionisti nuovi e esperti. Che tu sia o meno un utente di Firefox dedicato, dovresti davvero provare Firebug per te stesso.
Firebug Lite
Speriamo che con il nuovo e migliorato sistema di estensioni di Safari 5 vedremo presto un plug-in Firebug ufficiale o altri equivalenti di terze parti. Tuttavia, nel frattempo, se sei su un altro browser puoi utilizzare Firebug Lite, un bookmarklet con molte (anche se non tutte) delle stesse funzionalità di Firebug.
Xyle Scope
Cultured Code, gli sviluppatori dell'app straordinaria produttività? Cose ,? creato una piccola applicazione impressionante per il debugging e il tweaking delle tue pagine web. Xyle Scope costava $ 20 ma è diventato di recente un download gratuito.
Non troverai un collegamento ad esso nella homepage di Cultured Code, quindi immagino che abbiano cessato lo sviluppo di Xyle Scope alla luce del grande successo di Things. Ecco un link diretto alla pagina di download.
Xyle Scope ha una bella vista del riquadro diviso con l'anteprima del sito Web sulla sinistra e tutti gli strumenti sulla destra. È possibile selezionare gli elementi direttamente nella revisione e vedere tutti i loro attributi associati. Ci sono un sacco di informazioni da esaminare qui incluso l'ordine a cascata, gli stili applicati, i selettori, la gerarchia delle pagine e altro. Come per Firebug, Xyle Scope consente di distinguere visivamente tra i margini e il riempimento applicato a un elemento.
Puoi regolare qualsiasi stile che ti piace e persino scegliere di salvare le modifiche. Xyle Scope è uno strumento immensamente utile e poco apprezzato per la regolazione di HTML e CSS. E 'davvero un peccato che non potremmo vedere ulteriori aggiornamenti per il supporto per CSS3 e HTML 5. Se qualcuno sa qualcosa di diverso, fammi sapere!
Snippet di debug CSS
L'ultimo strumento di debug che vedremo è un piccolo trucco intelligente che puoi applicare al tuo CSS per esaminare la stratificazione degli elementi sulla pagina. Non sono sicuro di chi ci abbia pensato prima, ma ho visto il frammento su un certo numero di siti in tutto il web (l'ho trovato in origine).
Chris Page descrive la funzionalità dei frammenti nel seguente modo: "Uso il seguente bit di CSS per visualizzare la struttura di un documento XHTML (o HTML) inserendo un contorno colorato attorno al bordo di ogni elemento. Ad ogni livello nella gerarchia il colore cambia in modo da poter vedere quando? Profondità? i cambiamenti.?
La pagina risultante dovrebbe apparire come l'immagine qui sotto:
Esiste anche una versione leggermente diversa che applica un elemento al passaggio del mouse su ogni riga in modo da visualizzare solo le linee tratteggiate quando si passa con il mouse su una porzione specifica. Altrimenti, la pagina appare normale.
Pensieri di chiusura
Oltre agli strumenti di cui sopra, devi sempre convalidare sia il tuo CSS che il tuo HTML. In questo modo potrai evitare innumerevoli problemi e fornirti informazioni semplici su come codificare meglio le tue pagine.
Spero che gli strumenti di cui sopra si dimostrino utili per la tua ricerca di design e layout dei pixel perfetti. Facci sapere nella sezione commenti sotto quali strumenti usi per eseguire il debug e modificare il tuo HTML e CSS!