Konu Başlıkları Gizle
Merhaba,
Öncelikle başlığı olabildiğince özelleştirmeye çalıştım çünkü DevTools'a tam anlamıyla hakim olduğumu düşünmüyor, sadece işimi görebileceğim kadar biliyorum. Dolayısıyla genel olarak DevTools'u anlatmayacak olup sadece Sosyal özelinde neler yapılabileceğinden bahsedeceğim. Böylelikle DevTools konusunda genel bir rehber hazırlama yetkinliği olan arkadaşlarımızın önüne geçmemiş olacağımı umuyorum.
Bu yazıyı bir süredir hazırlayıp paylaşmayı umuyordum. Şu an yazının sonlarına geldim ve buraya dönüp bunu yazmak istedim. Çok mutluluk verici.
Başlayalım.
DevTools'un yararlanabileceğiniz birçok özelliği var ancak bu yazımda değineceklerim sadece HTML ve CSS inceleme ve değişiklikleri yapmak üzerine olacak. Aslında bir nevi bir geliştiricinin yerine geçebiliyor olacaksınız, sonuçta geliştirici araçlarını kullanıyorsunuz.
Anlatacaklarım başka tarayıcılarda da benzer yollarla uygulanabilir büyük ihtimalle fakat bilgim olmadığı için yanlış yönlendirme yapmamak adına sadece Chrome üzerinden anlatım yapacağım.
DevTools'un bir arayüzü var tabii ki ve bu arayüzü açmamız gerekiyor. Bunun şu an aklıma gelen 2 yolunu açıklayacağım:
Hemen sağda görüyorsunuz, bakın. Eğer sizi "Elements" sekmesi karşılamadıysa o sekmeye gelin çünkü işimiz orada. Arayüz dili Türkçeyse bile en baştaki sekme olmalı.
Arayüzü size daha rahat gösterebilmek için ayrı bir pencere olarak açacağım şimdi. Bunu nasıl yapacağımı göstereyim ilk:
Sağ üstteki 3 nokta menüsüne tıklayın ve açılan menüde "Dock side" seçeneklerinden en soldakini seçin. Üst üste pencereler var zaten, neyi temsil ettiği biraz anlaşılıyor.
Bir ara bilgi vereyim:
DevTools artık ayrı bir pencerede bulunacak. Dilediğiniz zaman aynı menüden bu değişikliği geri alabilirsiniz. Şu an şu şekilde gözüküyor olmalı, net gözüksün diye DevTools'u yakınlaştırdım biraz:
Şimdi diyeceksiniz: "Koskoca dokümanda o butonun elementini direkt nasıl buldun?"
Doğru, bulması kolay değil. Elementlerin sollarında, kapsadıkları (içlerindeki) elementleri görmek için kullanabileceğiniz oklar bulunuyor, onları kullanabilirsiniz fakat bu uğraştırıcı olan yol. Ekran görüntüsünde de bu okları görebilirsiniz, beyaz ve açılmış vaziyetteler.
Şöyle ki o "Son Mesajlar" butonuna sağ tıklayıp "İncele" derseniz DevTools'ta ilgili element veya elementin bir atası (kapsayan element) gösterilecektir:
Eğer kendisi değil de atası gösterilirse arayüzde atasının solundaki oka basıp içindeki elementlere ulaşabilirsiniz. Bu gayet yaşanabilir bir durum çünkü bazen elementle atası (veya ataları) çok yakın (hatta bazen aynı) yükseklik ve genişlik değerlerine sahip olabiliyor, bu durumda DevTools imlecinizin sağ tık yaptığınızdaki konumuna göre uygun bir elementi gösteriyor.
Bir diğer yolsa arayüzün sol üstünde bulunan "element seçme" aracını etkinleştirmek, ismini kendim şimdi uydurdum. Bunu yaptığınız an imleciniz artık üstünde bulunduğu elementi seçer hâle geliyor ve sol tıkladığınızda DevTools, HTML dokümanında o elemente gidiyor:
Ayrıca görebileceğiniz üzere elementin hemen üstünde (duruma göre konum değişebilir) çeşitli stil bilgileri gösteriliyor, oldukça hoş. Element seçme aracını devre dışı bırakmak için araca DevTools arayüzünden tekrar basmanız gerekiyor. Şimdi ben de araç ikonunun üstüne gelince fark ettim ki bir kısayolu var mış:
Hemen bir başka elementi nasıl bulabileceğimizin örneğini vereyim: Techolay Önerileri kategorisinin ikonu. İster sağ tık menüsünden "İncele" yaparsınız ister element seçme aracını kullanırsınız:
Stil bilgilerini de göstermek istedim ekran görüntüsünde ki biraz eğlenceli dursun.
Yazıyı yazarken unuttuğumu fark ettim ve yukarı çıkıp burada belirtme gereği duydum: Yapacağınız değişiklikler Sosyal'i veya diğer üyeleri etkilemiyor, hiç merak etmeyin. Kendi tarayıcınızda geçici değişiklikler yapıyor olacaksınız sadece. Sayfayı yenilediğinizde de kendi uyguladığınız değişiklikler sıfırlanacaktır.
Lafı çok uzatmayayım. Yukarıdaki ikon örneğini inceleyelim. Mesela ikon renginin
Bi' imlecinizi getirin o mavi kareye... Tıklanabiliyor, değil mi?!
Evet, DevTools bize o rengi hemen oracıkta değiştirebilme imkânı sunuyor:
Bu rengin biraz daha parlağına bayılırım, ya siz?
Renk menüsünde çok detaya inmeyeceğim çünkü gerek yok. Kendiniz kurcalayın, eğlenceli. Sadece iki şeyden daha bahsetmek istiyorum: renk damlalığı ve renk kopyalama. Menüde gördüğünüz damlalığa bastığınızda DevTools size tarayıcının herhangi bir yerindeki bir pikselin rengini seçebilmenize olanak tanıyor:
Damlalığın beyazdan maviye döndüğüne dikkat edin. Bu, renk seçme modunun aktifleştiğini gösteriyor. Mesela ben burada @3881 isimli üyenin profil resminin üzerine geldim (DevTools penceresinin hemen üstünde). Tarayıcının herhangi bir yeri demiştim ya, damlalık DevTools'un arayüzünde bile çalışıyor. Şimdi denerken fark ettim ben de.
Renk kopyalama kısmına gelirsek orada anlatacak çok bir şey yok: Damlalığın hemen sağındaki yuvarlak kısma basarsanız o anki rengi kopyalamış oluyorsunuz. Kopyalama işareti çıkıyor zaten, görürsünüz.
Renklerle yapabileceklerinizi hayal gücünüze bırakıyorum.
Bir başka CSS özelliği olan
Bakın,
Diğer kategori isimleri de etkilendi, çaktırmayın. Aynı CSS sınıfına sahip olmalarından kaynaklanıyor. Çok detaya inmek istemiyorum bu konuda.
Bir bilgi daha: Sayı değerinin üstüne gelirseniz imleciniz bir yatay doğruya dönüşüyor ve sol tıka basılı tutup farenizi sola/sağa hareket ettirerek değeri değiştirebiliyorsunuz.
Sadece renk ve
Şimdi örnek vermek için ekran görüntüsü alacakken ne tesadüftür ki öneri konusundakiyle aynı üyeye denk geldim:
Gördüğünüz üzere etiket elementinde
Artık profil ön izlemesi, imleç etiket elementinin üzerindeyken gözükemeyecek:
Ne var ki "Konu Sahibi" diye bir yazı belirdi bu sayede. Hmm...
Ben bu CSS özelliğinin ne işe yaradığını bildiğimden dolayı böyle bir öneri sunabildim tabii. Yaptığım şeyse elemente elimle o özelliği ekleyerek deney yapmak olmuştu. Ha, yeni özellik eklemek için CSS sınıfının bulunduğu kutucukta herhangi bir yere basın, DevTools size yeni özellik eklemeniz için gereken girdi kısmını oluşturacaktır. Bir şekilde halledersiniz bunu ya, güveniyorum size.
Şimdi, bu seferki biraz Font Awesome'ı önceden biliyor olmamdan kaynaklı ve biraz da Sosyal'deki stil özelliklerini incelemiş olmamdan.
Hop, hemen ana sayfadaki bir kategori ikon elementini seçelim ve stil özelliklerini inceleyelim:
Bir altındaki ikonda da bir şeyler deniyordum, orayı boş verin.
Aman tanrım, yazı uzadıkça uzadı. Umarım biraz eğlenceli ve öğretici olmuştur ya. Ben yazarken aldığım keyfe 8/10 veriyorum. Biliyorum, çok ani bitirdim ama yoruldum artık, birkaç saatimi aldı yazı.
Lütfen anlamadığınız veya merak ettiğiniz herhangi bir yer olursa sormaktan asla çekinmeyin, seve seve cevaplarım.
Okuduğunuz için çok teşekkür eder, keyif aldığınızı umar ve şunu dilerim:
Öncelikle başlığı olabildiğince özelleştirmeye çalıştım çünkü DevTools'a tam anlamıyla hakim olduğumu düşünmüyor, sadece işimi görebileceğim kadar biliyorum. Dolayısıyla genel olarak DevTools'u anlatmayacak olup sadece Sosyal özelinde neler yapılabileceğinden bahsedeceğim. Böylelikle DevTools konusunda genel bir rehber hazırlama yetkinliği olan arkadaşlarımızın önüne geçmemiş olacağımı umuyorum.
Bu yazıyı bir süredir hazırlayıp paylaşmayı umuyordum. Şu an yazının sonlarına geldim ve buraya dönüp bunu yazmak istedim. Çok mutluluk verici.
Başlayalım.
Bir dakika, nedir bu DevTools dediğin?
Haklı bir soru. Kısaca, Google Chrome'un geliştirici araçlarına verilen isim. "Geliştirici Araçları"nın İngilizcesi olan "Developer Tools"un kısaltması olduğunu fark etmiş olabilirsiniz. Zaten "Developer"a genelde "Dev" deniliyor yani kendisinden çok kısaltması tercih ediliyor.DevTools'un yararlanabileceğiniz birçok özelliği var ancak bu yazımda değineceklerim sadece HTML ve CSS inceleme ve değişiklikleri yapmak üzerine olacak. Aslında bir nevi bir geliştiricinin yerine geçebiliyor olacaksınız, sonuçta geliştirici araçlarını kullanıyorsunuz.
Anlatacaklarım başka tarayıcılarda da benzer yollarla uygulanabilir büyük ihtimalle fakat bilgim olmadığı için yanlış yönlendirme yapmamak adına sadece Chrome üzerinden anlatım yapacağım.
Tamam, nerede bu DevTools?
Artık başlayalım, değil mi? Öncelikle bu işleri bildiğim kadarıyla sadece bir bilgisayarda yapabiliyoruz. Telefonda yapabilmek için bile bilgisayara ihtiyaç var sanırsam.DevTools'un bir arayüzü var tabii ki ve bu arayüzü açmamız gerekiyor. Bunun şu an aklıma gelen 2 yolunu açıklayacağım:
- Sayfanın herhangi bir yerine sağ tıklayın ve en alttaki seçenek olan "İncele"ye tıklayın:
F12'ye basın.
Arayüzü size daha rahat gösterebilmek için ayrı bir pencere olarak açacağım şimdi. Bunu nasıl yapacağımı göstereyim ilk:
Sağ üstteki 3 nokta menüsüne tıklayın ve açılan menüde "Dock side" seçeneklerinden en soldakini seçin. Üst üste pencereler var zaten, neyi temsil ettiği biraz anlaşılıyor.
Bir ara bilgi vereyim:
Ctrl'ye basılı tutup fare tekerleğinizi oynatarak tarayıcıdan bağımsız olarak DevTools'ta yakınlaştırma seviyesini ayarlayabiliyorsunuz. Mesela ekran görüntüsünü yakınlaştırarak aldım.DevTools artık ayrı bir pencerede bulunacak. Dilediğiniz zaman aynı menüden bu değişikliği geri alabilirsiniz. Şu an şu şekilde gözüküyor olmalı, net gözüksün diye DevTools'u yakınlaştırdım biraz:
HTML dokümanında element seçme ve inceleme
Şimdi, burada mavi ve turuncu yazıların bulunduğu ekranda sayfanın HTML dokümanı gösteriliyor. HTML dokümanı, sayfanın iskeleti oluyor. Sayfada gördüğünüz her bir yazıyı veya bloku HTML dokümanında bir element temsil ediyor. Örneğin "Son Mesajlar" sekme butonunu şu mavi satırdakia elementi temsil ediyormuş:Şimdi diyeceksiniz: "Koskoca dokümanda o butonun elementini direkt nasıl buldun?"
Doğru, bulması kolay değil. Elementlerin sollarında, kapsadıkları (içlerindeki) elementleri görmek için kullanabileceğiniz oklar bulunuyor, onları kullanabilirsiniz fakat bu uğraştırıcı olan yol. Ekran görüntüsünde de bu okları görebilirsiniz, beyaz ve açılmış vaziyetteler.
Şöyle ki o "Son Mesajlar" butonuna sağ tıklayıp "İncele" derseniz DevTools'ta ilgili element veya elementin bir atası (kapsayan element) gösterilecektir:
Bir diğer yolsa arayüzün sol üstünde bulunan "element seçme" aracını etkinleştirmek, ismini kendim şimdi uydurdum. Bunu yaptığınız an imleciniz artık üstünde bulunduğu elementi seçer hâle geliyor ve sol tıkladığınızda DevTools, HTML dokümanında o elemente gidiyor:
Ayrıca görebileceğiniz üzere elementin hemen üstünde (duruma göre konum değişebilir) çeşitli stil bilgileri gösteriliyor, oldukça hoş. Element seçme aracını devre dışı bırakmak için araca DevTools arayüzünden tekrar basmanız gerekiyor. Şimdi ben de araç ikonunun üstüne gelince fark ettim ki bir kısayolu var mış:
Ctrl + Shift + C.Hemen bir başka elementi nasıl bulabileceğimizin örneğini vereyim: Techolay Önerileri kategorisinin ikonu. İster sağ tık menüsünden "İncele" yaparsınız ister element seçme aracını kullanırsınız:
CSS ile stil inceleme ve değiştirme
Bildiğim kadarıyla tüm stil bilgileri hemen yukarıda görebileceğiniz üzere DevTools arayüzündeki "Styles" sekmesinde (HTML doküman ekranının hemen altında) gösteriliyor. Çok detaya girmeyeceğim fakat burada gösterilen şeyler CSS özellikleri. HTML dokümanı nasıl iskeletse CSS özellikleri de et ve makyaj oluyor. Daha önce CSS'e "et" diyen duymadım, orası biraz garip oldu ama "iskelet"in üstüne ne geleceğini düşününce öyle diyesim geldi. Makyaj diyelim en iyisi.Yazıyı yazarken unuttuğumu fark ettim ve yukarı çıkıp burada belirtme gereği duydum: Yapacağınız değişiklikler Sosyal'i veya diğer üyeleri etkilemiyor, hiç merak etmeyin. Kendi tarayıcınızda geçici değişiklikler yapıyor olacaksınız sadece. Sayfayı yenilediğinizde de kendi uyguladığınız değişiklikler sıfırlanacaktır.
Lafı çok uzatmayayım. Yukarıdaki ikon örneğini inceleyelim. Mesela ikon renginin
rgb(0, 114, 254) olduğunu görüyoruz ve hatta hemen solundaki küçük mavi karede DevTools bize rengi gösteriyor, bir tanemiz. Güzel araç geliştirmişsin valla, teşekkürler Google.Bi' imlecinizi getirin o mavi kareye... Tıklanabiliyor, değil mi?!
Evet, DevTools bize o rengi hemen oracıkta değiştirebilme imkânı sunuyor:
Renk menüsünde çok detaya inmeyeceğim çünkü gerek yok. Kendiniz kurcalayın, eğlenceli. Sadece iki şeyden daha bahsetmek istiyorum: renk damlalığı ve renk kopyalama. Menüde gördüğünüz damlalığa bastığınızda DevTools size tarayıcının herhangi bir yerindeki bir pikselin rengini seçebilmenize olanak tanıyor:
Damlalığın beyazdan maviye döndüğüne dikkat edin. Bu, renk seçme modunun aktifleştiğini gösteriyor. Mesela ben burada @3881 isimli üyenin profil resminin üzerine geldim (DevTools penceresinin hemen üstünde). Tarayıcının herhangi bir yeri demiştim ya, damlalık DevTools'un arayüzünde bile çalışıyor. Şimdi denerken fark ettim ben de.
Renk kopyalama kısmına gelirsek orada anlatacak çok bir şey yok: Damlalığın hemen sağındaki yuvarlak kısma basarsanız o anki rengi kopyalamış oluyorsunuz. Kopyalama işareti çıkıyor zaten, görürsünüz.
Renklerle yapabileceklerinizi hayal gücünüze bırakıyorum.
Bir başka CSS özelliği olan
padding'den örnek vereyim bir de:Bakın,
padding: 10px; diyor ya, işte elementin etrafındaki o yeşil bölgenin kalınlığına denk geliyor. padding, element içi boşluğun kalınlığıdır ve bunun değerini değiştirmek, kalınlığı ayarlayabilmenizi sağlar. DevTools'ta 10px'e sol tıklayıp yeni bir değer girerek değeri değiştirebilirsiniz:Diğer kategori isimleri de etkilendi, çaktırmayın. Aynı CSS sınıfına sahip olmalarından kaynaklanıyor. Çok detaya inmek istemiyorum bu konuda.
Bir bilgi daha: Sayı değerinin üstüne gelirseniz imleciniz bir yatay doğruya dönüşüyor ve sol tıka basılı tutup farenizi sola/sağa hareket ettirerek değeri değiştirebiliyorsunuz.
Sadece renk ve
padding örnekleri vermekle yetindim çünkü bu yazıdaki amacım tüm CSS bilgilerini öğretmek değil ki onu yapmak oldukça uğraştırıcı ve zor olurdu, üstelik CSS'e tamamıyla hakim değilken. Ben sadece stil özelliklerini nasıl değiştirebileceğinizi göstermek istedim. Özetle, herhangi bir özelliğin değerine basarak o özelliği değiştirebiliyorsunuz.Sosyal'de uygulanmış iki öneri örneği
Konu Sahibi etiket güncellemesi
İlgili öneri konusu: Uygulandı: KS (Konu Sahibi) etiketi için CSS güncelleme önerisi.Şimdi örnek vermek için ekran görüntüsü alacakken ne tesadüftür ki öneri konusundakiyle aynı üyeye denk geldim:
Gördüğünüz üzere etiket elementinde
pointer-events: none; özelliği var. Elementi bu özellikten dolayı direkt seçememiş olabilirsiniz, endişe etmeyin, DevTools'u da kısıtlayan bir özellik sanırsam. Ben profil resminin elementini seçtikten sonra etiket elementine elimle geldim. İşte bu özellik eskiden yoktu ve bu yüzden imleciniz, gördüğünüz mavi karenin yani etiket elementinin üstündeyken profil resmine tıklanmıyordu veya profil ön izleme ekranı çıkmıyordu. Bunu denemek için (özelliği kapatmayı) özelliğin üzerine geldiğinizde solda beliren tiki kapatabilirsiniz:
pointer-events: none; özelliğinden dolayı arada kaynamış bir özellik bulmuş oldum, iyiymiş. Bu da başka bir videonun konusu artık.Ben bu CSS özelliğinin ne işe yaradığını bildiğimden dolayı böyle bir öneri sunabildim tabii. Yaptığım şeyse elemente elimle o özelliği ekleyerek deney yapmak olmuştu. Ha, yeni özellik eklemek için CSS sınıfının bulunduğu kutucukta herhangi bir yere basın, DevTools size yeni özellik eklemeniz için gereken girdi kısmını oluşturacaktır. Bir şekilde halledersiniz bunu ya, güveniyorum size.
İkon güncellemesi
Hemencecik ilgili öneri konusunu paylaşayım: Uygulandı: "Rehberler" ve "Cevap Bekleyen Sorular" kategorilerinin ikonları güncellenebilir.Şimdi, bu seferki biraz Font Awesome'ı önceden biliyor olmamdan kaynaklı ve biraz da Sosyal'deki stil özelliklerini incelemiş olmamdan.
Hop, hemen ana sayfadaki bir kategori ikon elementini seçelim ve stil özelliklerini inceleyelim:
font-family: 'Font Awesome 5 Pro';: Font Awesome 5 Pro kullanılmış ikon sağlayıcısı olarak.content: '\f252';: Bunu bilemeyebilirsiniz hatta ben de bilmiyordum: Font Awesome ikonlarının bu şekilde kodları var. Buradaki ikon şu: Hourglass Half Classic Solid Icon | Font Awesome.
Sağ üstte ikonun kodu bulunuyor, görebileceğiniz üzere. Sitede aratıp bulduğunuz ikonların kodlarını alıpcontent'in değerini o şekilde değiştirirseniz ikon da değişecektir, tabii Font Awesome 5 Pro'nun destekliyor olması gerek. Daha fazla detay vermeyeyim çünkü ben de tam hakim değilim, bazı istisnai durumlar mevcut olabilir. Hatta ikon kodunu direkt sitedeki arama çubuğuna yazabilirsiniz, o ikon çıkacaktır karşınıza. Ben bu ikonu öyle buldum.display: block;: Çok takılmayalım buna.font-weight: 400;: 100'ün katlarıyla değiştirmeyi deneyin. İkon görünümü değişecek (incelip kalınlaşma).font-size: 32px;: İkon büyüklüğü.color: #0072fe;: İkon rengi tabii ki.
Aman tanrım, yazı uzadıkça uzadı. Umarım biraz eğlenceli ve öğretici olmuştur ya. Ben yazarken aldığım keyfe 8/10 veriyorum. Biliyorum, çok ani bitirdim ama yoruldum artık, birkaç saatimi aldı yazı.
Lütfen anlamadığınız veya merak ettiğiniz herhangi bir yer olursa sormaktan asla çekinmeyin, seve seve cevaplarım.
Okuduğunuz için çok teşekkür eder, keyif aldığınızı umar ve şunu dilerim:
İyi Sosyal'ler!
(Rengi @uintptr'nin profil resminden aldım.)
Son düzenleme: