İster sitenizin kaynak kodunda hata ayıklayan bir web tasarımcısı olun, ister bir sitenin kodunun neye benzediğini merak edin, HTML kaynağını doğrudan Google Chrome'da görüntüleyebilirsiniz. HTML kaynağını görüntülemenin iki yolu vardır: Kaynağı Görüntüle ve Geliştirici Araçlarını Kullanarak İnceleme.
Sayfa Kaynağını Görüntüle Kullanarak Kaynağı Görüntüle
Chrome'u çalıştırın ve HTML kaynak kodunu görüntülemek istediğiniz web sayfasına gidin. Sayfanın kaynağını yeni bir sekmede görmek için sayfayı sağ tıklayın ve "Sayfa Kaynağını Görüntüle" yi tıklayın veya Ctrl + U tuşlarına basın.
Web sayfasının tüm HTML'si ile birlikte tamamen genişletilmiş ve biçimlendirilmemiş yeni bir sekme açılır.
HTML kaynağında belirli bir öğeyi veya parçayı arıyorsanız, Kaynağı Görüntüle'yi kullanmak yorucu ve külfetli bir iştir, özellikle sayfa çok fazla JavaScript ve CSS kullanıyorsa.
Geliştirici Araçlarını Kullanarak Kaynağı İnceleyin
Bu yöntem, Chrome'daki Geliştirici Araçları bölmesini kullanır ve kaynak kodunu görüntülemek için çok daha temiz bir yaklaşımdır. Ek biçimlendirme ve görmek istemediğiniz öğeleri daraltma becerisi sayesinde HTML'yi burada okumak daha kolaydır.
Chrome'u açın ve incelemek istediğiniz sayfaya gidin; ardından Ctrl + Shift + i tuşlarına basın. Görüntülemekte olduğunuz web sayfasının yanında sabitlenmiş bir bölme açılacaktır.
Daha da genişletmek için bir öğenin yanındaki küçük gri oka tıklayın.
Varsayılan olarak tam sayfanın kodunu görmek istemiyorsanız, bunun yerine HTML'deki belirli bir öğeyi inceliyorsanız, sayfada o alanı sağ tıklayın ve ardından "İncele" yi tıklayın.
Bölme bu kez açıldığında, kodun tıkladığınız öğeyi içeren bölümüne doğrudan gider.
Yuvanın konumunu değiştirmek istiyorsanız, onu aşağı, sola, sağa taşıyabilir veya hatta ayrı bir pencereye açabilirsiniz. Menü simgesini (üç nokta) tıklayın, ardından sırasıyla ayrı bir pencereye sabitleyin, sola sabitleyin, aşağıya sabitleyin veya sağa sabitleyin.
Hepsi bu kadar. Koda bakmayı bitirdiğinizde, web sayfanıza dönmek için Kaynağı Görüntüle sekmesini kapatın veya Geliştirici Araçları bölmesindeki "X" i tıklayın.
