Google Chrome'da HTML Kaynağı Nasıl Görüntülenir

İ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 sıkıcı ve zahmetlidir, ö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 ilginizi çekmeyen öğeleri daraltma yeteneği 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ülediğiniz 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 isterseniz, 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.