Bir Sitenin Kaynak Kodlarını Görüntüleme Nasıl Yapılır?

İnternette ziyaret ettiğiniz web siteleri tarayıcı tarafından görüntülenmeden önce HTML, CSS ve JavaScript gibi çeşitli teknolojilerden yararlanır. Web geliştirme öğrenirken, bir sayfanın nasıl oluşturulduğunu incelerken veya teknik bir problemi araştırırken bir sitenin kaynak kodlarını görüntüleme ihtiyacı duyabilirsiniz.

Chrome, Firefox ve Edge gibi modern tarayıcılarda herhangi bir ek program yüklemeden web sayfasının tarayıcıya gönderilen kaynak kodlarını görüntülemek mümkündür. Bu rehberde bilgisayar ve mobil cihazlarda site kaynak kodu nasıl görüntülenir sorusunu adım adım ele alacağız.

Bir Sitenin Kaynak Kodlarını Görüntüleme Nedir?

Bir web sitesinin kaynak kodunu görüntülemek, sunucu tarafından tarayıcıya gönderilen HTML içeriğini ve sayfada kullanılan istemci tarafı kaynakları incelemek anlamına gelir.

Kaynak kod içerisinde genellikle şu bilgiler bulunabilir:

• HTML etiketleri

• Sayfa başlığı (title)

• Meta açıklaması

• Canonical etiketi

• CSS ve JavaScript dosyalarının adresleri

• Görsel dosyalarının yolları

• Open Graph etiketleri

• Schema yapılandırmaları

• Sayfa içerisindeki bağlantılar

Ancak önemli bir ayrım vardır: Kaynak kodunu görüntülemek, web sitesinin sunucu tarafındaki tüm kodlarına erişmek anlamına gelmez.

PHP, Python, Node.js veya veritabanı sorguları gibi sunucu tarafında çalışan kodlar ziyaretçinin tarayıcısına gönderilmez. Tarayıcı yalnızca sunucudan kendisine gönderilen çıktıyı görüntüleyebilir.

Google Chrome'da Bir Sitenin Kaynak Kodlarını Görüntüleme

Google Chrome üzerinden bir web sitesinin kaynak kodlarını görüntülemek için birkaç farklı yöntem kullanılabilir.

1. Sağ Tıklayarak Kaynak Kodunu Görüntüleme

İncelemek istediğiniz web sitesini Google Chrome ile açın.

Sayfanın boş bir bölümüne sağ tıklayın ve:

Sayfa kaynağını görüntüle

seçeneğine tıklayın.

Tarayıcı yeni bir sekme açarak sayfanın HTML kaynak kodunu gösterecektir.

2. CTRL + U ile Kaynak Kodunu Görüntüleme

Windows ve Linux kullanıcıları için en hızlı yöntemlerden biri klavye kısayoludur.

CTRL + U

İncelemek istediğiniz sayfadayken bu tuş kombinasyonunu kullandığınızda kaynak kodu yeni bir sekmede açılır.

macOS üzerinde ise genellikle:

Option + Command + U

kısayolu kullanılabilir.

view-source ile Site Kaynak Kodunu Görüntüleme

Bir sitenin kaynak kodlarını görüntüleme işlemi için kullanılabilecek diğer yöntem, web adresinin başına view-source: ifadesini eklemektir.

Örneğin:

view-source:https://example.com

Bu adres tarayıcıya yazıldığında destekleyen masaüstü tarayıcılarda ilgili sayfanın kaynak kodu görüntülenir.

Bu yöntem özellikle kaynak kodunu doğrudan ayrı bir sekmede görüntülemek istediğinizde kullanışlıdır.

Geliştirici Araçları ile Kaynak Kodlarını Görüntüleme

Kaynak kodlarını daha detaylı incelemek istiyorsanız Chrome Developer Tools yani geliştirici araçlarını kullanabilirsiniz.

Sayfanın herhangi bir bölümüne sağ tıklayarak:

İncele

seçeneğine basabilirsiniz.

Alternatif olarak Windows üzerinde:

F12

veya:

CTRL + SHIFT + I

kısayolları kullanılabilir.

Elements Bölümü Ne İşe Yarar?

Geliştirici araçlarındaki Elements sekmesi, web sayfasının o anda tarayıcıda oluşmuş DOM yapısını görüntülemenizi sağlar.

Burada HTML elementlerini görüntüleyebilir, CSS kurallarını inceleyebilir ve test amacıyla geçici değişiklikler yapabilirsiniz.

Örneğin bir başlığın rengini değiştirebilir, yazıyı düzenleyebilir veya belirli bir HTML elementini geçici olarak kaldırabilirsiniz.

