Yandex tarayıcı kaynak kodu. Google Chrome'da bir sayfanın kaynak kodu nasıl görüntülenir?

Uzun bir süre “sayfanın kaynak kodunu göster” seçeneği benim için gereksiz ve ilgi çekici değildi. Şimdiye kadar Codecademy'de HTML öğrenmek ve kendi sitelerimin düzenini öğrenmek yeni hobim haline gelmedi. Burada soru ortaya çıktı: "kumbaranız" için gerçek vakaları nerede bulabilir ve ilginç çözümler ödünç alabilirsiniz? Cevap, her şeyde olduğu gibi beklenmedik şekilde basitti: Google Chrome'daki sayfanın kaynak koduna bakın! Mütevazı bulgularımı sizlerle paylaşıyorum.

sayfa kaynak kodu nedir

Siz de benim gibi HTML programlamaya ilk adımlarınızı atıyorsanız, sayfanın kaynak kodunun ne olduğunu öğrenmek gereksiz olmayacaktır.

Sayfanın HTML kodu olarak da bilinen kaynak kodu, Hyper Text Markup Language (HTML) içindeki bir metindir. Gerçek sayfa içeriğini (metin, tablolar) ve etiketleri içerir. İkincisi, tarayıcı için talimatlar görevi görür: içeriğin nasıl görüntüleneceği, ne tür bir biçimlendirme kullanılacağı, bir köprü veya medya dosyasının nereye ekleneceği. Eh, biz, acemi programcılar için, kaynak kodu en iyi eğitim alanıdır: ilginç bir site buluyoruz ve üzerinde casusluk yapıyoruz, kaydediyoruz, başarılı parçaları kullanıyoruz. Nasıl?

Google Chrome tarayıcı sayfasında kaynak kodu nasıl görüntülenir?

Beğendiğiniz sayfayı bulun. Örneğin, site menüsünün tasarımıyla ilgilendim. Kaynak kodunu Google Chrome tarayıcısında açmanın üç yolu vardır:

1. simgesine tıklayın Menü tarayıcının sağ üst köşesinde ve "Ek Araçlar" öğesini seçin. Diğerleri arasında "Kaynak kodunu görüntüle" seçeneği vardır. Açıkçası, bu yöntemi nadiren kullanırım: çok fazla gereksiz hareket. Daha da kolay hale getirilebilir.
2. Tuş kombinasyonuna basın Ctrl + U- kaynak kodu içeren yeni bir pencere açılır;
3. Bağlam menüsünün hayranları için: sayfaya sağ tıklayın ve "Sayfa kodunu görüntüle" seçeneğini seçin.

Sayfanın HTML kodunu tarayıcıda görüntüleme göreviyle başa çıktık. Gelelim en ilginç aşamaya.

Kaynak kodu nasıl düzenlenir ve kaydedilir

Web sitesi oluşturmayı öğrenmek için başka birinin HTML kodunu okumak yeterli değildir. Onunla oynamanız, denemeniz, değişiklik yapmanız ve sonucu kontrol etmeniz gerekir. Birkaç iyi örnek derleyerek bile başlayabilirsiniz. Kaynak kodunu nasıl düzenler ve kaydederim?

Seçenek 1. "Manuel"

Sayfanın kaynak kodunu açtıktan sonra içerik menüsünü çağırıyoruz ve "Farklı Kaydet" seçeneğini seçiyoruz ve dosyayı sabit diske kaydediyoruz. Dosyayı Not Defteri veya Not Defteri'nde düzenler, değişiklikleri kaydeder ve tarayıcı üzerinden açarız. Değişikliklerimizin sonuçları (iyi ve kötü) tarayıcı penceresine yansıtılacaktır.

Seçenek 2. Profesyoneller için

Her gün kaynak kodla "oynadığınızda", "kaydet - aç - değiştir - kaydet - kontrol et" işlemi yorucudur. Kendim için, Google Chrome - Firebug Lite için bir eklenti yükleme şeklinde bir çözüm buldum. Tarayıcı pencerenizden çıkmadan kaynak kodunu düzenlemenizi ve kaydetmenizi sağlar.

