1
00:00:01,440 --> 00:00:03,080
Bu oldukça hızlı bir video olacak.

2
00:00:03,090 --> 00:00:07,800
Google Chrome'un bize her takımla birlikte çalışıp değerlendirmesini sağladığı geliştirici

3
00:00:07,800 --> 00:00:09,710
araçlardan bazılarını vurgulamak istiyorum.

4
00:00:09,720 --> 00:00:12,260
Bu, son videoda yaptığımız Yapılacaklar listesidir.

5
00:00:12,360 --> 00:00:16,950
O zamanki kadar çirkin ve ben sadece iki şeyi vurgulamak istiyorum.

6
00:00:17,130 --> 00:00:23,040
İlk olarak, biz aslında diğer insanlar üzerinde yaptığımız gibi sayfa kaynağını görüntüleyebiliriz.

7
00:00:23,040 --> 00:00:28,210
Her biri bu derste baştan sona yola çıktı ancak hepsi o kadar da kullanışlı değil.

8
00:00:28,230 --> 00:00:35,400
Bunu gerçekten değiştiremeyiz veya yapamayacağımız şey sağ tıklayın ve öğeyi incelemek için tıklayın.

9
00:00:37,110 --> 00:00:40,170
Ve bu ne yapacak eleman müfettişi başlatmaktır.

10
00:00:40,320 --> 00:00:43,170
Yani burada yeni görünümü elde ettiğimizi görürsünüz.

11
00:00:43,530 --> 00:00:47,080
Dolayısıyla zaman içinde bunlardan bazılarını öğreneceğimiz bir grup sekme var.

12
00:00:47,160 --> 00:00:50,270
Şimdilik yalnızca bu öğenin sekmesinden başlıyoruz.

13
00:00:50,370 --> 00:00:56,700
Öyleyse bunun nedeni aslında tüm unsurların güzel interaktif bir gösterimi olması.

14
00:00:56,700 --> 00:00:59,280
Doktrinimize sahip olduğumuzu görebilirsiniz.

15
00:00:59,370 --> 00:01:03,600
Her takımın vücudun başkanı olacak.

16
00:01:03,840 --> 00:01:11,970
biri ya da biz ve müttefiklerim, girdilerin ve fark etmenizi istediğim ilk şey, bu unsurların üzerine geldiğimde.

17
00:01:11,970 --> 00:01:13,650
Ya da her

18
00:01:13,710 --> 00:01:15,420
O halde bu H-1'in üzerine gelelim.

19
00:01:15,690 --> 00:01:17,810
Aslında burada vurgulanmış.

20
00:01:18,000 --> 00:01:23,230
Bu yüzden buraya geliyorum ve bana bahsettiğiniz şeyi burada göstermek için vurgulanmış.

21
00:01:23,260 --> 00:01:27,960
İşte UL veya burada giriş onay kutusu.

22
00:01:28,290 --> 00:01:30,020
İşte metni vb.

23
00:01:30,120 --> 00:01:32,790
Dolayısıyla bu kendi başına faydalıdır.

24
00:01:32,790 --> 00:01:38,340
hata ayıklamak ve bir öğenin hangi alandaki boşluğunu ve bir belgenin akışına neredeyse düştüğünü görmek için.

25
00:01:38,340 --> 00:01:39,100
Sadece şeyleri

26
00:01:39,360 --> 00:01:44,140
Ancak odaklanmak istediğim şey stiller sekmesindeki CSSA sekmesidir.

27
00:01:44,190 --> 00:01:45,890
Bu yüzden bunlardan birini seçelim.

28
00:01:46,080 --> 00:01:51,600
Bu müttefiki seçip sınıfa en üstteki veya ikinci olanını tamamlayalım.

29
00:01:51,810 --> 00:01:53,000
Ve ben tıklamaya çalışacağım.

30
00:01:53,160 --> 00:02:00,600
Ve burada aslında bu öğenin geçerli olduğu tüm stilleri interaktif bir

31
00:02:00,600 --> 00:02:01,700
görünümde görüyorum.

32
00:02:02,070 --> 00:02:10,620
tüm müttefikler için yazdığım sinek kodu yüzünden bu metin düzenleme hattına sahip olduğunu görüyoruz.

33
00:02:10,770 --> 00:02:12,540
Tamamlanan sınıf nedeniyle,

34
00:02:12,540 --> 00:02:16,500
Kırmızı bir sınıra sahipsiniz ve yapabileceğimiz şey aslında bunları açıp kapamak.

35
00:02:16,920 --> 00:02:21,360
Bu yüzden şimdi tüm müttefikleri kırmızı sınırlarla değiştirdim.

36
00:02:21,390 --> 00:02:29,800
Onları tekrar açabilirim ve bunu burada yaşayarak 6 piksel veya 10 veya bir piksel olarak değiştirebilirim.

37
00:02:30,210 --> 00:02:35,050
Rengi tıklatıp mavi bir kenarlık verecek yeni bir renk seçebilirim.

38
00:02:35,100 --> 00:02:38,900
Ancak vurgulamak istediğim bir şey aslında dosyamızı değiştirmemektedir.

39
00:02:38,910 --> 00:02:44,360
Bu sayfayı yenilediğimde veya yaptığınız değişiklikler giderek pencereyi kapattığım anda bu yalnızca tarayıcıda.

40
00:02:44,370 --> 00:02:47,340
Dolayısıyla bu gerçekten iki farklı yoldan faydalıdır.

41
00:02:47,340 --> 00:02:54,150
Birincisi, kendi kodunuzu kendi sayfanızda çalışmak ve test etmek ve rengi değiştirirken veya sınırı değiştirirken

42
00:02:54,420 --> 00:02:59,180
ne olduğunu görün. Veya bazı mülklerinin bazı diğer niteliklerini değiştirip hemen

43
00:02:59,340 --> 00:03:01,320
görsel olarak görmesini sağlayın.

44
00:03:01,320 --> 00:03:05,990
Yararlı olan diğer şey aslında başkasının koduna bakmaktır.

45
00:03:06,150 --> 00:03:09,570
Dolayısıyla sadece ana sayfayı açan MVNO var.

46
00:03:10,200 --> 00:03:14,910
Diyelim ki burada bu metin hakkında biraz daha bilgi edinmek istedim.

47
00:03:15,270 --> 00:03:20,790
Yapabildiğim şey aslında üzerine sağ tıklayın ve elementi incelemek için tıklayın.

48
00:03:21,360 --> 00:03:25,000
Özellikle bir öğeyi tıklarsam aslında benim için vurgulanır.

49
00:03:25,350 --> 00:03:31,670
Dolayısıyla, hemen H-1 paylaşılan bilgi olan doğru etikete atladığını görebilirsiniz.

50
00:03:31,680 --> 00:03:33,430
Ve sonra orada bir yayılma var.

51
00:03:33,450 --> 00:03:34,920
Açık ağ için yazıyor.

52
00:03:35,240 --> 00:03:37,190
Öyleyse H-1'e bir göz atalım.

53
00:03:37,470 --> 00:03:40,530
Ve burada tüm stilleri alıyorum.

54
00:03:40,650 --> 00:03:41,980
İlk renk renk.

55
00:03:42,210 --> 00:03:46,630
Değiştirirsem, o H-1 renginin değiştiğini.

56
00:03:46,890 --> 00:03:54,390
istedim, bu nedenle aşağı kaydırmalı ve bir noktada Mazola'nın bir yazı tipini uygulayan stilleri yazdığını söylemeliyim.

57
00:03:54,720 --> 00:03:57,360
Diyelim ki yazı tipini öğrenmek

58
00:03:57,360 --> 00:04:03,060
Burada bir şey var ve önümüzdeki birkaç videoda odaklanacağımız şey, bunun

59
00:04:03,060 --> 00:04:06,030
başka bir seçiciden bir yere devralınabileceği.

60
00:04:06,030 --> 00:04:11,200
Dolayısıyla, sadece doğrudan H-1'e değil, tüm vücuda uygulanabilirdi.

61
00:04:11,250 --> 00:04:13,940
Aşağıya inersen, burada olduğu gibi görünüyor.

62
00:04:13,950 --> 00:04:21,640
Yazı ailesinin açık ışık çok gerçek anlamda gönderir ve bu öyle görünüyor eğer.

63
00:04:22,560 --> 00:04:25,010
Dolayısıyla bu yazı tiplerini nasıl yaptığımızı göstermek için değil.

64
00:04:25,020 --> 00:04:26,950
Bu yakında çıkacak ayrı bir video.

65
00:04:26,970 --> 00:04:31,800
Bu sadece size bir sayfa hakkında bir şeyler öğrenmek isterseniz, bu düğmelerin

66
00:04:31,800 --> 00:04:35,810
tam olarak ne tür bir unsur olduğunu bilmek istedim diyelim.

67
00:04:35,900 --> 00:04:45,330
Seçebileceğim simgenin rolü büyüteç ve nesnelerin üzerine gelin ve tıklayın ve bana burada bir

68
00:04:45,330 --> 00:04:47,250
göz olduğunu gösterecektir.

69
00:04:47,340 --> 00:04:52,790
Yani bir göz, simgeler için kullanılan başka bir etikettir ve burada tüm stilleri görebiliriz.

70
00:04:52,880 --> 00:04:57,810
Aynı unsur, burada hangi elemanın göründüğünü görmek için büyüteç kullandıktan

71
00:04:57,810 --> 00:05:03,080
sonra tıklatabilirim ve bunun bir çapa etiketi olduğunu ve göründüğünü görüyorum.

72
00:05:03,090 --> 00:05:08,730
bir arka plan resmi yerleştirdikleri ve onun nerede olduğunu görelim anlamına gelmesi gereken bir çapa etiketi.

73
00:05:08,960 --> 00:05:11,190
Yani bir resim etiketi değil, bir yere

74
00:05:11,270 --> 00:05:11,850
İşte başlıyoruz.

75
00:05:11,850 --> 00:05:14,860
Arka plan görüntüsünü bu resim olacak şekilde ayarlıyorlar.

76
00:05:15,090 --> 00:05:20,130
Dolayısıyla bunları özetlemek için sadece bu Inspektor'ı Google Chrome'da açabileceğinizi göstermek

77
00:05:20,130 --> 00:05:26,550
istedim ve HMO görüntüleyebilir ve incelemeyi görüntüleyebilir, yalnızca görüntüleyebilirsiniz, ancak manipüle edebilirsiniz, onunla etkileşim

78
00:05:26,550 --> 00:05:31,260
kurabilirsiniz. şeyleri değiştirmeyi deneyebilirsiniz ve bunu kendi sitelerinizde yapabilir veya

79
00:05:31,260 --> 00:05:33,100
bunu başkalarının sitesinde yapabilirsiniz.

80
00:05:33,150 --> 00:05:37,740
çıkmak ve birisinin tasarımını gerçekte çoğaltmak istediğiniz yerde çoğaltmak istediğinizde gerçekten yararlıdır.

81
00:05:37,740 --> 00:05:39,130
Ve böylece dışarı

82
00:05:39,150 --> 00:05:43,500
Ve Javascript'e ulaştığımızda aslında aynı şeyi javascript için de yapabileceğimizi görüyoruz.