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 görüntülemek için ilk ve en basit olan üç farklı yöntem sunar: CTRL + U (COMMAND + OPTION + U macOS'ta).
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ş olan aşağıdaki metni girerek ve Girmek anahtar: görünüşüdür kaynak: (ör., görünüm kaynağı: https: //www.Go-Travels.com).
Üçü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çılabilir ve kapatılabilir: CTRL + ÜSTKRKT + I (KOMUT + 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üğmesini seçin.
-
Açılır menü belirdiğinde, fare imlecinizi Daha fazla araç seçeneği.
-
Alt menü belirdiğinde Geliştirici araçları.
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: görünüşüdür kaynak:. Bunun bir örneği olurdu kaynağı görüntüle: https: //www.Go-Travels.com . Söz konusu sayfadan HTML ve diğer kodlar etkin pencerede anında görüntülenecektir.
iOS
İPad, 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), 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 tıklayın (sağ üst köşede bulunan üç nokta) ve F12 Geliştirici Araçları listeden seçenek.
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): Eleman incelemek ve Kaynağı görüntüle, ikincisi Debugger kaynak kodu ile doldurulmuş dev araçlar arabiriminin bir kısmı.
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 tuşuna basabilirsiniz. CTRL + U (COMMAND + U klavyenizde, aktif web sayfası için HTML ve diğer kod içeren yeni bir sekme açacak olan klavyenizde.
Aşağıdaki metni Firefox'un adres çubuğuna, doğrudan sayfanın URL'sinin soluna yazarak, aynı kaynağın şu andaki sekmede görünmesine neden olur: görünüşüdür kaynak: ( örneğin, kaynak: https: //www.dotdash.com ).
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üğmesini seçin.
-
Açılır menü göründüğünde, Geliştirici "İngiliz anahtarı simgesi.
-
Web Developer içerik menüsü şimdi görünmelidir. Seçin Sayfa Kaynağı seçeneği.
Firefox ayrıca, bir sayfanın belirli bir kısmının kaynak kodunu görüntülemenizi 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 seçin Seçim Kaynağı'nı Görüntüle tarayıcının içerik menüsünden.
Android
Firefox'un Android sürümündeki kaynak kodunu görüntülemek, web sayfasının URL'sini aşağıdaki metinle önekleyerek elde edilebilir: görünüşüdür kaynak:. Örneğin, Dotdash için HTML kaynağını görüntülemek için, aşağıdaki metni tarayıcının adres çubuğuna gönderirsiniz: kaynağı görüntüle: https: //www.dotdash.com .
iOS
İPad, 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
İOS ve MacOS'ta çalışıyor
iOS
İOS için Safari, sayfa kaynağını varsayılan olarak görüntüleme yeteneğini içermese de tarayıcı, App Store'da 0,99 ABD doları için kullanılabilen Görünüm Kaynağı uygulamasıyla oldukça sorunsuz bir şekilde entegre olur.
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. İOS 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 buton.
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ştirmek Menü. 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.
-
seçmek Safari Ekranın en üstünde bulunan tarayıcı menüsünde.
-
Açılır menü belirdiğinde, Tercihler seçeneği.
-
Safari'nin Tercihleri şimdi görünmelidir. Tıkla ileri Üst satırın en sağında bulunan simge.
-
Gelişmiş bölümün alt kısmına doğru etiketlenmiş bir seçenek Menü çubuğunda Geliştir menüsünü göster, boş bir onay kutusuyla birlikte. Bir onay işaretini yerleştirmek için bu kutuyu bir kez seçin ve sol üst köşede bulunan kırmızı 'x' üzerine tıklayarak Tercihler penceresini kapatın.
-
Seçin Geliştirmek Ekranın en üstünde bulunan menü.
-
Açılır menü belirdiğinde, Sayfa Kaynağını Göster. 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 (COMMAND + OPTION + U macOS'ta). Kaynak yerine geçerli sekmede yükleme yapmayı tercih ederseniz, adres çubuğunun içinde sayfanın URL'sinin soluna aşağıdaki metni yazın ve Enter: görünüm kaynağı: ( örnek olarak, kaynak: https: //www.Go-Travels.com ).
Opera'nın masaüstü sürümü, 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 arayüzü başlatmak için aşağıdaki klavye kısayoluna basın: CTRL + ÜSTKRKT + I (KOMUT + OPTION + I macOS'ta).
Opera'nın geliştirici araç setine ayrıca aşağıdaki adımları uygulayarak erişilebilir.
-
Tarayıcı pencerenizin sol üst köşesinde bulunan Opera logosunu seçin.
-
Açılır menü belirdiğinde, fare imlecinizi Daha fazla araç seçeneği.
-
Tıklamak Geliştirici menüsünü göster.
-
Opera logosunu tekrar seçin.
-
Açılır menü belirdiğinde, imlecinizi üzerine getirin Geliştirici.
-
Alt menü belirdiğinde Geliştirici Araçları.
Vivaldi
Vivaldi tarayıcısında sayfa kaynağını görüntülemenin birden fazla yolu vardır. En basit olanı CTRL + U Etkin sayfanın kodunu yeni bir sekmede sunan klavye kısayolu.
Aşağıdaki metni, mevcut sekmedeki kaynak kodunu görüntüleyen sayfanın URL'sinin önüne ekleyebilirsiniz: görünüşüdür kaynak:. Bunun bir örneği olurdu kaynağı görüntüle: http: //www.dotdash.com .
Başka bir yöntem, tarayıcının entegre geliştirici araçları aracılığıyla, CTRL + ÜSTKRKT + I kombinasyon ya da Geliştirici Araçları tarayıcının seçeneğinde Araçlar menü - seçerek bulundu V sol üst köşede logo. Dev araçlarını kullanmak, sayfanın kaynağının daha ayrıntılı bir analizini sağlar.