Sosyal Medyada İçerik Pazarlaması: Abonelerin Kafasına Nasıl Girersiniz ve Markanıza Nasıl Aşık Olursunuz adlı yeni bir kitap çıkardık.

Abone olmak

Bir sitenin kaynak kodu, tarayıcının web sunucusundan aldığı bir HTML işaretlemesi, CSS stilleri ve JavaScript koleksiyonudur.

Kanalımızda daha fazla video - SEMANTICA ile internet pazarlamasını öğrenin

Komutan tarafından askerlere verilen bir dizi komuta benzetilebilir. Seyircinin patronu göremediğini veya duyamadığını hayal edin. Onların bakış açısından, ordu bağımsız olarak eylemler gerçekleştirir. Bizim durumumuzda komutan tarayıcıdır, komutlar kaynak kodudur ve yürüyen askerler nihai sonuçtur.

Site, kullanıcının isteği üzerine sayfayı gönderen bir web sunucusunda saklanır. İstek, adres çubuğuna bir URL yazmak, bir bağlantıya tıklamak veya bir formdaki bir gönder düğmesini tıklamaktır. Web sayfalarının hangi dilde yazıldığı, yazılım içerip içermediği önemli değildir. Herhangi bir sunucu tarafı algoritmasının sonucu, bir dizi html etiketi ve metnidir.
Bir sayfanın kaynak kodu, aşağıdakileri içeren bir veri kümesidir:

• html işaretlemesi;
• stil sayfası veya dosya bağlantısı;
• JavaScript ile yazılmış programlar veya kodlu dosyalara bağlantılar.

Bu üç bölüm tarayıcı tarafından işlenir. Sunucu için bu, bir isteğe yanıt olarak gönderilmesi gereken metindir.

Kaynak kodunu neden incelememiz gerekebilir?

Gördüğümüz her şeyi, özellikle optimize ederken, siteyle çalışırken ortaya çıkan belirli sorunları çözmek için analiz edebilir ve uygulayabiliriz. Kaynak koduna bakarak şunları yapabiliriz:

• Analiz etmek için kendinizin veya başka birinin sitesinin meta etiketlerine bakın.
• Sitedeki bazı öğelerin varlığını veya yokluğunu görün: sayaçlar, çeşitli sistemlerdeki tanımlama kodları, belirli komut dosyaları ve daha fazlası.
• Öğelerin parametrelerini öğrenin: boyutlar, renkler, yazı tipleri.
• Sayfadaki fotoğrafların ve diğer öğelerin yolunu bulun.
• Sayfadaki bağlantıları keşfedin.
• Web sitesi optimizasyon sürecine müdahale eden kodla ilgili sorunları bulun: stiller, komut dosyaları, ayrı dosyalarda bulunmayan geçersiz kod.

Bunlar temel özelliklerdir, ancak aslında kodu nasıl okuyacağınızı bilerek sayfa hakkında çok daha fazlasını öğrenebilirsiniz.

Sitenin kaynak kodu nasıl görüntülenir

Tamamen sunucuda yayınlandığı biçimde, bu tarayıcıdan yapılamaz. Ancak sayfaya sağ tıklayarak tüm işaretlemeleri görebilirsiniz. Bundan sonra, Google Chrome örneğini kullanarak.

"Sayfa kodunu görüntüle" seçeneğini seçiyoruz ve tam listeyi ayrı bir sekmede alıyoruz.

Bu sadece anlamak için ayrıştırılması gereken metindir. Ancak geliştirici araçlarını kullanarak etkileşimli kod alabilirsiniz.

Bir site sayfasının kaynak kodu nasıl bulunur?

Tarayıcıdaki menü simgesine tıklayın. Çoğu zaman sağda bulunur ve üç nokta veya şerit gibi görünür.

Ek araçlar bölümünde "Geliştirici Araçları"nı seçin.

Kodun aktif durumunu gösteren bir pencere açılacaktır. Bu, işaretlemeye tıkladığınızda, öğe stilinin yanında görüntüleneceği ve seçilen blokların sayfada vurgulanacağı anlamına gelir.

