Web Site Kaynak Kodlarını Görüntüleme

Bir web sayfasının perde arkasında neler olup bittiğini anlamak, kullanılan SEO etiketlerini çözmek ya da sayfanın teknik mimarisini incelemek istiyorsanız bakmanız gereken ilk yer kaynak kodlarıdır. HTML yapısından meta tanımlarına, Schema veri düzenlemelerinden sayfaya bağlanan script ve CSS dosyalarına kadar pek çok detay burada saklıdır. Peki, istediğiniz herhangi bir sitenin kod yapısına nasıl ulaşırsınız?

💡 En Pratik Yol: URL Üzerinden Kodları Açma

İster bilgisayardan ister cep telefonundan bağlanın, bir sayfanın kodlarını saniyeler içinde ekranınıza getirmek son derece kolay. Tek yapmanız gereken, adres çubuğundaki bağlantının en başına view-source: önekini eklemek.

• Örnek: view-source:[https://siteniz.com](https://siteniz.com)

Bu tekniği kullanarak sayfanın tüm HTML kurgusunu, stil ve kod bağlantılarını doğrudan inceleyebilirsiniz.

Kullandığınız internet tarayıcısına göre küçük adımlar değişse de temelde iki farklı yoldan ilerleyebilirsiniz: Sayfa Kaynağını Görüntüleme ve Geliştirici Araçları (DevTools). İşte popüler tarayıcılarda izleyebileceğiniz adımlar:

# Chrome Tarayıcıda Sayfa Kaynağı Görüntüleme

Google Chrome’da bir sayfanın kaynak kodlarına göz atmak, özellikle SEO çalışmaları veya web geliştirme süreçlerinde sıkça başvurulan oldukça pratik bir yöntemdir. Kod yapısını incelemek istediğinizde izleyeceğiniz adımlar şunlardır:

• İlgili Sayfayı Açın: İlk olarak kodlarını incelemek istediğiniz web adresine girin.
• Sağ Tık Menüsünü Kullanın: Sayfanın boş bir yerine sağ tıklayarak açılan pencereyi görüntüleyin.
• Kaynak Kodlara Erişin: Liste içerisindeki “Sayfa Kaynağını Görüntüle” seçeneğine basarak kodların yer aldığı yeni sekmeye geçin.
• Hızlıca Arama Yapın: Kod kargaşası içinde kaybolmamak için Ctrl + F (Mac kullanıcıları için Cmd + F) tuş kombinasyonunu kullanarak başlık etiketi (<title>) gibi merak ettiğiniz özel alanları ya da kelimeleri saniyeler içinde bulabilirsiniz.

# Chrome Geliştirici Araçları ile Kaynak Kodları Görme

Bir web sitesinin arka planında işlerin nasıl yürüdüğünü merak ediyorsanız ya da ham kodlar yerine tarayıcının o an ne gösterdiğini canlı canlı görmek istiyorsanız, ihtiyacınız olan şey tam olarak “Öğeyi İncele” özelliği. Gördüğünüz o anlık DOM yapısını, canlı CSS dokunuşlarını ve dinamik içerikleri keşfetmek aslında çok kolay:

• Sağ Tık Kolaylığı: Sayfada merak ettiğiniz herhangi bir yere sağ tıklayıp “İncele” seçeneğine basabilirsiniz.
• Klavye Kısayolları: Hızlıca açmak isterseniz doğrudan F12 tuşunu veya Ctrl + Shift + I (Mac kullanıcıları için Cmd + Option + I) kombinasyonunu kullanabilirsiniz.

Bu küçük adımla doğrudan Chrome Developer Tools paneline bağlanabilir, web sayfasının o anki canlı yapısını dilediğiniz gibi kurcalayabilirsiniz.

• “Elements” (Öğeler) Sekmesi: Sayfanın Canlı İskeleti Tarayıcının ekrana yansıttığı tüm yapıyı (DOM) anlık olarak burada takip edebilirsiniz. Kodların sayfada tam olarak nasıl durduğunu görmek ve üzerinde denemeler yapmak için birebirdir.
  • Ekrandaki her bir öğeyi anında değiştirebilir, canlı testler yapabilirsiniz.
  • Öğelere bağlı tüm CSS stillerini ve tasarım detaylarını inceleyebilirsiniz.
  • Sayfanın hiyerarşik kod mimarisini adım adım gezebilirsiniz.
  • Kodlarda saklanmış ya da gizlenmiş gizli öğeleri açığa çıkarabilirsiniz.
  • JavaScript’in çalışma anında sayfaya dahil ettiği dinamik yapıları görebilirsiniz.
  • Sayfa kaydırıldıkça yüklenen (lazy-load) içerikleri kolayca analiz edebilirsiniz.
• “Sources” (Kaynaklar) Sekmesi: Sitenin Dosya Deposu Sayfanın arka planında çalışan tüm dosya arşivine doğrudan erişim sağladığınız yerdir.
  • Çalıştırılan tüm JavaScript (.js) ve stil (.css) dosyaları,
  • Tasarımda kullanılan fontlar,
  • Arka planda çalışan döküman ve framework yapıları,
  • Birleştirilmiş kod paketleri (bundle) tamamen bu sekmede listelenir.
• “Network” (Ağ) Sekmesi: Arka Planın Trafik Kontrol Merkezi Teknik analizlerin kalbi tam olarak burada atar. Sayfa yüklenirken veya bir işlem yaparken arka planda dönen tüm veri trafiğini buradan anlık izleyebilirsiniz:
  • Sitenin dışarıya yaptığı API çağrıları ve sunucudan dönen JSON yanıtları,
  • Sayfa yenilenmeden çekilen AJAX ve Fetch/XHR istekleri,
  • Bağlantı kurulan tüm CDN servisleri,
  • Görsellerin ve script dosyalarının yüklenme sırası,
  • Sayfanın hızlı açılmasını engelleyen (render blocking) CSS dosyaları.

# Telefonda Sayfa Kaynağını Görme (iOS & Android)

Masaüstünden uzaktaysanız ve bir web sitesinin arka planındaki HTML kodlarını acilen kontrol etmeniz gerekiyorsa, bunu telefonunuzdan da rahatlıkla halledebilirsiniz. Mobil tarayıcıların sunduğu pratik bir ipucu işinizi görecektir.

• Mobil cihazınızda kullandığınız tarayıcıyı (Chrome, Safari veya Firefox) açın.
• Adres çubuğundaki site URL’sinin tam önüne view-source: ifadesini ekleyin.
• Örnek görünüm: view-source:[https://www.ornek.com](https://www.ornek.com)
• Sayfayı tekrar yüklediğinizde (Git / Enter tuşuna bastığınızda) sitenin tüm HTML kodları karşınızda olacak.

# Safari’de Sayfa Kaynağına Nasıl Bakılır?

Apple cihazı kullanıyorsanız, Safari’de sitelerin mutfağına (kodlarına) göz atmak oldukça kolay. Ancak bunun için minik bir hazırlık yapıp “Geliştirici” seçeneğini açmamız gerekiyor.

• Safari’yi açıp sol üstteki Safari menüsünden Ayarlar (veya bazı sürümlerde Tercihler) kısmına girin.
• Açılan pencerede Gelişmiş sekmesini seçin.
• En alt tarafta yer alan “Geliştirme menüsünü menü çubuğunda göster” seçeneğini işaretleyin.
• Bu ayarı yaptıktan sonra tek yapmanız gereken, kodlarını incelemek istediğiniz sayfadayken Cmd + Option + U tuşlarına basmak. Dilerseniz fareyle sağ tıklayıp “Sayfa Kaynağını Göster” adımını da izleyebilirsiniz.

# JavaScript ile Oluşan HTML’yi Görüntüleme

Modern web siteleri, sayfadaki içerikleri genellikle JavaScript kullanarak dinamik bir şekilde sonradan yükler. Böyle durumlarda tarayıcının “Kaynağı Görüntüle” (view-source) özelliği, yalnızca sunucudan gelen ilk ve ham HTML kodunu karşınıza çıkarır. Sayfada JavaScript çalıştıktan sonra oluşan asıl içeriğe ulaşmak istiyorsanız izleyebileceğiniz pratik yöntemler şunlardır:

• DevTools → Elements Sekmesi: Tarayıcınızın İncele (DevTools) aracındaki Elements paneli, JavaScript’in işlediği ve ekrana yansıttığı canlı DOM yapısını doğrudan görmenizi sağlar.
• Network → XHR/Fetch Filtresi: Sayfanın arka planda çağırdığı API isteklerini, çekilen veri paketlerini ve dönen JSON yanıtlarını detaylıca incelemek için bu filtreyi kullanabilirsiniz.
• Son HTML Yapısını Dışa Aktarma: JavaScript çalıştıkça biçimlenen nihai HTML kodunu bilgisayarınıza kaydetmek ya da kopyalamak için DevTools panelinde ilgili ögeye sağ tıklayıp “Edit as HTML” diyebilir veya “Copy → Copy outerHTML” yolunu izleyebilirsiniz.