Chrome DevTools Nedir?

Chrome geliştirici araçları, yani Chrome DevTools, web sitenizin mevcut sorunlarını hızlı bir şekilde tespit etmenize ve düzenlemenize olanak tanıyan, bunu yaparken web sitenizin performansını önemli ölçüde geliştirmenize yardımcı olan bir araç takımıdır. Üstelik, iş akışınızda büyük oranda kolaylık sağlayan bu araçların tamamını kullanabilmeniz için web geliştiricisi olmanıza bile gerek yok. Eğer Google Chrome DevTools’u kullanmaya karar verdiyseniz, başlangıç rehberi olarak içeriğimize başvurabilirsiniz. Çünkü tüm detaylara sırasıyla yer vereceğiz.

ChromeDev Tools Özellikleri Nelerdir?

Bu kısımda web geliştiriciler için önemli bir yardımcı olan düzenleme araçları bulunmaktadır. Bu menüde bulunan araçlar şunlardır:

• Elements
• Console
• Sources
• Network
• Performance
• Memory
• Application
• Security
• Lighthouse

Her web geliştiricinin kullanımına olanak sağlayan bu özellikler hem sitenizi pek çok yönde analiz etme hem de bu analizler sonucu yapacağınız iyileştirmelere olanak sağlar. Bu Console içinde bulunan tabların özelliklerini ve ne işe yaradığını kısaca şöyle inceleyebiliriz.

Elements Tab Nedir?

Elements tab, web sayfanızı oluşturan source kodlarını görüntülemeyi sağlar. Fakat burada gördüğünüz kodlar ile serverın size göndermiş olduğu kaynak kodu aynı değildir. Elements’te Domain Object Model (DOM) kodları görüntülenmektedir. Sitede yapacağınız herhangi bir değişiklik DOM kodlarının da değişmesine sebep olmaktadır. Bunun nedeni dönüştürülmüş objelerin görüntülenmesidir. Siz ekranda bir değişiklik yaptığınızda DOM’un da değiştiğini gözlemleyebilirsiniz.

Console Tab Nedir?

DOM’da dilediğimiz değişikliği yapmamıza olanak sağlayan tab’tır. Ayrıca istediğiniz kodları yazarak değişiklik sağlayabilirsiniz. Yazılan hatalı kodları tespit ederek size hatanın hangi satırda olduğunu da göstermektedir.

Sources Tab Nedir?

İndirmiş olduğunuz resourcelar bölümüdür. Kaynak kodlarınızı, CSS dosyaları, JavaScript dosyaları, görselleri ve diğer içerikleri görüntülemenizi sağlar. Nereden ne indirdiğiniz görüntülenmektedir. Sitede kullanılan kaynakların hepsi bu bölümde detaylı olarak yer alır ve web sitesinin hızlanması için önemli bir yöntemdir.

Network Tab Nedir?

İndirilen resource dosyalarının hangi kaynaklara gittiğini, hangi size’da ve ne kadar sürede indirildiği bilgisini sunmaktadır. Kaynaklara tıkladığınızda detaylı bilgi de alabilirsiniz. Bu detaylar için filtreleme özelliği kullanılarak daha spesifik dosyaları tespit edebilirsiniz. Dosya tipi, boyutu, kaynağı gibi pek çok değişkene ait filtreleme imkânı vardır.

Performance Tab Nedir?

Performance tabının kullanımı için öncelikle aktif hale getirilmesi gerekmektedir. Ayrıca web sitenizde yapılan işlemler için geçen zamanların görüntülendiği bölümdür. JavaScript ya da CSS kullanarak yaptığınız işlerin süresini bu bölümden detaylı olarak inceleyebilirsiniz. Her bir aktivite için nerelerde neler yapıldığı ve süreleri ile ilgili bilgi verir.

Memory Tab Nedir?

Web uygulamalarınızın bir profilini çıkarmak için gerekli tab’tır. Web uygulamanızın browser üzerinde nasıl çalıştığı, memory’yi, CPU’yu nasıl kullandığı gibi seçeneklerle farklı profil özelliklerini seçerek dilediğiniz profil çeşidini inceleyebilirsiniz.

Application Tab Nedir?

Manifest, service workers, cache, background service, storage gibi bilgilere ulaşabileceğiniz kısa yollar barındırır. Local Storage özellikle faydalanabileceğiniz bir veri saklama özelliği barındırır.

Security Tab Nedir?

