Share
È necessario che gli sviluppatori web comprendano e sappiano come utilizzare gli strumenti di sviluppo del browser e in questo tutorial ti presenterò gli Strumenti per sviluppatori di Chrome. Imparerai alcune nozioni di base, iniziando con la marcatura e lo styling di una pagina web.
Una breve nota per gli utenti degli strumenti per sviluppatori esistenti: Lo scopo di questo tutorial è fornire un'introduzione relativamente semplice agli strumenti di sviluppo di Chrome. Se utilizzi uno strumento di sviluppo di qualsiasi browser, come Firebug in Firefox o gli strumenti di sviluppo di IE, potresti scoprire di conoscere già molte delle informazioni trattate in questo particolare tutorial.
Gli strumenti di sviluppo del browser consentono di eseguire il drill-down in una pagina Web e ispezionare praticamente tutto nella pagina. Ad esempio puoi:
Prima di scavare negli strumenti di sviluppo di Chrome, voglio darti solo un breve sguardo agli strumenti di sviluppo forniti dai principali browser. Si noti che questo non è un aspetto completo di questi strumenti e delle loro funzionalità, ma fornisco informazioni di base per ogni strumento.
Puoi utilizzare gli strumenti per sviluppatori in Chrome, Chrome Canary e persino Chromium.
Safari utilizza il codice dal repository di Web Inspector; tuttavia, potresti scoprire che non viene aggiornato tutte le volte che Chrome.
Firebug
Firefox ora ha un proprio set di strumenti di sviluppo che si concentra sul lato visivo delle cose. Per coloro che sono abituati a Firebug, è ancora disponibile come componente aggiuntivo.
Nota: questo tutorial utilizza la build di Chrome di Canary. Pertanto, alcune funzionalità descritte in questo articolo potrebbero non essere disponibili nelle versioni beta o stabili.
Prima di dare un'occhiata al contenuto del Elementi pannello, prendiamo un po 'di tempo per capire i piccoli controlli in alto e in basso. Fare riferimento all'elenco numerato sotto l'immagine seguente che spiega i diversi elementi dell'interfaccia utente nella finestra degli strumenti.
È bene scegliere un layout con cui ti trovi bene. Fare clic una volta nell'angolo in basso a sinistra e notare come il riquadro degli strumenti per sviluppatori si stacca dalla finestra principale, perfetto per le configurazioni multi-monitor. Cliccando e tenendo premuto l'icona in basso a sinistra ti permette di agganciare a destra, in questo modo:
Il Elementi pannello elenca il markup della pagina come viene visualizzato nel browser. Qualsiasi modifica apportata al DOM tramite JavaScript si riflette negli elementi trovati in questo pannello.
Prendiamo familiarità con questo pannello. Come prima, fare riferimento agli elementi dell'elenco sotto lo screenshot seguente che identificano le diverse parti del Elementi pannello.
Il potere dato a noi dagli strumenti di sviluppo è a dir poco sorprendente.
Accentsconagua
La sezione font mostra solo i font che il browser ha dovuto scaricare.
Modifica del DOM all'interno del Elementi pannello è un processo abbastanza semplice. Per eliminare un nodo, basta fare clic con il tasto destro del mouse e selezionare Elimina nodo. Come ci si potrebbe aspettare, l'eliminazione di un nodo genitore cancella anche i suoi figli. Suggerimento pratico: Puoi anche premere il tasto Canc sulla tastiera per eliminare il nodo selezionato.
La modifica del tipo di un elemento è possibile facendo doppio clic sul nome dell'elemento stesso. Ad esempio: il p porzione su un tag di paragrafo. Naturalmente, la modifica di un elemento da un tipo all'altro determina la modifica dei tag di apertura e di chiusura.
La visualizzazione delle risorse della pagina è essenziale per il debug.
Aggiungere attributi può essere ottenuto facendo clic con il tasto destro sull'elemento e selezionando Aggiungi attributo. Il cursore si posiziona immediatamente dove ti aspetteresti, e puoi iniziare a digitare gli attributi che vuoi aggiungere all'elemento. Per esempio: class = "title". Premendo il tasto tab sulla tastiera si posiziona il cursore sulla posizione successiva dell'attributo.
Modifica degli attributi è simile ad aggiungerli. Trova l'attributo che desideri modificare e fai doppio clic sul nome dell'attributo o sul suo valore. Il primo evidenzia il nome dell'attributo e quest'ultimo evidenzia il valore.
Modifica HTML non elaborata è abilitato facendo clic con il tasto destro su un elemento e selezionando Modifica come HTML.
Gli strumenti di sviluppo forniscono alcune tecniche utili per individuare gli elementi nel documento. Sorvolando gli elementi nel Elementi riquadro fa in modo che gli elementi di rendering corrispondenti vengano evidenziati nella pagina. Questo è un ottimo modo per trovare quale elemento nelle corrispondenze degli strumenti di sviluppo corrisponde all'elemento nella pagina.
Naturalmente, non vediamo elementi al di fuori della finestra del browser evidenziati quando si passa sopra gli elementi corrispondenti nella Elementi riquadro. Fortunatamente, vediamo un suggerimento che indica la direzione dell'elemento fuori dalla vista. La ciliegina sulla torta, tuttavia, è la Scorri in vista funzionalità trovata nel menu di scelta rapida di un elemento. Fa esattamente quello che dice: fa scorrere l'elemento in vista.
Gli strumenti per gli sviluppatori hanno anche una funzione di ricerca. Mentre il riquadro degli strumenti di sviluppo è attivo, premi Ctrl + f per aprire la casella di ricerca. Questa è una semplice casella di ricerca del testo; quindi, digitando "body" si troverà la prima istanza del testo "body" nel documento.
Prima di arrivare ai riquadri di stile (sul lato destro) del Elementi scheda, possiamo accedere ad alcune informazioni di stile direttamente da un elemento se ha tutti e tre i margini, i paddings e i bordi specificati nel foglio di stile. Passare sopra uno di questi elementi ci dà un'idea del suo modello di box, come questo:
Quando ti stai chiedendo perché alcuni elementi fluttuanti non si comportano come previsto, la visualizzazione delle informazioni sul margine / riempimento può aiutare a diagnosticare il problema. Ad esempio, potresti scoprire che un elemento è più largo di quello che ti aspettavi a causa del riempimento extra.
Mentre siamo in tema di margini / paddings / bordi, passiamo all'area stili di Elementi pannello e controlla il riquadro "Metriche".
Ciò consente di eseguire il drill down e identificare possibili problemi sul motivo per cui un elemento esegue il rendering in questo modo. È anche un ottimo strumento di apprendimento; se non hai la testa intorno al CSS Box Model, allora il Metrica lo schema è un grande aiuto visivo.
Il Metrica riquadro ti consente di visualizzare dimensioni, spaziatura, bordi e margini degli elementi. Nota come puoi evidenziare su ogni singola porzione per ottenere una rappresentazione visiva di come viene visualizzato nel browser. Il Metrica il diagramma fornisce anche misure basate su pixel per ciascuna porzione dell'elemento, ad es. una regola di stile di imbottitura: 10px 5px (10px in alto e in basso, 5px a destra e a sinistra) mostrerà le misure esatte per ciascun lato dell'elemento.
La visualizzazione delle informazioni sullo stile è divertente, ma immediatamente l'armeggiare con lo stile di qualsiasi pagina è molto più alto nell'olmetro divertente. Che si tratti di educare noi stessi, sperimentare un design o persino comunicare idee ai nostri colleghi, il potere che ci viene dato dagli strumenti di sviluppo è a dir poco sorprendente.
Garantire il stili il pannello viene espanso e fai clic a destra della parentesi graffa aperta. Noterai che un cursore si posiziona automaticamente in modo da poter scrivere una proprietà di stile. Digitare un nome di proprietà, premere tab per spostare il cursore sulla porzione di valore e digitare il valore. Ho intenzione di aggiungere il seguente CSS:
bordo: 1px verde fisso
Il Elementi pannello elenca il markup della pagina come viene visualizzato nel browser.
Quando inizi a digitare il nome della proprietà, Chrome fornisce suggerimenti, offrendo il vantaggio del completamento automatico. Eccezionale! Premere la linguetta seleziona la corrispondenza più simile a ciò che hai digitato e sposta il cursore sulla posizione del valore. Tuttavia, premendo il tasto tasto freccia destra fa sì che il cursore rimanga nella parte della proprietà, ma riempie la corrispondenza più vicina a ciò che hai digitato.
Il completamento automatico funziona anche con i valori delle proprietà. Ad esempio, digitando "pos" * tab * "fi" * tab * crea una proprietà di stile di posizione: fissa. Quando si inseriscono valori basati su pixel / percentuale, come 15% o 10px, possiamo incrementare e decrementare quei valori usando i tasti freccia su e giù. Per incrementare di 10, usa Maiusc + freccia su.
La modifica dei valori dei colori è un gioco da ragazzi grazie al selettore di colori. Dopo aver inserito un valore di colore, fai clic sul quadratino colorato piccolo a sinistra del valore per far apparire lo strumento selettore colore. Puoi anche alternare tra i formati del valore del colore premendo MAIUSC + clic sul quadratino colorato.
È possibile creare una nuova regola di stile facendo clic sull'icona piccola + nel riquadro degli stili. Markup che assomiglia a:
Ciao
Genera automaticamente la seguente regola di stile:
#qualcosa
Markup che assomiglia a:
Ciao
Genera automaticamente quanto segue:
.some-class
Markup che assomiglia a:
Ciao
genera:
.h1
Markup che assomiglia a:
Ciao
Genera automaticamente:
.class1.class2.class3
Naturalmente, le regole di stile possono essere modificate a tuo piacimento.
Il Elementi pannello ti dà molta potenza con la struttura e lo stile della pagina, ma gli strumenti di sviluppo ci danno molti più strumenti essenziali per il nostro lavoro.
Il risorse pannello mostra quali risorse utilizza una pagina. Diamo un'occhiata a ciò che fornisce.
Il Metrica riquadro ti consente di visualizzare dimensioni, spaziatura, bordi e margini degli elementi.
memoria locale.sessionStorage.Gli strumenti per gli sviluppatori hanno anche una funzione di ricerca.
memoria locale, cookie, o qualsiasi altro meccanismo di archiviazione dei dati. Inoltre, alcune risorse, come ad esempio memoria locale può essere modificato tramite gli strumenti di sviluppo.Nonostante la mancanza di utilizzo dei frame nei siti Web di oggi, capire come ispezionare una pagina con più frame è un'abilità preziosa. Nello screenshot seguente, noterai una pagina con colonne in cui ogni colonna rappresenta un diverso frame:
Puoi salvare una risorsa sul tuo computer
Ogni frame è inserito all'interno della propria cartella. Ogni cartella contiene le risorse di ogni pagina e puoi fare clic su ogni pagina per mostrare il loro contenuto. La visualizzazione dei contenuti di una pagina HTML è utile, ma possiamo andare a scavare più a fondo in ogni pagina e visualizzare le sue risorse. È possibile visualizzare JavaScript, CSS, immagini e persino caratteri! Le risorse che contengono codice sono visualizzate nel visualizzatore di codice degli strumenti per sviluppatori, che viene fornito con l'evidenziazione della sintassi e i numeri di riga.
È importante notare che i font di sistema, come Arial o Helvetica, non sono elencati in Caratteri; la sezione font mostra solo i font che il browser ha dovuto scaricare.
Il carattere si ridimensiona in modo che possa adattarsi all'area del contenuto della risorsa; pertanto, ridimensionando l'area del contenuto della risorsa viene ridimensionato anche l'asset!
È chiaro che qualche pensiero è andato all'interfaccia utente di visualizzazione delle immagini.
Gli strumenti di sviluppo visualizzano l'immagine nell'area del contenuto e l'immagine viene ridimensionata in base alle dimensioni dell'area del contenuto. Le immagini con trasparenza (come quella nell'immagine sopra) sono mostrate con una scacchiera sullo sfondo, rendendo più semplice la visualizzazione dell'immagine. Altre informazioni utili, come le dimensioni, la dimensione del file e il tipo MIME sono visualizzate sotto l'immagine.
Il JavaScript! Facendo clic su un file di script viene visualizzato il suo contenuto, ma non molto altro.
Ma non disperare; visualizzare le risorse è semplicemente questo: visualizzare le risorse. In un futuro tutorial, esamineremo il supporto e le funzionalità JavaScript di strumenti di sviluppo.
È possibile visualizzare i diversi fogli di stile caricati dal browser per la pagina Web.
Come con i file JavaScript, non puoi fare molto con le risorse del foglio di stile.
Occasionalmente, il browser non sarà in grado di caricare una particolare risorsa a causa di problemi di rete o errore dello sviluppatore.
Quando ciò accade, appare una piccola notifica rossa a destra della risorsa. Il numero indica quanti errori si sono verificati e il riquadro del contenuto fornisce ulteriori dettagli sull'errore.
Ogni risorsa ha un menu contestuale; semplicemente facendo clic con il tasto destro su una risorsa viene visualizzato un menu simile a questo:
È possibile salvare una risorsa sul computer, aprire una risorsa in una nuova scheda ed eseguire molte altre attività. Facendo doppio clic sulla risorsa si apre la risorsa in una nuova scheda.
Come accennato in precedenza, è possibile visualizzare le informazioni sui cookie per un determinato sito Web. Ad esempio, se si naviga su Twitter mentre si è connessi, è possibile che vengano visualizzate informazioni simili a quanto mostrato in questo screenshot:
Qui, vediamo:
Quando ti stai chiedendo perché alcuni elementi fluttuanti non si comportano come previsto, la visualizzazione delle informazioni margine / riempimento può aiutare a diagnosticare il problema.
.twitter.com consente qualsiasi sottodominio su twitter.com.È possibile eliminare un cookie facendo clic con il tasto destro su un cookie e selezionando Elimina dal menu di scelta rapida.
È interessante notare come i browser utilizzano le informazioni sui cookie per determinare se sei un utente autenticato. Durante l'accesso a Twitter, l'eliminazione dei cookie "auth_token" e "_twitter_sess" ci richiede di accedere dopo aver aggiornato la pagina. Twitter probabilmente memorizza il nostro stato di accesso e altri bit di informazioni sensibili in quei cookie.
Memorizzare e visualizzare coppie chiave / valore in memoria locale è piuttosto facile. Anziché memorizzare le nostre chiavi, utilizzeremo un sito Web esistente come esempio. La seguente schermata mostra la vista di archiviazione locale di una app di Kitchen Sink di esempio realizzata con il framework per applicazioni web mobili Sencha Touch.
Quando si visualizza per la prima volta la pagina, il browser effettua una richiesta per un file CSS. Rinfrescare la pagina sembra molto più acuto perché Sencha ha memorizzato il CSS nella memoria locale. L'app del lavello della cucina presenta alcune coppie chiave / valore interessanti. Ad esempio, una chiave assomiglia a questa:
3a867610-670a-11e1-a90e-4318029d18bb-http: //dev.sencha.com/deploy/touch/examples/production/kitchensink/resources/css/app.css
Il valore per quella chiave inizia con questo:
/ * 45e6f4ffe818855b26f3dcbfc156025eca58e4f5 * / code, pre, pre * font-family: Menlo, Monaco, Courier, monospace
Steve Souders ha scritto sull'archiviazione delle risorse nella memoria locale; è un uso interessante ed eccitante dell'archiviazione locale che può migliorare le prestazioni, in particolare sui dispositivi mobili.
La cache dell'applicazione indica al browser quali risorse deve memorizzare nella cache e Cache dell'applicazione la categoria ci consente di visualizzare ciò che è stato memorizzato nella cache.
Ci sono tre colonne con questa vista:
Consulta questo tutorial se non hai familiarità con la cache dell'applicazione HTML5.
Stiamo appena iniziando. Nella seconda parte, esamineremo più pannelli con una leggera attenzione alle prestazioni, in modo da offrire un'esperienza utente migliore.
