Chrome Developer Tools, direkt olarak Google Chrome tarayıcısında bulunan web geliştirici bir araçtır. DevTools, sayfaları anında düzenlemenize ve sorunları hızlı bir şekilde teşhis etmenize yardımcı olur.
DevTools Kısa Yolları (Mac)
- Elements → command + option + C
- Console → command + option + J
- Kapatmak için: command + option + İ
- Sağ click: inspect
Bu yazıda vereceğim ipuçlarında Elements, Console, Sources ve Networksekmelerini kullanacağız. Kısaca bu sekmeleri açıklayıp ipuçlarıyla devam edeceğim.
DOM açılımıyla Document Object Model Türkçesiyle Doküman Nesne Modeli olarak geçiyor. HTML, XML gibi belgelerin diğer programlama dilleri veya script dilleriyle iletişim kurabilmesini sağlamak için geliştirilmiş bir arabirim olarak değerlendirebiliriz.
Dokümanın yapısında, içeriğinde ve stilinde değişiklik yapabilmemiz için sayfayı temsil ediyor. Ancak burada yaptığımız değişiklikler sayfayı yenilediğimizde ortadan kalkacaktır. Zaten yaptığımız değişiklikler kalıcı olsaydı herkes herkesin sayfasıyla oynardı ve ortaya bir karmaşa çıkardı.
Server’dan gelen asıl kaynak kodlarını görmek için Comman + Option + U(Mac Bilgisayarlarda) veya sağ click view source’a tıklayabilirsiniz.
Elements sekmesine dönersek, bu sekmede gözüken bütün kodlar incelediğiniz web sitesinin kaynak kodudur. Açılan pencerede yukarıda html kodu aşağıda ise seçilen parçanın css kodunu görebiliriz. (Paneli nerede konumlandırdığınıza göre değişebilir tabii)
Bu öğeler, web sayfasındaki gerçek zamanlı değişiklikleri gözlemlemek için düzenlenebilir.
Sol üst köşede bulunan ok a tıklayıp tarayıcıda herhangi bir kod parçasının üzerine gittiğimizde bazı yerlerin renklendiğini görüyoruz. Bazılarını turuncu bazılarının ise yeşil olarak görüyoruz. Yeşil ile çevrili alanlar padding’i, turuncu ile çevrili alanlar ise margin’i gösteriyor.
Aynı şekilde tarayıcıda bir yeri seçip tıkladığımızda ise bizi o parçanın koduna yönlendiriyor. Yukarı kısımda seçili element için kullanılan html, aşağıda ise css kodlarını görebiliyoruz.
Styles sekmesinde stillerin yanında bulunan check box’ı un check yaptığımızda bu class’ı seçili ve o class’ı bulunduruan bütün elementlerden kaldıracaktır. Eğer sadece belli bir elementten kaldırmak istiyorsak. Filter kısmında bulunan .cls butonuna tıklayıp kaldırmak istediğimiz class adının yanındaki check box’ı un check yapmalıyız.
Console paneli ise deneysel bir oyun alanı olarak düşünülebilir. Burada her türlü JavaScript kodunu çalıştırabilirsiniz. Bu panel ek olarak her türlü hata için (ağ ve kaynak kodu ile ilgili) hatanın oluştuğu kaynak koddaki satır numarası gösterir.
Source panelini CSS ve JS dosyalarını anında düzenleme ve çalıştırma, Kod oluşturma kaydetme ve çalıştırma, sayfa yeniden yüklemelerinde kalıcı değişiklikler gibi işlemlerimiz için kullanabiliriz.
Network paneli, bir web sitesi tarafından yapılan her türlü isteğin (request) takibi için kullanılabilir. Başarısız bir isteği bulmak istediğimizde gideceğimiz ilk yer burası olacaktır. Bu panelde gönderilen istekler için zamana dayalı istatistikleri inceleyebilir ve performans takibi yapabilir, web sitesini 3G / 4G veya daha yavaş bağlantılarda test etmek için hız azaltma yapılabilir veya gelen tüm istekler için cache devre dışı bırakılabilir.
#1. İpucu
Mobil Görünürlük
Sol üst köşedeki tablet önünde telefon ikonu farklı cihazlardaki site görünümünü incelememizi sağlıyor. Mobilde sitenizin nasıl göründüğüne dair bir fikir oluşturması için küçük ve kullanışlı bir madde.
Ayrıca iPhone, iPad ve Galaxy gibi mobil cihazlar için belirli görünüm alanlarına sahip.
Sağ üst köşede bulunan üç noktaya tıklayıp show device frame değimizde seçili cihazın çerçevesini eklenecektir. Yine aynı üç noktadan capture screenshot dediğimizde ise ekranın görüntüsünü png formatında alabiliriz. Bu özelliklerde sunumlarda çok işe yarayan bir özellik.
#2. İpucu
Hover
Hover, Türkçe etrafında dolaşmak gibi bir anlama geliyor ama buradaki karşılığı fareyle üzerine gelme olarak tanımlayabiliriz.
Hover state çoğunlukla, butonların tıklanabilir olduklarını belirtmek için üzerine fareyle gelince düğmenin ne yapacağını belirten talimatları göstermek için kullanılır.
Css kodlarını gördüğümüz stiller panelinde “: hov” seçeneğine tıklayarak seçilen bir öğenin çeşitli durumları için uygulanan CSS’yi kontrol edilebilir.
Seçilen öğenin hover state’deyken tasarımının nasıl değiştiğine bakabilmek için :hov’a tıklayıp görmek istediğimiz durumun yanındaki kutucuğa tıklamamız gerekiyor. Style panelinde :hov seçilmediği sürece hover state olan yerin css dosyalarını göremiyoruz.
Hover duruma getirdiğimizde ise kodun yanında bir tutuncu nokta oluştuğunu görüyoruz.
#3. İpucu
Element Silme
Başta tarayıcıda tıkladığımız bir yerin kodunun elements sekmesinin üst bölümünde gösterildiğinden bahsetmiştim. Örneğin markaya ileteceğiniz veya sunuma ekleyeceğiniz bir ekran görüntüsünde istemediğiniz bir öğe varsa eğer elements sekmesinden bu öğeyi kaldırabiliyoruz.
Bunun için tarayıcıda silmek istediğiniz parçayı seçip tıklıyoruz. Elements tabinde o öğenin kodu karşımıza çıkarıyor ve delete tuşuna basarak seçilen kodu silebiliyoruz.
İstersek seçili öğeyi silmeyip gizleyebiliriz. Bunun için seçili kodun üzerine gelip sağ click yapıp hide dememiz gerekiyor. Bir öğeyi gizlediğimizde kodun yanında siyah bir nokta oluştuğunu görüyoruz.
Gizleme işleminde seçilen öğenin kapladığı alan aynı kalır ve sadece içeriği gizlenir. Sildiğimizde ise gizlemekten farklı olarak seçili elementin kapladığı aralığında gittiğini görüyoruz.
Elements sekmesinde seçili kodun içindeki metin üzerinde de oynama yapabiliyoruz ancak ilerleyen maddelerde yazı değişikliği için daha kolay bir yol göstereceğim.
#4. İpucu
Renk Seçme
Element sekmesinde styles kısmına geldiğimizde seçili öğenin css’lerini inceleyebiliyoruz.
Renk kodlarının yanındaki küçük renkli simgeye tıkladığımızda, renk seçici açılacaktır. Varsayılan olarak göz damlasına benzeyen buton seçili geleceği için direkt olarak mevcut sayfadaki herhangi bir yere götürdüğümüzde rengin örneğini alabiliriz. Bu özelliği istediğimiz bir rengin kodunu öğrenmekte veya seçili bir öğenin rengini değiştirmekte kullanabiliriz.
#5. İpucu
Tek Bir Öğenin Ekran Görüntüsü Almak
Genellikle ekran görüntüsü için en çok tercih edilen ve kolay yollardan bir tanesi Cmd + Shift + 4 (Mac Bilgisayarlarda). Ancak developer tools kullanarak da istediğimiz bir öğenin ekran görüntüsünü almak mümkün. Yolu biraz daha uzatmış oluyoruz ancak daha nizami bir ekran görüntüsü elde etmek istediğimizde, özellikle yuvarlak cisimler için bu da kullanışlı bir özellik olabilir. Ek olarak bu yolla görselleri yine png formatında elde ediyoruz.
Ekran görüntüsü almak istediğimiz öğeyi seçiyoruz, ardından DevTools komut paletini açmak için Cmd + Shift + P tuşlarına basıyoruz. Açılan panelde Capture Node Screenshot’ı seçtiğimizde ekran görüntüsünü alıyor ve otomatik olarak indiriyor.
#6. İpucu
Design Mode
Önceki slaytlarda elements sekmesinde seçili kodun içindeki metin üzerinde de oynama yapabiliyoruz ama daha kolay bir yolu daha var demiştim. O da design modu aktive etmek.
Bunun için Console tabini açıp document.designMode = “on” yazıp enter’a basıyoruz. Sonrasında ise web sayfasının her içeriğini tarayıcı üstünden değiştirebilirsiniz.
#7. İpucu
Konum Değiştirme
Google, konumunuzu IP adresinizden, konum geçmişinizden veya son arama geçmişinizden alır. Bu, konumla ilgili sonuçlar istediğinizde güzel olabilir, ancak diğer konumlar için sonuçları görmek istiyorsanız engel de olabilir.
Developer tools kullanarak, konumumuzu değiştirebiliyoruz. Bu özellikle yurt dışı merkezli markaların arama sonuçlarında hedeflenen konumda nasıl yer aldıklarını görmemiz için çok yararlı.
Örnek olarak google’da Brad Pitt diye arattığımız zaman konumumuz Türkiye olduğu için karşımıza Türkçe sonuçlar geliyor. Sayfanın altına indiğimizde ise konumumuzun tam olarak nereyi baz aldığını görebiliyoruz.
Cmd + Shift + P ile komut panelini açıp sensors yazabilirsiniz, isterseniz de panelinin sağ üst tarafındaki üç dikey noktayı tıklayıp ve more tools’un yanında açılan pencereden yine sensors’ü seçebilirsiniz .
Bastığınız zaman panelinin alt yarısında sensors sekmesi çıkacaktır. Default olarak karşımıza birkaç konum geliyor. Örneğin San Francisco’yu seçelim. Daha sonra url barda bulunan kilit simgesine tıklayıp Location’ı Allowolarak işaretleyip sayfayı yenilememiz gerekiyor.
Yeniledikten sonra yine sayfanın en altına inip Use precise location yani tam konumu kullan’a basmalıyız. Böylelikle seçtiğimiz konumdaki arama sonuç sayfası nasıl gözüküyorsa karşımıza çıkacaktır.
Daha kesin sonuç almak için cache lerimizi temizlememizde fayda var.
Peki sadece default olarak gelen konumları mı kullanabiliyoruz diye sorarsanız, tabii ki hayır.
#8. İpucu
Spesifik Konum Değiştirme
Spesifik olarak konum eklemek için öncelikle istediğiniz konumun enlem ve boylam koordinatlarını bulmanız gerekiyor.
Google’da istediğiniz bölgenin enlem ve boylamını aramakla başlayabilirsiniz.
Daha spesifik bir konum için ise Google Haritalar’ı açıp ve herhangi bir konumu tıklayarak enlem ve boylamı adres çubuğundan alabilirsiniz.
Sensors sekmesinde manage butonuna tıklayıp eklemek istediğiniz konumun enlem ve boylam bilgilerini girip yer olarak ekleyebilirsiniz.
#9. İpucu
Local overrides
Yazının en başında Developer tools kullanarak yaptığımız bütün değişikliklerin sayfayı yeniledikten sonra gideceğinden bahsetmiştim.
Local Overrides değişiklikleri yerelde kalıcı olarak kullanmanızı sağlar. Bu özelliği kullanarak sayfayı yenilediğinizde veya sayfadan ayrıldığınızda yaptığınız değişiklikleri kaybetmeden deneyebilir üstüne farklı değişiklikler yapabilirsiniz.
Başlamadan bilgisayarınızda yapacağınız değişikliklerinizi kaydedebileceğiniz bir klasör oluşturun.
Sources sekmesini açın ve soldaki pencerede overrides’a tıklayın. Eğer açtığınızda overrides sekmesini hemen görmüyorsanız, iki ok simgesini tıklayın. Karşınıza açılır menü gelecektir orada gizleniyor olabilir.
Overrides sekmesini açtığınızda oluşturduğunuz klasörü seçin. Chrome bu klasörü değişikliklerinizi kaydetmek ve bunlara erişmek için kullanacaktır. Klasörü seçtikten sonra Devtools’un klasörümüze erişmesine izin vermeniz gerekiyor. Erişime izin verdikten sonra overrides sekmesinde yeni bir onay kutusu görünecektir. Bundan sonra yapacağınız değişiklikler kaydedilmeye başlayacaktır. Herhangi yeri düzenleyip sayfayı yeniden yüklediğinizde stillerin kalıcı olduğunu göreceksiniz.
Elements sekmesinde stilleri düzenleyebilirsiniz ancak HTML’yi aynı şekilde düzenleyemezsiniz. İstediğiniz dosyayı Source sekmesinde aramanız ve orada düzenlemeniz gerekiyor.
Stiller için: Elements sekmesinde herhangi bir stili düzenleyebilirsiniz.
Başlıklar için: Sources sekmesinde cmd + p yaparak arama menüsünde düzenlemek istediğiniz dosyayı bulup başlığı düzenleyebilirsiniz.
Görseller için: Web sayfasından değiştirmek istediğiniz görseli source sekmesinde açın. Sadece yeni resmi üzerine sürükleyip bırakmak yeterli olacaktır.
Overrides sekmesinde enable local overrides yazısının yanındaki tiki kaldırıp sayfayı yenilerseniz, sitenin orijinal haline geri dönebilirsiniz.
#10. İpucu
Request Blocking
Bir web sayfasının belirli bir CSS veya JavaScript olmadan nasıl göründüğünü öğrenmek ya da bir kaynağı engellediğinizde sayfanızın nasıl performans gösterdiğini öğrenmek için Request Blocking kullanılabilir.
Belirli bir kaynağın sayfaya getirdiği ekstra maliyeti ölçmemizi sağlar. Böylelikle bu tür bir kaynağı kaldırabilir veya daha az ek yükü olan bir şeye geçiş yapmanıza olanak tanır.
Network sekmesini açıp sayfayı yenilediğinizde sayfanın istek gönderdiği dökümanlar yüklenmeye başlayacaktır. Engellemek istediğiniz isteğe sağ tıklayın ve Block Request Url’i seçin. Sayfayı yeniledikten sonra yüklenme aşamasında engellenen istek yüklenmeyecektir. Bloklanan url kırmızı olarak gözükecektir.
