Bu oldukça hızlı bir video olacak.
Google Chrome'un bize her takımla birlikte çalışıp değerlendirmesini sağladığı geliştirici
araçlardan bazılarını vurgulamak istiyorum.
Bu, son videoda yaptığımız Yapılacaklar listesidir.
O zamanki kadar çirkin ve ben sadece iki şeyi vurgulamak istiyorum.
İlk olarak, biz aslında diğer insanlar üzerinde yaptığımız gibi sayfa kaynağını görüntüleyebiliriz.
Her biri bu derste baştan sona yola çıktı ancak hepsi o kadar da kullanışlı değil.
Bunu gerçekten değiştiremeyiz veya yapamayacağımız şey sağ tıklayın ve öğeyi incelemek için tıklayın.
Ve bu ne yapacak eleman müfettişi başlatmaktır.
Yani burada yeni görünümü elde ettiğimizi görürsünüz.
Dolayısıyla zaman içinde bunlardan bazılarını öğreneceğimiz bir grup sekme var.
Şimdilik yalnızca bu öğenin sekmesinden başlıyoruz.
Öyleyse bunun nedeni aslında tüm unsurların güzel interaktif bir gösterimi olması.
Doktrinimize sahip olduğumuzu görebilirsiniz.
Her takımın vücudun başkanı olacak.
biri ya da biz ve müttefiklerim, girdilerin ve fark etmenizi istediğim ilk şey, bu unsurların üzerine geldiğimde.
Ya da her
O halde bu H-1'in üzerine gelelim.
Aslında burada vurgulanmış.
Bu yüzden buraya geliyorum ve bana bahsettiğiniz şeyi burada göstermek için vurgulanmış.
İşte UL veya burada giriş onay kutusu.
İşte metni vb.
Dolayısıyla bu kendi başına faydalıdır.
hata ayıklamak ve bir öğenin hangi alandaki boşluğunu ve bir belgenin akışına neredeyse düştüğünü görmek için.
Sadece şeyleri
Ancak odaklanmak istediğim şey stiller sekmesindeki CSSA sekmesidir.
Bu yüzden bunlardan birini seçelim.
Bu müttefiki seçip sınıfa en üstteki veya ikinci olanını tamamlayalım.
Ve ben tıklamaya çalışacağım.
Ve burada aslında bu öğenin geçerli olduğu tüm stilleri interaktif bir
görünümde görüyorum.
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.
Tamamlanan sınıf nedeniyle,
Kırmızı bir sınıra sahipsiniz ve yapabileceğimiz şey aslında bunları açıp kapamak.
Bu yüzden şimdi tüm müttefikleri kırmızı sınırlarla değiştirdim.
Onları tekrar açabilirim ve bunu burada yaşayarak 6 piksel veya 10 veya bir piksel olarak değiştirebilirim.
Rengi tıklatıp mavi bir kenarlık verecek yeni bir renk seçebilirim.
Ancak vurgulamak istediğim bir şey aslında dosyamızı değiştirmemektedir.
Bu sayfayı yenilediğimde veya yaptığınız değişiklikler giderek pencereyi kapattığım anda bu yalnızca tarayıcıda.
Dolayısıyla bu gerçekten iki farklı yoldan faydalıdır.
Birincisi, kendi kodunuzu kendi sayfanızda çalışmak ve test etmek ve rengi değiştirirken veya sınırı değiştirirken
ne olduğunu görün. Veya bazı mülklerinin bazı diğer niteliklerini değiştirip hemen
görsel olarak görmesini sağlayın.
Yararlı olan diğer şey aslında başkasının koduna bakmaktır.
Dolayısıyla sadece ana sayfayı açan MVNO var.
Diyelim ki burada bu metin hakkında biraz daha bilgi edinmek istedim.
Yapabildiğim şey aslında üzerine sağ tıklayın ve elementi incelemek için tıklayın.
Özellikle bir öğeyi tıklarsam aslında benim için vurgulanır.
Dolayısıyla, hemen H-1 paylaşılan bilgi olan doğru etikete atladığını görebilirsiniz.
Ve sonra orada bir yayılma var.
Açık ağ için yazıyor.
Öyleyse H-1'e bir göz atalım.
Ve burada tüm stilleri alıyorum.
İlk renk renk.
Değiştirirsem, o H-1 renginin değiştiğini.
istedim, bu nedenle aşağı kaydırmalı ve bir noktada Mazola'nın bir yazı tipini uygulayan stilleri yazdığını söylemeliyim.
Diyelim ki yazı tipini öğrenmek
Burada bir şey var ve önümüzdeki birkaç videoda odaklanacağımız şey, bunun
başka bir seçiciden bir yere devralınabileceği.
Dolayısıyla, sadece doğrudan H-1'e değil, tüm vücuda uygulanabilirdi.
Aşağıya inersen, burada olduğu gibi görünüyor.
Yazı ailesinin açık ışık çok gerçek anlamda gönderir ve bu öyle görünüyor eğer.
Dolayısıyla bu yazı tiplerini nasıl yaptığımızı göstermek için değil.
Bu yakında çıkacak ayrı bir video.
Bu sadece size bir sayfa hakkında bir şeyler öğrenmek isterseniz, bu düğmelerin
tam olarak ne tür bir unsur olduğunu bilmek istedim diyelim.
Seçebileceğim simgenin rolü büyüteç ve nesnelerin üzerine gelin ve tıklayın ve bana burada bir
göz olduğunu gösterecektir.
Yani bir göz, simgeler için kullanılan başka bir etikettir ve burada tüm stilleri görebiliriz.
Aynı unsur, burada hangi elemanın göründüğünü görmek için büyüteç kullandıktan
sonra tıklatabilirim ve bunun bir çapa etiketi olduğunu ve göründüğünü görüyorum.
bir arka plan resmi yerleştirdikleri ve onun nerede olduğunu görelim anlamına gelmesi gereken bir çapa etiketi.
Yani bir resim etiketi değil, bir yere
İşte başlıyoruz.
Arka plan görüntüsünü bu resim olacak şekilde ayarlıyorlar.
Dolayısıyla bunları özetlemek için sadece bu Inspektor'ı Google Chrome'da açabileceğinizi göstermek
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
kurabilirsiniz. şeyleri değiştirmeyi deneyebilirsiniz ve bunu kendi sitelerinizde yapabilir veya
bunu başkalarının sitesinde yapabilirsiniz.
çıkmak ve birisinin tasarımını gerçekte çoğaltmak istediğiniz yerde çoğaltmak istediğinizde gerçekten yararlıdır.
Ve böylece dışarı
Ve Javascript'e ulaştığımızda aslında aynı şeyi javascript için de yapabileceğimizi görüyoruz.