Bu değişiklikler yalnızca sizin tarayıcınızda gerçekleşir. Web sitesinin sunucusundaki gerçek dosyalarda herhangi bir değişiklik yapılmaz. Sayfayı yenilediğinizde yaptığınız değişiklikler genellikle kaybolur.

Sayfa Kaynağını Görüntüle ile İncele Arasındaki Fark Nedir?

Bu iki özellik benzer görünse de aynı işlevi yerine getirmez.

Sayfa Kaynağını Görüntüle, sunucunun tarayıcıya gönderdiği başlangıç HTML kaynağını gösterir.

İncele / Developer Tools ise JavaScript çalıştıktan sonra değişmiş olabilecek mevcut DOM yapısını görüntülemenizi sağlar.

Örneğin JavaScript kullanılarak sonradan sayfaya eklenen bir içerik, başlangıç kaynak kodunda bulunmayabilir ancak geliştirici araçlarının Elements bölümünde görüntülenebilir.

Bu nedenle dinamik web sitelerini incelerken geliştirici araçlarından yararlanmak daha kapsamlı bilgiler sağlayabilir.

Firefox'ta Site Kaynak Kodunu Görüntüleme

Mozilla Firefox'ta bir web sitesinin kaynak kodlarını görüntülemek oldukça kolaydır.

Sayfayı açtıktan sonra:

CTRL + U

kısayolunu kullanabilirsiniz.

Daha detaylı inceleme yapmak için:

F12

tuşuyla Firefox geliştirici araçlarını açabilirsiniz.

HTML ve CSS yapısını daha detaylı incelemek için geliştirici araçlarındaki Inspector bölümünden yararlanabilirsiniz.

Microsoft Edge'de Kaynak Kodunu Görüntüleme

Microsoft Edge Chromium tabanlı olduğu için kaynak kodu görüntüleme işlemleri Google Chrome ile oldukça benzerdir.

Kaynak kodunu görüntülemek için:

CTRL + U

kullanabilirsiniz.

Geliştirici araçlarını açmak için ise:

F12

veya:

CTRL + SHIFT + I

kısayolunu kullanabilirsiniz.

Telefonda Bir Sitenin Kaynak Kodlarını Görüntüleme

Mobil tarayıcılarda masaüstündeki kadar kapsamlı geliştirici araçları genellikle bulunmaz. Ayrıca kullanılabilecek yöntemler işletim sistemine ve tarayıcıya göre değişebilir.

Android'de Kaynak Kodunu Görüntüleme

Bazı Android tarayıcıları view-source: yöntemini destekleyebilir.

Adres çubuğuna:

view-source:https://example.com

yazılarak kaynak kodunun görüntülenip görüntülenmediği kontrol edilebilir.

Mobil Chrome gibi tarayıcılarda masaüstündeki geliştirici araçlarının tamamı doğrudan kullanılamayabilir. Bu nedenle detaylı HTML, CSS ve JavaScript analizi yapılacaksa masaüstü tarayıcı kullanmak daha pratiktir.

iPhone'da Kaynak Kodunu Görüntüleme

iPhone ve iPad üzerinde Safari, masaüstü tarayıcılardaki gibi doğrudan kapsamlı kaynak kodu görüntüleme seçenekleri sunmayabilir.

Web geliştiricileri daha detaylı incelemeler için Mac üzerindeki Safari Web Inspector gibi geliştirici araçlarından yararlanabilir.

Basit işlemlerde ise kaynak kodu görüntülemeye yönelik üçüncü taraf uygulamalar kullanılabilir. Üçüncü taraf araçları kullanırken güvenilir uygulamaların tercih edilmesi önemlidir.

Kaynak Kodunda Belirli Bir Kelime Nasıl Bulunur?

Bir web sitesinin kaynak kodu binlerce satırdan oluşabilir. Bu nedenle aradığınız kodu veya etiketi tek tek bulmaya çalışmak yerine tarayıcının arama özelliğini kullanabilirsiniz.

Windows ve Linux:

CTRL + F

macOS:

Command + F

Örneğin SEO analizi yapıyorsanız aşağıdaki ifadeleri arayabilirsiniz:

<title>
<meta name="description"
<link rel="canonical"
<meta name="robots"

Bu yöntem sayesinde sayfanın önemli SEO etiketlerini kaynak kodu içerisinden hızlı bir şekilde görüntüleyebilirsiniz.

Kaynak Kodundan SEO Kontrolü Yapılabilir mi?

Evet. Bir sitenin kaynak kodlarını görüntüleme işlemi temel teknik SEO kontrollerinde oldukça faydalıdır.

