Chrome DevTools Nedir?

Chrome DevTools Nedir?

Google Chrome, şu anda global düzeyde en popüler web tarayıcısı. Nitekim hem kullancılar hem geliştiriciler adına sağladığı pek çok efektif özellik de bunun yegâne sebebi. Bugünkü içeriğimizde yer vereceğimiz Chrome DevTools’da bu kullanışlı özelliklerden yalnızca biri. Peki 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 dahi 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 Araçları Nelerdir?

ChromeDev Tools’a ulaşmak için web sayfanızda sağ click yapıp açılan menüde ‘İncele’ seçeneğini tıklayınız. 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.

Bu yazıyı da sevebilirsiniz: En İyi CRM Yazılımları

Chrome devtools araçları nelerdir

Elements Tab

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

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

İ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

İ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

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

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

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

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

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.

Bu yazıyı da sevebilirsiniz: Chmod Nedir, Nasıl Kullanılır?

Chrome DevTools

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.
Chrome devtools nasıl açılı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 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.

Bloğumuzu beğendiyseniz Yazılım Nasıl Öğrenilir? Yazılım Öğrenme Yolları Nelerdir? isimli yazımızı da okuyabilirsiniz.

Bu yazıyı da sevebilirsiniz: Xampp Nedir, Nasıl Kurulur?

Google ChromeDev Tools nasıl indirilir?

Chrome DevTool’u PC için şu linkten; https://www.google.com/intl/tr/chrome/dev/,
Mobil için Google Play Store https://play.google.com/store/apps/details?id=com.chrome.dev&gl=TR linkinden yükleyebilirsiniz.

Google ChromeDev Tools nasıl açılır?

Chrome DevTools MacOS için CMD + Shift + J ya da CMD + Shift + C, Window ve Linux için Shift + CTRL + J tuşları ile doğrudan tarayıcı penceresindeki DevTools konsolunda açılır. DevTools’u açmanın başka bir yolu da sayfadaki bir öğeye sol tıklayıp İncele’yi seçmektir.

Google ChromeDev nasıl silinir?

admin.google.com adresinden G Suite hesabınıza giriş yapıp, Cihaz> Chrome>Ayarlar’a gidin. Kullanıcı Deneyimi> Geliştirici Araçları’nı tıklayın. Açılır menüden “Yerleşik geliştirici araçlarının kullanımına asla izin verme” seçeneğini seçin.

Dijital Pazarlama hakkındaki bir önceki yazımız olan ile de ilgilenebileceğinizi düşünüyoruz.
[Total: 44 Average: 5]
Hüseyin Çetin

Yazılar: 70

Dijital pazarlama ve SEO alanında içerikler üretiyorum. Ürettiğim içeriklerle mümkün olduğunca sizlere faydalı bilgiler sunmaya çalışıyorum. Dijital pazarlama dünyasının dinamiklerini yakından takip etmek için bloglarımı ziyaret etmeyi unutmayın..

Gösterilecek yorum yok.

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir