1
00:00:01,440 --> 00:00:03,080
Questo sarà un video piuttosto veloce.

2
00:00:03,090 --> 00:00:07,800
Voglio solo evidenziare alcuni degli strumenti per sviluppatori che Google Chrome ci offre per lavorare

3
00:00:07,800 --> 00:00:09,710
con ogni team e vedere valutare.

4
00:00:09,720 --> 00:00:12,260
Quindi questa è la lista delle cose da fare che abbiamo fatto nell'ultimo video.

5
00:00:12,360 --> 00:00:16,950
È ancora così brutto come allora e voglio solo evidenziare due cose.

6
00:00:17,130 --> 00:00:23,040
Quindi, per prima cosa possiamo effettivamente vedere il sorgente della pagina proprio come abbiamo fatto su altri popoli.

7
00:00:23,040 --> 00:00:28,210
Ognuno è uscito molto presto in questo corso, ma non è tutto ciò che è utile.

8
00:00:28,230 --> 00:00:35,400
Non possiamo davvero cambiare questo o altro, ma quello che possiamo fare è cliccare col tasto destro e cliccare su inspect element.

9
00:00:37,110 --> 00:00:40,170
E ciò che farà sarà lanciare l'ispettore degli elementi.

10
00:00:40,320 --> 00:00:43,170
Quindi vedrai che otterremo questa nuova vista qui.

11
00:00:43,530 --> 00:00:47,080
Quindi ci sono un sacco di schede che impareremo a conoscere tutte queste cose in tempo.

12
00:00:47,160 --> 00:00:50,270
Per ora stiamo solo iniziando dalla scheda di questo elemento.

13
00:00:50,370 --> 00:00:56,700
Quindi, di cosa si tratta è in realtà una bella rappresentazione interattiva di tutti gli elementi.

14
00:00:56,700 --> 00:00:59,280
Quindi puoi vedere che abbiamo il nostro doctype.

15
00:00:59,370 --> 00:01:03,600
Ogni squadra avrà la testa del corpo.

16
00:01:03,840 --> 00:01:11,970
i nostri alleati, così come gli input e la prima cosa che voglio che tu noti è come aleggiare su questi elementi.

17
00:01:11,970 --> 00:01:13,650
O ognuno o noi e

18
00:01:13,710 --> 00:01:15,420
Quindi passiamo sopra questo H-1.

19
00:01:15,690 --> 00:01:17,810
In realtà è evidenziato qui.

20
00:01:18,000 --> 00:01:23,230
Quindi mi fermo qui ed è evidenziato per mostrarmi qui quello di cui stai parlando.

21
00:01:23,260 --> 00:01:27,960
Ecco la casella UL o qui l'input.

22
00:01:28,290 --> 00:01:30,020
Ecco il testo e così via.

23
00:01:30,120 --> 00:01:32,790
Quindi questo è utile di per sé.

24
00:01:32,790 --> 00:01:38,340
il debug delle cose e vedere quale spazio occupa un elemento e dove cade nel flusso di un documento.

25
00:01:38,340 --> 00:01:39,100
Solo per eseguire

26
00:01:39,360 --> 00:01:44,140
Ma quello su cui voglio veramente concentrarmi è la scheda CSSA qui sopra la scheda degli stili.

27
00:01:44,190 --> 00:01:45,890
Quindi selezioniamo una di queste cose.

28
00:01:46,080 --> 00:01:51,600
Selezioniamo questo alleato con classe completata la parte superiore o la seconda.

29
00:01:51,810 --> 00:01:53,000
E ho intenzione di fare clic su di esso.

30
00:01:53,160 --> 00:02:00,600
E qui vedo effettivamente una vista interattiva di tutti gli stili che questo elemento ha applicato

31
00:02:00,600 --> 00:02:01,700
al momento.

32
00:02:02,070 --> 00:02:10,620
classe completata che ha questa linea di decorazione del testo attraverso il codice del moscerino che ho scritto per tutti gli alleati.

33
00:02:10,770 --> 00:02:12,540
Quindi vediamo a causa della

34
00:02:12,540 --> 00:02:16,500
Ha un bordo rosso e ciò che possiamo fare è effettivamente accenderlo o spegnerlo.

35
00:02:16,920 --> 00:02:21,360
Quindi ora ho disattivato tutti i bordi rossi di tutti gli alleati.

36
00:02:21,390 --> 00:02:29,800
Posso riattivarli e posso modificare questo live qui per essere 6 pixel o 10 o un pixel.

37
00:02:30,210 --> 00:02:35,050
Posso cliccare sul colore e scegliere un nuovo colore dargli un bordo blu.

38
00:02:35,100 --> 00:02:38,900
Una cosa che evidenzierò anche se questo in realtà non cambia affatto il nostro file.

39
00:02:38,910 --> 00:02:44,360
Questo è solo nel browser non appena aggiorno questa pagina o chiudo la finestra le mie modifiche vanno via.

40
00:02:44,370 --> 00:02:47,340
Quindi questo è utile in due modi diversi.

41
00:02:47,340 --> 00:02:54,150
Uno è quello di lavorare sul proprio codice della propria pagina e testare le cose e vedere cosa succede quando si cambia il