Title ve Meta Description Kontrolü

Kaynak kodunda:

<title>

etiketini arayarak sayfanın HTML başlığını kontrol edebilirsiniz.

Meta açıklamasını bulmak için:

<meta name="description"

ifadesini arayabilirsiniz.

Canonical Etiketini Kontrol Etme

Sayfanın hangi URL'yi canonical olarak belirlediğini kontrol etmek için:

rel="canonical"

ifadesini arayabilirsiniz.

Canonical etiketi özellikle benzer veya aynı içeriğe sahip farklı URL'lerin bulunduğu web sitelerinde teknik SEO açısından önemlidir.

Robots Meta Etiketini Kontrol Etme

Sayfanın arama motorlarına indeksleme konusunda verdiği talimatları görüntülemek için:

name="robots"

ifadesini arayabilirsiniz.

Örneğin:

<meta name="robots" content="noindex">

şeklinde bir kod bulunması, ilgili sayfanın arama motorları tarafından indekslenmemesine yönelik bir talimat verildiğini gösterir.

Kaynak Kodundan PHP Kodları Görüntülenebilir mi?

Normal şartlarda hayır.

Bir web sitesi PHP kullanıyorsa PHP kodları sunucu üzerinde çalıştırılır ve ortaya çıkan sonuç ziyaretçinin tarayıcısına gönderilir.

Örneğin sunucuda:

<?php
echo "Merhaba Dünya";
?>

kodunun bulunduğunu varsayalım.

Tarayıcı PHP kodunun kendisini değil, oluşturduğu çıktıyı görüntüler:

Merhaba Dünya

Aynı durum Python, Node.js ve diğer sunucu taraflı teknolojiler için de geçerlidir.

Bu nedenle bir sitenin kaynak kodlarını görüntüleme yöntemiyle PHP kaynak kodlarına, veritabanı şifrelerine, yönetici parolalarına veya sunucudaki özel dosyalara erişilemez.

Bir Sitenin Kaynak Kodlarını Görüntülemek Yasal mı?

Tarayıcının standart özelliklerini kullanarak herkese açık bir web sayfasının tarayıcınıza gönderdiği HTML, CSS ve JavaScript kaynaklarını görüntülemek normal web kullanımının bir parçasıdır.

Ancak bir içeriğin tarayıcı üzerinden görüntülenebiliyor olması, o içeriğin telif hakkı bulunmadığı veya serbestçe kopyalanabileceği anlamına gelmez.

Başka bir web sitesine ait tasarım, metin, görsel veya kodların izinsiz şekilde kopyalanması farklı hukuki sorunlar oluşturabilir.

Aynı şekilde yetkisiz erişim gerçekleştirmek, güvenlik önlemlerini aşmaya çalışmak veya herkese açık olmayan sunucu kaynaklarına erişmek, tarayıcı üzerinden kaynak kodu görüntülemekten tamamen farklı bir konudur.

Bir Sitenin Kaynak Kodlarını Görüntüleme Kısayolları

En sık kullanılan kaynak kodu görüntüleme yöntemlerini kısaca özetleyelim:

İşlem	Windows / Linux	macOS
Sayfa kaynağını görüntüleme	CTRL + U	Option + Command + U
Geliştirici araçlarını açma	F12 / CTRL + SHIFT + I	Command + Option + I
Kaynak kodunda arama	CTRL + F	Command + F

Tarayıcı ve işletim sistemi sürümüne bağlı olarak bazı klavye kısayollarında farklılık görülebilir.

Sonuç

Bir sitenin kaynak kodlarını görüntüleme işlemi için çoğu durumda herhangi bir ek programa ihtiyaç duyulmaz. Chrome, Firefox ve Edge gibi modern masaüstü tarayıcılarda CTRL + U kısayolunu kullanarak sayfanın başlangıç HTML kaynak kodunu görüntüleyebilirsiniz.

Daha kapsamlı bir inceleme yapmak istiyorsanız F12 ile geliştirici araçlarını açarak HTML, CSS, JavaScript, ağ istekleri ve tarayıcıda oluşturulan DOM yapısını inceleyebilirsiniz.

Kaynak kodunda SEO açısından title, meta description, canonical ve robots etiketleri gibi önemli bilgileri de kontrol edebilirsiniz.

Ancak görüntülenen kaynak kodlarının tarayıcıya gönderilen içeriklerle sınırlı olduğunu unutmamak gerekir. PHP gibi sunucu tarafında çalışan kodlar, veritabanı bilgileri ve sunucu üzerindeki özel dosyalar standart kaynak kodu görüntüleme yöntemleriyle görüntülenemez.