"Kaynak" sekmesinde bazı dosyaların içeriğini görüntüleyebilirsiniz: komut dosyaları, yazı tipleri, resimler.

Site sertifikasının kontrol edilmesi "Güvenlik" sekmesinde mevcuttur.

"Denetimler" sekmesi, barındırmada yayınlanan kaynağı kontrol etmeye yardımcı olacaktır.

Sağdaki panelin konumu uygun değilse, üç noktayı tıklayıp istediğiniz öğeyi seçerek değiştirebilirsiniz.

Meta etiketler nasıl görüntülenir?

Her html belgesi, yapı etiketleri içerir. İşte onlardan bazıları:

1. Html tüm belgedir.
2. Head - servis başlıklarının bölümü.
3. Başlık - sayfa başlığı (sekmede görüntülenir).
4. Gövde - belgenin gövdesi.
5. H1-H6 - sayfa metninin başlıkları.
6. Makale - makale.
7. Bölüm - bölüm.
8. Menü - menü.
9. Div - blok.
10. Span bir dizedir.
11. P - paragraf.
12. Tablo - bir masa.

Öğeler, sayfadaki bölümlerin mantıksal olarak sınırlandırılması için tasarlanmıştır; gerekirse biçimlendirilir. Sayfada bir şekilde görünen metinler içerirler. Ancak Head etiketi hizmet bilgilerini içerir. Bunu belirtmek için meta etiketleri kullanılır. İçlerinde yazılan her şey sunucu ve arama motorlarına yöneliktir.

İçeriğini başka bir şekilde bulmak mümkün değildir.

Link etiketine dikkat edelim. Yardımı ile harici içerme dosyalarına bağlantılar belirtilir. İstenirse içeriği görebilir ve diske kaydedebilirsiniz. Bunu yapmak için işaretçiyi adresin üzerine getirin ve RMB'ye basın. "Yeni Sekmede Aç"ı seçin.

Belirtilen dosya yeni bir sekmede açılır ve görüntülenebilir veya kaydedilebilir.

Komut dosyasında hata ayıklamak için sayfanın kaynak kodu nasıl görüntülenir?

Bu durumda, sayfayı yerel makinede açmak en uygunudur. Yalnızca işaretlemeyi, stilleri ve komut dosyalarını düzeltmeniz gerekiyorsa, bunu doğrudan klasörden yapabilirsiniz. Html kodu aynı şekilde görüntülenir. Ancak JavaScript kod hataları "Konsol" sekmesinde görülebilir. Hatanın açıklamasını ve oluştuğu satır numarasını gösterir.

Sözdizimi doğrudan kodda görülebilir. "Kaynak" sekmesi bunun için tasarlanmıştır.

Belirli bir öğenin kodu nasıl görüntülenir?

Çok sayıda öğeye sahip büyük sayfalar için, tüm işaretlemelerde istediğiniz kodu bulmak zordur. Bu durumda, bağlam menüsünün özel bir komutunu kullanmalısınız. Fareyi parçanın üzerine getirin ve RMB'ye basın. "Kodu Görüntüle" komutunu seçelim.

Aynı pencere açılır, ancak seçilen nesneye odaklanılır.

Özet

Sayfa kaynak kodunun ne olduğunu anlattık. Temel HTML ve CSS bilgisine hakim olmak yeterlidir ve uygun geliştirici araçlarını kullanarak kendi html belgelerinizde hata ayıklayabilirsiniz.

İnternette kaynak kodunu görüntülemek, yalnızca kendi deneyiminizden öğrenmenize değil, aynı zamanda gerçek çalışma örneklerini kullanmanıza da olanak tanır. Ve seo uzmanları için, site hakkında çok şey söyleyebilecek bilgiler olan meta etiketler faydalı olacaktır.

". Bağlam menüsünde aynı öğe var, metne sağ tıklarsanız sayfalar... CTRL + U klavye kısayolunu da kullanabilirsiniz. Mozilla FireFox harici programlar kullanmaz - orijinal kod sayfalar sözdizimi ile vurgulama ayrı bir tarayıcı penceresinde açılır.

