Questo sarà un video piuttosto veloce.
Voglio solo evidenziare alcuni degli strumenti per sviluppatori che Google Chrome ci offre per lavorare
con ogni team e vedere valutare.
Quindi questa è la lista delle cose da fare che abbiamo fatto nell'ultimo video.
È ancora così brutto come allora e voglio solo evidenziare due cose.
Quindi, per prima cosa possiamo effettivamente vedere il sorgente della pagina proprio come abbiamo fatto su altri popoli.
Ognuno è uscito molto presto in questo corso, ma non è tutto ciò che è utile.
Non possiamo davvero cambiare questo o altro, ma quello che possiamo fare è cliccare col tasto destro e cliccare su inspect element.
E ciò che farà sarà lanciare l'ispettore degli elementi.
Quindi vedrai che otterremo questa nuova vista qui.
Quindi ci sono un sacco di schede che impareremo a conoscere tutte queste cose in tempo.
Per ora stiamo solo iniziando dalla scheda di questo elemento.
Quindi, di cosa si tratta è in realtà una bella rappresentazione interattiva di tutti gli elementi.
Quindi puoi vedere che abbiamo il nostro doctype.
Ogni squadra avrà la testa del corpo.
i nostri alleati, così come gli input e la prima cosa che voglio che tu noti è come aleggiare su questi elementi.
O ognuno o noi e
Quindi passiamo sopra questo H-1.
In realtà è evidenziato qui.
Quindi mi fermo qui ed è evidenziato per mostrarmi qui quello di cui stai parlando.
Ecco la casella UL o qui l'input.
Ecco il testo e così via.
Quindi questo è utile di per sé.
il debug delle cose e vedere quale spazio occupa un elemento e dove cade nel flusso di un documento.
Solo per eseguire
Ma quello su cui voglio veramente concentrarmi è la scheda CSSA qui sopra la scheda degli stili.
Quindi selezioniamo una di queste cose.
Selezioniamo questo alleato con classe completata la parte superiore o la seconda.
E ho intenzione di fare clic su di esso.
E qui vedo effettivamente una vista interattiva di tutti gli stili che questo elemento ha applicato
al momento.
classe completata che ha questa linea di decorazione del testo attraverso il codice del moscerino che ho scritto per tutti gli alleati.
Quindi vediamo a causa della
Ha un bordo rosso e ciò che possiamo fare è effettivamente accenderlo o spegnerlo.
Quindi ora ho disattivato tutti i bordi rossi di tutti gli alleati.
Posso riattivarli e posso modificare questo live qui per essere 6 pixel o 10 o un pixel.
Posso cliccare sul colore e scegliere un nuovo colore dargli un bordo blu.
Una cosa che evidenzierò anche se questo in realtà non cambia affatto il nostro file.
Questo è solo nel browser non appena aggiorno questa pagina o chiudo la finestra le mie modifiche vanno via.
Quindi questo è utile in due modi diversi.
Uno è quello di lavorare sul proprio codice della propria pagina e testare le cose e vedere cosa succede quando si cambia il
colore o si cambia il bordo o si modifica qualche altro attributo di alcune delle loro
proprietà e solo visualmente visualizzarlo immediatamente.
L'altra cosa che è utile è in realtà guardando il codice di qualcun altro.
Quindi ho MVNO aperto solo la home page.
Diciamo che volevo sapere qualcosa in più su questo testo proprio qui.
Quello che posso fare è in realtà fare clic destro su di esso e fare clic su ispezionare elemento.
E se clicco su un elemento in particolare, verrà effettivamente evidenziato per me.
Quindi puoi vedere che è saltato subito al tag corretto che è una conoscenza condivisa H-1.
E poi c'è anche un intervallo.
Dice per il web aperto.
Diamo un'occhiata all'H-1.
E qui ho tutti gli stili.
Quindi il primo è il colore.
Se cambio il colore di quell'H-1 cambia.
modo da scorrere verso il basso e ad un certo punto qualcuno che Mazola ha scritto gli stili che applica un font.
Quindi diciamo che volevo sapere il font in
Qui il punto è, e questo è ciò su cui ci concentreremo nei prossimi video è che questo
potrebbe essere ereditato da un altro selettore da qualche parte.
Quindi potrebbe essere stato applicato all'intero corpo non solo direttamente all'H-1.
Quindi se scorri verso il basso sembra che sia proprio qui.
La famiglia di font open invia luce in un senso molto reale se e quello sembra così.
Quindi questo non è per mostrare come effettivamente facciamo il font.
Questo è un video separato in arrivo presto.
Questo è solo per dimostrarti che se volevi trovare qualcosa su una pagina diciamo
che volevo sapere che tipo di elemento sono questi pulsanti proprio qui.
Il ruolo dell'icona che posso selezionare è la lente d'ingrandimento e al passaggio del mouse sulle cose e clic e questo mi mostrerà
proprio qui che un occhio.
Quindi un occhio è un altro tag usato per le icone e possiamo vedere tutti gli stili qui.
La stessa cosa se voglio vedere quale elemento questo è qui posso cliccare su di esso
una volta che hanno la lente d'ingrandimento e vedo che è un tag di ancoraggio e sembra.
tag di ancoraggio che deve significare che stanno impostando un'immagine di sfondo da qualche parte e vediamo dove sia.
Quindi non è un tag immagine è un
Eccoci qui.
Stanno impostando l'immagine di sfondo per essere questa immagine proprio qui.
Quindi per riassumere tutto questo volevo solo dimostrare che puoi aprire questo Inspektor in Google Chrome
e puoi visualizzare HMO e puoi vedere la valutazione e non solo puoi vederlo ma puoi manipolarlo puoi interagire con
esso puoi provare a cambiare le cose e puoi farlo sui tuoi siti o puoi
farlo sul sito di qualcun altro.
utile quando vuoi uscire e replicare il design di qualcuno dove vuoi replicare in effetti.
E quindi è davvero
E quando arriviamo a Javascript, in realtà vediamo che possiamo fare la stessa identica cosa anche per javascript.