42
00:02:54,420 --> 00:02:59,180
colore o si cambia il bordo o si modifica qualche altro attributo di alcune delle loro

43
00:02:59,340 --> 00:03:01,320
proprietà e solo visualmente visualizzarlo immediatamente.

44
00:03:01,320 --> 00:03:05,990
L'altra cosa che è utile è in realtà guardando il codice di qualcun altro.

45
00:03:06,150 --> 00:03:09,570
Quindi ho MVNO aperto solo la home page.

46
00:03:10,200 --> 00:03:14,910
Diciamo che volevo sapere qualcosa in più su questo testo proprio qui.

47
00:03:15,270 --> 00:03:20,790
Quello che posso fare è in realtà fare clic destro su di esso e fare clic su ispezionare elemento.

48
00:03:21,360 --> 00:03:25,000
E se clicco su un elemento in particolare, verrà effettivamente evidenziato per me.

49
00:03:25,350 --> 00:03:31,670
Quindi puoi vedere che è saltato subito al tag corretto che è una conoscenza condivisa H-1.

50
00:03:31,680 --> 00:03:33,430
E poi c'è anche un intervallo.

51
00:03:33,450 --> 00:03:34,920
Dice per il web aperto.

52
00:03:35,240 --> 00:03:37,190
Diamo un'occhiata all'H-1.

53
00:03:37,470 --> 00:03:40,530
E qui ho tutti gli stili.

54
00:03:40,650 --> 00:03:41,980
Quindi il primo è il colore.

55
00:03:42,210 --> 00:03:46,630
Se cambio il colore di quell'H-1 cambia.

56
00:03:46,890 --> 00:03:54,390
modo da scorrere verso il basso e ad un certo punto qualcuno che Mazola ha scritto gli stili che applica un font.

57
00:03:54,720 --> 00:03:57,360
Quindi diciamo che volevo sapere il font in

58
00:03:57,360 --> 00:04:03,060
Qui il punto è, e questo è ciò su cui ci concentreremo nei prossimi video è che questo

59
00:04:03,060 --> 00:04:06,030
potrebbe essere ereditato da un altro selettore da qualche parte.

60
00:04:06,030 --> 00:04:11,200
Quindi potrebbe essere stato applicato all'intero corpo non solo direttamente all'H-1.

61
00:04:11,250 --> 00:04:13,940
Quindi se scorri verso il basso sembra che sia proprio qui.

62
00:04:13,950 --> 00:04:21,640
La famiglia di font open invia luce in un senso molto reale se e quello sembra così.

63
00:04:22,560 --> 00:04:25,010
Quindi questo non è per mostrare come effettivamente facciamo il font.

64
00:04:25,020 --> 00:04:26,950
Questo è un video separato in arrivo presto.

65
00:04:26,970 --> 00:04:31,800
Questo è solo per dimostrarti che se volevi trovare qualcosa su una pagina diciamo

66
00:04:31,800 --> 00:04:35,810
che volevo sapere che tipo di elemento sono questi pulsanti proprio qui.

67
00:04:35,900 --> 00:04:45,330
Il ruolo dell'icona che posso selezionare è la lente d'ingrandimento e al passaggio del mouse sulle cose e clic e questo mi mostrerà

68
00:04:45,330 --> 00:04:47,250
proprio qui che un occhio.

69
00:04:47,340 --> 00:04:52,790
Quindi un occhio è un altro tag usato per le icone e possiamo vedere tutti gli stili qui.

70
00:04:52,880 --> 00:04:57,810
La stessa cosa se voglio vedere quale elemento questo è qui posso cliccare su di esso

71
00:04:57,810 --> 00:05:03,080
una volta che hanno la lente d'ingrandimento e vedo che è un tag di ancoraggio e sembra.

72
00:05:03,090 --> 00:05:08,730
tag di ancoraggio che deve significare che stanno impostando un'immagine di sfondo da qualche parte e vediamo dove sia.

73
00:05:08,960 --> 00:05:11,190
Quindi non è un tag immagine è un

74
00:05:11,270 --> 00:05:11,850
Eccoci qui.

75
00:05:11,850 --> 00:05:14,860
Stanno impostando l'immagine di sfondo per essere questa immagine proprio qui.

76
00:05:15,090 --> 00:05:20,130
Quindi per riassumere tutto questo volevo solo dimostrare che puoi aprire questo Inspektor in Google Chrome

77
00:05:20,130 --> 00:05:26,550
e puoi visualizzare HMO e puoi vedere la valutazione e non solo puoi vederlo ma puoi manipolarlo puoi interagire con

78
00:05:26,550 --> 00:05:31,260
esso puoi provare a cambiare le cose e puoi farlo sui tuoi siti o puoi

79
00:05:31,260 --> 00:05:33,100
farlo sul sito di qualcun altro.

80
00:05:33,150 --> 00:05:37,740
utile quando vuoi uscire e replicare il design di qualcuno dove vuoi replicare in effetti.

81
00:05:37,740 --> 00:05:39,130
E quindi è davvero

82
00:05:39,150 --> 00:05:43,500
E quando arriviamo a Javascript, in realtà vediamo che possiamo fare la stessa identica cosa anche per javascript.