Internet Explorer'da, menünün Dosya bölümünü tıklayın ve Not Defteri'nde Düzenle'yi seçin. Not Defteri adı yerine, orijinali görüntülemek için tarayıcı ayarlarında atadığınız bir başkası yazılabilir. kod a. Tıklamada sayfalar orijinali açmanıza izin veren bir öğeye de sahip olan bağlam menüsüne sağ tıklayarak kod sayfalar harici bir programda - "HTML'yi görüntüle- kod a".

Opera tarayıcısında menüyü açın, "Sayfa" bölümüne gidin ve "Geliştirme Araçları" alt bölümünde "Kaynak" seçeneğini seçme şansına sahip olacaksınız. kod"Ya da öğe" Başlangıcı kodçerçeve ". Bu seçime sırasıyla CTRL + U ve CTRL + SHIFT + U kısayol tuşları atanır. Bir tıklamaya ekli bağlam menüsünde sayfalar sağ tıklayın, ayrıca "İlk kod". Opera kaynağı sayfalar HTML dosyalarını düzenlemek için işletim sisteminde veya tarayıcı ayarlarında atanan harici bir programda.

Google Chrome tarayıcısı, şüphesiz, kaynağı görüntülemek için en iyi organizasyona sahiptir. kod a. Sağ tıklayarak, Görüntüle'yi seçebilirsiniz. kod a sayfalar"Ve sonra sözdizimi vurgulamalı kaynak ayrı bir sekmede açılacaktır. Veya "Görünüm" satırını seçebilirsiniz. kod bir öğe "ve aynı sekmede, HTML ve CSS'yi inceleyebileceğiniz iki ek çerçeve açılacaktır. kod eleman sayfalar... Tarayıcı, imleci satırlar boyunca hareket ettirmeye tepki verecektir. kod a, sayfadaki HTML'nin bu bölümüne karşılık gelen öğeleri vurgulayarak kod a.

Beceri sayfanın kaynak kodunu değiştir Gelişmiş bir İnternet kullanıcısı için faydalı bir beceridir. HTML kodunu değiştirerek açık olan web sayfasını istediğiniz gibi değiştirebilirsiniz. Bu yazıda size anlatacağız, sayfa kodu nasıl değiştirilir Google Chrome'da. Ancak, diğer tarayıcılarda her şey aynı şekilde yapılır, bu nedenle zorluklar ortaya çıkmamalıdır.

Sayfanın HTML kodu nedir?

Bir tarayıcıda açtığınız her sayfanın kendi HTML biçimlendirme dili vardır. Bu kod etiketler ve metindir. Etiketler, tarayıcıya sitenin belirli bir bölümünü nasıl görüntüleyeceğini söyleyen etiketlerdir. Metin, kullanıcının gördüğü sayfanın içeriğidir. Ayrıca, sayfa öğelerinin görünümünü ayarlayan CSS stilleri sayfaya bağlanabilir. NS sitenin kaynak kodunu değiştir HTML ve CSS'yi tam olarak bilmenize gerek yok ve yakında kendiniz göreceksiniz.

Bir web sayfası neden değiştirilir?

Sitedeki verileri değiştirebilir, mesajın metnini değiştirebilir, sahte ekran görüntüsü oluşturabilirsiniz. Lütfen tüm değişikliklerin yalnızca sizin tarafınızdan görülebileceğini ve sayfayı yeniden yüklediğinizde bunların kaybolacağını unutmayın. Ayrıca değiştirilen veriler gerçek olmayacaktır. Örneğin, 10 dolarım yoksa ve 100'e değiştirirsem, o zaman daha fazla param olmayacak. Bu sadece sayfanın tarayıcı tarafından görüntülenmesidir. Örnek:

Sonrasında:

Örnek olarak, aynı siteyi alacağım ve Google Chrome'da ana sayfayı açma “” makalesinin önceki duyurusunu değiştireceğim. Değiştirmek istediğim öğeye, örneğin duyuru başlığına sağ tıklayın ve “Kodu Görüntüle” seçeneğini seçin.

Açılan pencerede Elements sekmesine gidin ve sayfanın HTML kodunu görün. İçinde bizi ilgilendiren metni bulmanız gerekiyor. (kırmızı altı çizili)

