Gli sviluppatori di pensiero è venuto a favore di Firefox dopo l'invenzione di Firebug – un popolare strumento di debug – Chrome di programmazione anche Web include alcuni strumenti utili per il debug di CSS. Sua built-in pannello di "Developer Tools" consente di controllare il CSS per gli elementi HTML e di evidenziare le parti della pagina, dandovi una rappresentazione visiva della struttura sottostante che rende – e pause – pagine Web. Alcune estensioni come "Web Developer", precedentemente disponibile solo su Firefox, aggiungono strumenti aggiuntivi che consentono di attivare o disattivare gli stili o inviare codice al validatore W3C.
Istruzioni
1
Vai al Chrome Web Store e scaricare l'estensione "Web Developer" di Chris Pederick. Questa estensione viene fornito con collegamenti rapidi per Validator, gli Aggiustatori di dimensioni di schermo e strumenti CSS per consentire di attivare o disattivare gli stili o modificarli.
2
Fare clic sull'icona a forma di ingranaggio che è apparso dopo aver installato l'estensione "Web Developer". Fare clic su "Strumenti" nel menu a comparsa e selezionare "Convalida CSS." Verrà visualizzata una nuova scheda visualizzazione dei risultati di un controllo di validità CSS dal servizio di validazione del W3C. Il tuo sito Web deve essere già sul Web per questo al lavoro. Quando si ottiene un elenco di errori, passare attraverso di loro e apportare correzioni. Non è necessario correggere gli errori di proprietà con prefisso vendor come "- webkit - alcuni-proprietà."
3
Premere "Ctrl + Maiusc + I" per caricare il pannello strumenti per gli sviluppatori in Chrome. Questo viene fornito con Chrome e agisce simile a Firebug in Firefox. Fare clic su "Elementi" per visualizzare la struttura del documento per il codice HTML. Fare clic su una freccia per visualizzare i tag nidificati di un tag. Posiziona il tag per evidenziarli in blu nella finestra del browser. Vedrete le regole di stile CSS nel lato destro del pannello strumenti per gli sviluppatori.
4
Controllare i margini e spaziatura interna attorno agli elementi HTML per avviare fiutare eventuali bug di layout. Si libra sopra il tag che crea l'elemento evidenziarlo e visualizzare i margini in un blu più scuro attorno all'elemento. Si tratta di un modo rapido per vedere quale elemento e quale tipo di spaziatura sta causando il layout emettere. Dopo aver identificato il problema, potete tornare all'editor di codice e sapere quale riga di codice per correggere.
5
Scopri quali elementi sono contenente gli elementi di disturbo. Problemi includono elementi mobili che si sovrappongono le parti inferiori dei loro contenitori ed elementi bloccati nei contenitori sbagliati. A volte, con siti Web affetti da "divitis" – troppi div utilizzato per strutturare la pagina – si perde traccia di cosa va dove. Più snella codice con commenti eviterà questi problemi in futuro.
6
Se è necessario fissare dimensioni, misurare un elemento sullo schermo. Andare all'icona dell'ingranaggio e fare clic su "Display righello" sotto la scheda "Varie", fare clic il mirino cursore sullo schermo e trascinare fino a quando si crea una casella attorno all'elemento che si desidera misurare. La larghezza e l'altezza verranno visualizzati come valori di pixel in una barra nella parte inferiore della schermata del browser.
Consigli & Avvertenze
- Leggi "divitis" e come evitare le insidie. Codice magra significa meno codice, che è meno che devi letame attraverso quando le cose vanno male.
- Utilizzare una copiosa quantità di commenti nel codice sia il codice HTML e CSS. Contrassegnare l'inizio e la fine di qualsiasi elemento della pagina in HTML, così non finisce guardando un mucchio di chiusura tag "< div >" nella parte inferiore della pagina senza sapere ciò che ognuno si chiude. In CSS, utilizzare i commenti per scrivere le intestazioni organizzare gli stili in sezioni come "tipografia" per i tipi di carattere e il "layout" per il posizionamento.