Bu kısım ziyaret ettiğiniz sitenin http ile ilgili detaylı bilgilerine ulaşabileceğiniz tab’tır. Bir web ya da app developer için kullanılması önemli bir bölümdür.

Lighthouse Tab Nedir?

Web sayfalarınızın performansını, erişilebilirliğini, arama motoru optimizasyonu denetim sonuçlarını gördüğünüz tab’tır.

Chrome DevTools Nasıl Açılır?

Chrome DevTools’u hem bilgisayarınız hem de telefonlarınız üzerinden pratik bir şekilde açabilirsiniz. Sizler için bunu hem bilgisayarınız hem de telefonunuz üzerinden gerçekleştirebileceğiniz farklı yöntemlerden bahsedeceğiz.

Bilgisayarda Chrome DevTools Nasıl Açılır?

Chrome DevTools’u tarayıcı menüsü üzerinden ya da kısayolları ile açabilirsiniz.

Kısayolları:

• MacOS işletim sistemine sahip cihazlardan; CMD + Shift + J ya da CMD + Shift + C tuşlarını kullanarak,
• LINUX, Chromebook ve Windows işletim sistemine sahip cihazlardan; CTRL + Shift + J tuşlarını kullanabilirsiniz.

Chrome üzerinden:

1. Öncelikli olarak Chrome menüsünü açın.
2. Ardından menüde yer alan “Diğer Araçlar” sekmesinden, “Geliştirici Araçları” seçin.
3. Akabinde incelemeyi istediğiniz sayfada herhangi bir alana sağ click yaparak, “Öğeyi İncele” seçeceğine tıklayın.
4. Karşınıza sayfanın sağ tarafında DevTools paneli açılacaktır.

Telefondan Chrome DevTools Nasıl Açılır?

Chrome geliştirici araçlarına Android işletim sistemine sahip telefonunuzun üzerinden doğrudan erişim sağlayabilmeniz mümkün değildir. Bunun için Remote Debug yani Uzaktan Hata Ayıklama yöntemini kullanmanız gerekecektir. Yöntemi uygulayabilmek için yapmanız gerekenler sırasıyla şunlardır:

1. Telefonunuzun üzerinden Geliştirici Seçenekler’i seçin.
2. USB Hata Ayıklamayı Etkinleştir seçeneğine tıklayın.
3. Bilgisayarınızda Chrome’u açın.
4. Tarayıcıya chrome://inspect#devices adresini yazın ve ilgili sayfaya gidin.
5. USB aygıtlarını keşfet butonunu onaylayın.
6. Android işletim sistemli cihazınızı bilgisayarınıza bağlayın. Ancak telefonunuzun markası ve model adını görüyorsanız, bağlama işlemini başarıyla gerçekleştirmişsiniz demektir.
7. Bağlama işleminin ardından ilk etapta çevrimdışı bir cihaz ile karşılaşabilmeniz olası. Bu durumda USB Hata Ayıklamaya İzin Ver seçeneğine tıkladığınızdan emin olun. Bu sayede probleminizi çözebilirsiniz.

ChromeDev Tools Kullanımı Ne İşe Yarar?

• ChromeDev Tools, her web geliştiricinin deneyimlemesi gereken bir Google Chrome uygulamasıdır. Kullanıcısı için sunduğu işlevsel detaylar ise şöyle açıklanabilir:
• Uygulamada bulunan özellikleri doğru kullanıp yazılan CSS’nin düzgün olup olmadığını tespit ederek hata ayıklaması yapabilirsiniz.
• Kaynaklarınızın derli toplu olmasını sağlayarak ve dosya boyutlarını önerilen size’a getirerek sitenin hızlanmasını sağlayabilirsiniz.
• Her tür web site için ayrı ayrı tasarlanmış tab özelliklerini kullanarak derinlemesine analizler yaparak sitenizin performansını artırabilirsiniz.
• Bu analiz özellikleri, çözümlemeleri ve programın size önereceği düzeltmeleri gerektiği biçimde kullanarak artan performansınızı sürekli yeterli seviyede tutup sitenizde sürekli güncellenen, yenilenen ve daha sağlıklı bir alt yapı olmasını sağlayabilirsiniz.
• Yapacağınız iyileştirmeler eşzamanlı olarak sitenize yansır ve ara yüzden güvenliğe, SEO’dan görsel performansına, site hızından ziyaretçi deneyimine kadar her konuda verimli bir web siteye sahip olmanızı sağlar. Chrome DevTools, bir kere değil sürekli kullanacağınız bir iş geliştirme ve destek uygulayıcısıdır.