Şimdi eski metni silip yenisini gireceğim.

Hepsi bu, duyurunun başlığı değiştirildi. Şimdi duyurunun kendisini, etiketlerini ve başlığını değiştireceğim.

img etiketindeki src niteliğini değiştirerek başka bir resim ekleyebilirsiniz.

Bu nedenle bugün, bir siteyi kodlarken hayatı kolaylaştıran bir Web yöneticisi için birkaç faydalı araca bakacağız. Google Chrome'daki web yöneticisi konsoluyla başlayalım. Ve sitenin düzeni sırasında web yöneticisinde en sık ortaya çıkan soruları gözden geçirelim.

Konsola ulaşmak için sitenizi Google Chrome'da açın, web sayfasında herhangi bir yeri sağ tıklayın ve içerik açılır menüsünden "Sayfa kodunu görüntüle"yi seçin veya "Görüntüle" yi seçerek araştırma için belirli bir öğeyi seçin. kod öğesi ".

En üstte, listelenen birkaç sekmeniz olacak. Bugün "Elementler" sekmesinden bahsedeceğiz , bir web sayfasının öğelerini vurgulama etiketleri, özellikler, öğelerin iç içe yerleştirilmesini vurgulayarak, DOM ağacındaki bir öğenin hiyerarşisini temsil eden (altta ipucu, kök ana öğeden mevcut araştırılan öğeye), yeteneği sunar. öğeleri düzenleme, özelliklerinin bir listesi, öğelere göre aramayı göz önünde bulundurmanın yanı sıra, öğelerle ilişkili css stillerini görüntüleme hakkında bilgi sahibi olalım, vb.

Belirli bir öğeyle ilişkili tüm stilleri nasıl görebilirim? Şimdi hangisi uygulanıyor? Hangi dosyalarda bulunurlar?

Yani, hiçbir şey daha kolay olamazdı! Google Chrome tarayıcısını açın, sitemizi açın - soruların kaynağı, sayfa bağlamında görünüyorsa, istenen öğeye sağ tıklayın ve içerik menüsünden "Öğe kodunu görüntüle" yi seçin.

Altta, soldaki "Öğeler" üzerinde vurgulanmış bir sekme ve sağdaki öğeyle ilişkili tüm stiller içeren bir konsolumuz var, burada: Hesaplanan Stiller- bunlar, sekme daraltıldığında, kullanıcının tarayıcısının (ortamının) css kuralları ve ayarlarından bir öğeye atanan genel "özet" stilleridir.

Ancak, bir öğeye atanan tüm stillerin sırayla listelendiği, altında genişletilmiş "Stiller" sekmesi ve bu öğe için bu kuralların türüne, kimliğine, sınıfına, adına göre belirtildiği dosyalarla ilgileniyoruz. , özellik, nitelik, vb. ... Aynı zamanda, css kuralının üstü çizilirse, daha önce / sonra yeniden tanımlanır (bu, hangi css kurallarının önceliğe sahip olduğunu ve bu durumda öğeye uygulandığını izlemeyi kolaylaştırır).

Konsolun altında, belge hiyerarşisindeki bir öğeyi gösteren bir satır bulunur ve kökten seçilen öğeye kadar tüm ana öğelerin listesini kolayca görüntülemenizi sağlar. Ekmek kırıntısı gibi bir şey.

Html etiketi sayfa bağlamında görünmüyor mu? Yoksa tüm etiketleri, örneğin belirli bir sınıfa, isme, özelliğe, türe göre mi bulmanız gerekiyor?

Siteyi Google Chrome'da açın, sağ tıklayın, içerik menüsünü açın, seçin « Sayfa kodunu görüntüle » ... "CTRL + F" tuş bileşimine aynı anda basın, ihtiyacımız olan ifadeyi girin ( Örneğin: sınıf = "dolgu malzemesi ") ve bulunan sonuçlar listesinde gezinin, yol boyunca sayfanın sağ tarafında istenen öğelerle ilişkili tüm stiller arasında gezinin.

Dinamik olarak yüklenen öğelerin html kodu nasıl görüntülenir (örneğin: Ajax tarafından)

