Okuduğunuz web sayfası, diğer şeylerin yanı sıra kaynak koddan oluşur. Bu, web tarayıcınızın şu an okuduğunuz ve çevirdiğiniz bilgiler anlamına gelir.
Çoğu web tarayıcısı, ne tür bir cihaz üzerinde olursanız olun, herhangi bir ek yazılım gerekmeden bir web sayfasının kaynak kodunu görme olanağı sağlar.
Bazıları bile gelişmiş işlevsellik ve yapı sunarak, sayfadaki HTML ve diğer programlama kodlarını kullanmayı kolaylaştırır.
Kaynak Kodunu Neden Görmek İstersiniz?
Bir sayfanın kaynak kodunu görmek isteyebileceğiniz çeşitli nedenler vardır. Bir web geliştiricisiyseniz, belki de başka bir programcının özel tarzı veya uygulamasında kapakların altına bir göz atmak istersiniz. Belki de kalite güvencesindesiniz ve bir web sayfasının belirli bir bölümünün neden bu şekilde işlediğini veya nasıl davrandığını anlamaya çalışıyorsunuz.
Kendi sayfalarınızı nasıl kodlayacağınızı öğrenmeye çalışan yeni başlayanlar olabilirsiniz ve bazı gerçek dünya örneklerini araştırıyorsunuz. Tabii ki, bu kategorilerin hiçbirine girmemeniz ve sadece kaynağı meraktan uzak görmek isteyebilirsiniz.
Aşağıda listelenen tarayıcınızda kaynak kodunun nasıl görüntüleneceğine dair talimatlar listelenmiştir.
Google Chrome
Çalışıyor: Chrome OS, Linux, MacOS, Windows
Chrome'un masaüstü sürümü, aşağıdaki klavye kısayolunu kullanarak, bir sayfanın kaynak kodunu ilk ve en basit şekilde görüntülemek için üç farklı yöntem sunar: CTRL + U (MacOS üzerinde COMMAND + OPTION + U ).
Basıldığında, bu kısayol etkin sayfa için HTML ve diğer kodları gösteren yeni bir tarayıcı sekmesi açar. Bu kaynak renk kodludur ve bölümlendirmeyi ve aradığınızı bulmayı kolaylaştıracak şekilde yapılandırılmıştır. Ayrıca, Chrome'un adres çubuğuna, web sayfasının URL'sinin sol tarafına eklenmiş ve Enter tuşuna basılarak aşağıdaki metni girerek de ulaşabilirsiniz: view-source: (yani, view-source: https: // www .).
Üçüncü yöntem ise Chrome'un geliştirici araçlarıdır. Bu , sayfanın koduna daha derin bir dalış yapmanızı ve test ve geliştirme amacıyla anında kullanabilmenizi sağlar. Geliştirici araçları arayüzü, bu klavye kısayolu kullanılarak açılıp kapatılabilir: CTRL + SHIFT + I ( COMMAND + OPTION + I macOS'ta). Aşağıdaki yolu izleyerek de başlatabilirsiniz.
- Sağ üst köşede bulunan ve dikey olarak hizalanmış üç noktayla gösterilen Chrome'un ana menü düğmesine tıklayın.
- Açılır menü belirdiğinde, fare imlecinizi Diğer araçlar seçeneğinin üzerine getirin.
- Alt menü belirdiğinde, Geliştirici araçlarını tıklayın.
Android
Bir web sayfasının kaynağını Android için Chrome'da görüntülemek, aşağıdaki metni adresinin önüne (veya URL'ye) eklemek ve göndermek için basittir: view-source :. Bunun bir örneği görünüm kaynağı olacaktır: https: // www. . Söz konusu sayfadan HTML ve diğer kodlar etkin pencerede anında görüntülenecektir.
iOS
IPad, iPhone veya iPod touch'ınızda Chrome'u kullanarak kaynak kodu görüntülemek için yerel yöntemler olmasa da, Kaynağı Görüntüle uygulaması gibi üçüncü taraf bir çözümü kullanmak en basit ve en etkili yöntemdir.
App Store'da 0,99 ABD doları için kullanılabilir, Kaynağı Görüntüle sayfanın URL'sini girmenizi ister (veya kopyalamanın Chrome'un adres çubuğundan kopyalanması / yapıştırılmasıdır, bu da bazen en kolay yoldur) ve işte budur. HTML ve diğer kaynak kodlarını göstermenin yanı sıra, uygulamada tek tek sayfa öğelerini, Belge Nesne Modeli'ni (DOM), ayrıca sayfa boyutunu, çerezleri ve diğer ilginç ayrıntıları gösteren sekmeler de bulunur.
Microsoft Edge
Çalışıyor: Windows
Edge tarayıcısı, mevcut sayfanın kaynak kodunu Geliştirici Araçları arayüzüyle görüntülemenize, analiz etmenize ve hatta değiştirmenize izin verir. Bu kullanışlı araç setine erişmek için şu klavye kısayollarından birini kullanabilirsiniz: F12 veya CTRL + U. Bunun yerine fareyi tercih ederseniz, Edge'in menü düğmesine (sağ üst köşede bulunan üç nokta) tıklayın ve listeden F12 Geliştirici Araçları seçeneğini seçin.
Dev araçları ilk kez çalıştırıldıktan sonra, Edge tarayıcının içerik menüsüne iki ek seçenek ekler (bir web sayfasının herhangi bir yerine sağ tıklayarak erişilebilir): Öğeyi ve Kaynağı görüntüle'yi kontrol edin , ikincisinin hata ayıklayıcı bölümünü açar. kaynak kodu ile doldurulmuş araçlar arayüzü.
Mozilla Firefox
Çalışıyor: Linux, MacOS, Windows
Firefox'un masaüstü sürümünde bir sayfanın kaynak kodunu görüntülemek için, klavyenizde CTRL + U (MacOS üzerinde COMMAND + U ) tuşlarına basabilirsiniz; bu, HTML ve aktif web sayfası için başka bir kod içeren yeni bir sekme açacaktır.
Firefox'un adres çubuğuna aşağıdaki metni doğrudan sayfanın URL'sinin soluna yazmanız, aynı kaynağın şu andaki sekmede görünmesine neden olur: view-source: (yani, view-source: https: // www.) .
Bir sayfanın kaynak koduna erişmenin başka bir yolu da, aşağıdaki adımlardan yararlanarak Firefox’un geliştirici araçlarıdır.
- Tarayıcı pencerenizin sağ üst köşesinde bulunan ve üç yatay çizgi ile temsil edilen ana menü düğmesine tıklayın.
- Açılır menü belirdiğinde, Geliştirici "İngiliz anahtarı" simgesini tıklayın.
- Web Developer içerik menüsü şimdi görünmelidir. Sayfa Kaynağı seçeneğini seçin.
Firefox ayrıca, bir sayfanın belirli bir kısmı için kaynak kodunu görmenizi ve sorunları yalıtmanızı kolaylaştırır. Bunu yapmak için, önce farenizle ilgilendiğiniz alanı vurgulayın. Ardından, sağ tıklayın ve tarayıcının içerik menüsünden Seçim Kaynağı Görüntüle'yi seçin.
Android
Firefox'un Android sürümünde kaynak kodunun görüntülenmesi, web sayfasının URL'sini aşağıdaki metinle önek ekleyerek gerçekleştirilebilir: view-source :. Örneğin, aşağıdaki metni tarayıcının adres çubuğuna göndereceğiniz HTML kaynağını görüntülemek için: view-source: https: // www. .
iOS
IPad, iPhone veya iPod touch'ınızda web sayfası kaynak kodunu görüntülemek için önerdiğimiz yöntem, App Store'da 0,99 ABD doları karşılığında bulunan View Source uygulamasıdır. Doğrudan Firefox ile entegre edilmemesine rağmen, HTML'yi ve söz konusu sayfa ile ilişkili diğer kodları açıklamak için bir URL'yi tarayıcıdan uygulamaya kopyalayıp yapıştırabilirsiniz.
Apple Safari
IOS ve MacOS'ta çalışıyor
iOS
IOS için Safari, sayfa kaynağını varsayılan olarak görüntüleme yeteneğini içermese de, tarayıcı, Görüntüleme Kaynağı uygulamasıyla oldukça sorunsuz bir şekilde bütünleşir - App Store'da 0,99 ABD dolarıdır.
Bu üçüncü taraf uygulamasının kurulumunu Safari tarayıcısına yükledikten sonra ekranın altında bulunan ve kare ve yukarı okla gösterilen Paylaş düğmesine dokunun. IOS Paylaşım Sayfası artık Safari pencerenizin alt yarısını kaplayacak şekilde görünür durumda olmalıdır. Sağa ilerleyin ve Kaynağı Görüntüle düğmesini seçin.
Etkin sayfanın kaynak kodunun renk kodlu, yapılandırılmış bir gösterimi, sayfa öğelerini, komut dosyalarını ve daha fazlasını görüntülemenizi sağlayan diğer sekmelerle birlikte görüntülenmelidir.
Mac os işletim sistemi
Bir sayfanın kaynak kodunu Safari'nin masaüstü sürümünde görüntülemek için öncelikle Geliştir menüsünü etkinleştirmeniz gerekir. Aşağıdaki adımlar bu gizli menüyü etkinleştirip bir sayfanın HTML kaynağını görüntüleyerek size yol gösterir.
- Ekranın en üstünde bulunan tarayıcı menüsünde Safari'yi tıklayın.
- Açılır menü görüntülendiğinde, Tercihler seçeneğini seçin.
- Safari'nin Tercihleri şimdi görünmelidir. Üst sıranın en sağında bulunan Gelişmiş simgesine tıklayın.
- Gelişmiş bölümün alt kısmına doğru, boş bir onay kutusuyla birlikte menü çubuğunda Göster'i Göster etiketli bir seçenek bulunur. Bir onay işaretini yerleştirmek için bu kutuyu bir kez tıklayın ve sol üst köşede bulunan kırmızı 'x' üzerine tıklayarak Tercihler penceresini kapatın.
- Ekranın en üstünde bulunan Geliştirme menüsünü tıklayın.
- Açılır menü belirdiğinde, Sayfa Kaynağını Göster'i seçin. Bunun yerine aşağıdaki klavye kısayolunu da kullanabilirsiniz: COMMAND + OPTION + U.
Opera
Çalışıyor: Linux, MacOS, Windows
Opera tarayıcısındaki aktif web sayfasından kaynak kodunu görüntülemek için aşağıdaki klavye kısayolunu kullanın: CTRL + U (MacOS üzerinde COMMAND + OPTION + U ). Kaynak yerine geçerli sekmede yüklemeyi tercih ederseniz, aşağıdaki metni adres çubuğunun sol tarafına yazın ve Enter tuşuna basın : view-source: (yani, view-source: https: // www. ).
Opera'nın masaüstü versiyonu, entegre edilmiş geliştirici araçlarını kullanarak HTML kaynağını, CSS'yi ve diğer öğeleri görüntülemenizi de sağlar. Ana tarayıcı pencerenizin sağ tarafında varsayılan olarak görüntülenecek olan bu arabirimi başlatmak için aşağıdaki klavye kısayoluna basın: CTRL + SHIFT + I ( COMMAND + OPTION + I macOS'ta).
Opera'nın geliştirici araç setine ayrıca aşağıdaki adımları izleyerek erişilebilir.
- Tarayıcı pencerenizin sol üst köşesinde bulunan Opera logosuna tıklayın.
- Açılır menü belirdiğinde, fare imlecinizi Diğer araçlar seçeneğinin üzerine getirin.
- Geliştirici menüsünü göster'e tıklayın .
- Opera logosuna tekrar tıklayın.
- Açılan menü görüntülendiğinde, imlecinizi Geliştirici'nin üzerine getirin.
- Alt menü göründüğünde, Geliştirici Araçları'nı tıklayın.
Vivaldi
Vivaldi tarayıcısında sayfa kaynağını görüntülemenin birden fazla yolu vardır. En basit olanı, aktif sayfadan yeni bir sekmede kod sunan CTRL + U klavye kısayoludır.
Aşağıdaki metni, mevcut sekmedeki kaynak kodunu görüntüleyen sayfanın URL'sinin önüne ekleyebilirsiniz: view-source:. Bunun bir örneği görünüm kaynağı olacaktır: http: // www. .
Başka bir yöntem, tarayıcının tümleşik geliştirici araçları aracılığıyla, CTRL + SHIFT + I kombinasyonuna veya tarayıcının Araçlar menüsündeki Geliştirici Araçları seçeneğine basılarak erişilebilir - sol üst köşede 'V' logosu tıklanarak bulunur. Dev araçlarını kullanmak, sayfanın kaynağının daha ayrıntılı bir analizini sağlar.