Gli sviluppatori pensiero è venuto a favorire Firefox dopo l'invenzione di Firebug - un popolare strumento di programmazione Web di debug - Chrome include anche alcuni strumenti utili per il debug CSS. Il suo pannello built-in "Strumenti di sviluppo" consente di ispezionare il CSS per gli elementi HTML e parti evidenziare della pagina, dando una rappresentazione visiva della struttura sottostante che fa - e si rompe - le pagine Web. Alcune estensioni come "Web Developer", in precedenza disponibile solo su Firefox, aggiungono ulteriori strumenti che consentono di alternare gli stili e disattivare o inviare il codice al validatore W3C.

istruzione

1 Vai al Chrome Web Store e scaricare l'estensione "Web Developer" di Chris Pederick. Questa estensione è dotato di collegamenti rapidi alle validatori, regolatori dimensioni dello schermo e strumenti CSS per consentire di attivare e disattivare gli stili o modificarli.

2 Fare clic sull'icona a forma di ingranaggio che è apparso dopo aver installato l'estensione "Web Developer". Fai clic su "Strumenti" nel menu a comparsa e selezionare "Convalida CSS." Apparirà la visualizzazione dei risultati di un controllo di validità CSS dal servizio di convalida del W3C una nuova scheda. Il tuo sito web deve essere già sul Web per far funzionare tutto questo. Quando si ottiene un elenco di errori, passare attraverso di loro e fare le correzioni. Non è necessario per correggere gli errori causati dalla proprietà vendor-prefisso, come "-webkit-qualche-proprietà".

3 Premere il tasto "Ctrl + Shift + I" per caricare il pannello Strumenti di sviluppo in Chrome. Questo è dotato di Chrome e agisce simile a Firebug in Firefox. Fai clic su "Elementi" per vedere l'albero del documento per il codice HTML. Fare clic su una freccia per visualizzare i tag annidati di un tag. Passa il mouse sopra i tag per evidenziarli in blu nella finestra del browser. Vedrete regole di stile CSS nel lato destro del pannello strumenti di sviluppo.

4 Controlla i margini e padding intorno elementi HTML per iniziare a fiutare eventuali bug di layout. Passa il mouse sopra il tag che crea l'elemento sarà evidenziarlo, e la visualizzazione dei margini in un blu più scuro attorno all'elemento. Questo è un modo rapido per vedere quale elemento e che tipo di spaziatura causa il problema di layout. Una volta identificato il problema, si può tornare al tuo editor di codice e sapere quale riga di codice per risolvere.

5 Scopri quali sono gli elementi contenenti gli elementi di difficoltà. I problemi sono gli elementi che si sovrappongono galleggiavano le parti inferiori dei loro contenitori e gli elementi bloccati nei contenitori sbagliati. A volte, con i siti web che soffrono di "divitis" - troppi div utilizzati per strutturare la pagina - si perde traccia di ciò che va dove. codice più snella con i commenti impedirà tali problemi in futuro.

6 Valutare un elemento sullo schermo se devi correggere le dimensioni. Torna l'icona ingranaggio e fare clic su "Visualizza Ruler" nella scheda "Varie". Clicca il cursore a croce sullo schermo e trascinare fino a quando si crea una casella attorno all'elemento che si vuole misurare. La larghezza e l'altezza appariranno come valori di pixel in una barra nella parte inferiore della schermata del browser.

Consigli e avvertenze

• Leggi "divitis" e come evitare le sue insidie. codice magra significa meno code, meno si deve letame attraverso quando le cose vanno male.
• Utilizzare abbondanti quantità di commentare sia il tuo codice HTML e CSS. Mark sia l'inizio e la fine di tutti gli elementi della pagina in HTML in modo da non finire guardando un mucchio di chiusura "<div>" tag nella parte inferiore della pagina senza sapere quello che ognuno si chiude. In CSS, utilizzare i commenti per scrivere le intestazioni organizzare gli stili in sezioni come "tipografia" per i caratteri e "layout" per il posizionamento.