Sayfanın Google Chrome'da yüklenmesini bekliyoruz. Ajax'ın çalışması için gerekli işlemleri yapıyoruz. Yüklenen verilere sağ tıklayın, içerik menüsünden "Element kodunu görüntüle"yi seçin, soldaki "Elements" sekmesinde konsolda sonucu inceleyin.

Değişiklik css stillerini gerçek zamanlı olarak görüntüleyin

Bu arada, gerekirse, örneğin galeriyi ve diğer olayları zamanlayıcıya göre kaydırırken, anında bir öğeye hangi stillerin atandığını gözlemlemek de uygundur. Gerçek zamanlı olarak javascript tarafından atanan tüm stiller, özellikte görüntülenecektir. stil"Öğeler" sekmesindeki pencerede seçilen öğe.

CSS kurallarının html etiketlerinin sunumu üzerindeki etkisinin canlı önizlemesi

Google Chrome, css stilleri için etkileşimli bir konsol sağlar. Bu, yalnızca öğeye hangi stillerin uygulandığını görmekle kalmayıp, aynı zamanda özelliklerden belirtilen css üzerinde fare imlecini hareket ettirebileceğiniz, sağdaki açılır onay işaretini kullanarak etkinleştirebileceğiniz veya bayrağın işaretini kaldırarak devre dışı bırakabileceğiniz anlamına gelir. ve elde edilen sonucu sayfada görüntüleme.

Html öğelerinin sunum yapısını anında değiştirme (tarayıcıda sağda)

Bu nedenle, Google Chrome'da bir web belgesinin yapısını nasıl keşfedeceğimizi zaten öğrendik, şimdi anında düzenleme öğelerine kısaca bakacağız. Konsola bizim için uygun olan herhangi bir şekilde gidiyoruz. "Öğeler" sekmesinde istediğiniz öğeyi bulun, üzerine sağ tıklayın, böylece açılır içerik menüsünü çağırın:

• Özellik ekle- belirtilen öğe için bir öznitelik ekler. İmleç aktif olur olmaz istenilen özelliği ayarlamaya başlıyoruz. Örneğin: itemimize hemen eklenecek olan name = "itemImage" yazalım.
• Özelliği düzenle- bir öğenin niteliğine sağ tıklarsanız, öğe kullanılabilir hale gelir Düzenlebağlanmak... Tıklayın, düzenleyin.

Kullanım örneği: Google Chrome'da yıldız işaretleri altına kaydedilen şifreyi unuttuk (şifre bu tarayıcıda kaydedilmişse). Parola ile öğeye sağ tıklayın, "Ürün Kodunu Görüntüle" ye tıklayın , sekmede soldaki konsolda Elementleröznitelik tipine tıklayın = "şifre" sağ fare tuşuyla, sol tuşla Düzenlemekbağlanmak, niteliği değiştirme tip = "parola "üzerinde tip = "Metin ", ve şimdi, yıldızlar yerine aynı parola metin biçiminde görüntüleniyor.

• Düzenlemekhtml- konsoldaki öğeye sağ tıklayın Elementler, Seç Düzenlemekhtml, kodu beğeninize göre değiştirin.
• kopyalaolarakHTML- HTML'nin gerekli bölümünü, örneğin bir not defterinde daha fazla araştırma için veya tam olarak aynı düzeni uygulamamız gereken başka amaçlar için kopyalayın. Zamandan tasarruf ediyoruz.
• kopyalaXPATH- yapının XPATH temsilini üst öğenin kökünden seçilen öğeye kopyalar.
• Silmekdüğüm- geçerli seçili öğeyi ve tüm alt öğelerini web sayfasının bağlamından kaldırmanız ve sonucu görmeniz gerekiyorsa.
• Kelimedürüm- web sayfası görünümünü konsol bağlamında oluşturacak Elementler daha okunabilir.

Sonraki makalelerde, web yöneticisi için araçları incelemeye devam edeceğiz ve özellikle web yöneticisi için araçların geri kalan sekmelerini tanıyacağız. Google Chrome ve ayrıca farklı tarayıcılar kullanarak javascript hatalarında hata ayıklamayı düşünün