Google Chrome'da bir sayfanın kaynak kodu nasıl görüntülenir? Kopyalama yasak olsa bile sayfa kodunu tarayıcıda hızlı bir şekilde açma

Ctrl+U

Bir öğenin kaynak kodu nasıl görüntülenir?

İlgili sayfa öğesinde farenin sağ düğmesine tıklayın.

Google Chrome : "Öğe kodunu görüntüle"

opera: "Öğeyi denetle"

Firefox: “Öğeyi analiz et”

Diğer tarayıcılarda benzer bir menü öğesi arayın.

Herkese selam!

Özellikle makalenin başında, hızlı bir cevap arayanlar için tüm konuyu ortaya koydum.

Bilgi birçok kişi tarafından biliniyor olabilir, ancak acemi blog yazarları, web programcıları ve diğer madenciler için yazdığım için bu yardım makalesi bulunmalıdır.

Gelecekte kesinlikle sayfaların kaynak kodunu ve tek tek öğeleri inceleyeceksiniz.

Sayfa kaynağı görünümünü nasıl kullanabileceğinize dair belirli bir örneğe bakalım.

Örneğin, belirli bir sayfa için hangi anahtar kelimelerin kullanıldığını görmek istiyoruz. İlgilendiğimiz web sayfasına gidiyoruz ve Ctrl + U tuşlarına basıyoruz. Bu sayfanın kaynak kodu ayrı bir pencerede veya ayrı bir sekmede açılacaktır. Ctrl+F'ye basın bir kod parçası aramak için. Bu durumda arama kutusuna “ kelimesini yazıyoruz. anahtar kelimeler". Bu meta etiketi içeren bir kod parçacığına otomatik olarak yönlendirileceksiniz ve aranan kelime vurgulanacaktır.

Benzer şekilde, diğer kod parçacıklarını arayabilir ve inceleyebilirsiniz.

Bir sayfanın kaynak kodunun tamamını görüntülemek çoğu durumda pek uygun değildir, bu nedenle tüm tarayıcılarda tek bir öğenin veya parçanın kodunu görüntülemek mümkündür.

Öğenin kodunu görüntülemek için somut bir örnek kullanalım. Örneğin, bağlantının nofollow özelliğine sahip olup olmadığına bakalım. Bizi ilgilendiren bağlantıya sağ tıklıyoruz ve açılır içerik menüsünde öğeye sol tıklıyoruz "Öğe kodunu görüntüle" veya benzeri (tarayıcınıza bağlı olarak). Aşağıda, kod analizi için özel bir pencerede benzer bir şey elde ediyoruz.

Link kodunda rel=”nofollow” olduğunu görüyoruz. Bu, bu bağlantının "sızmayacağı" ve PR olacağı anlamına gelir. Bundan sonraki yazılarda daha detaylı bahsedeceğiz. Şimdilik önemli olan, artık sayfanın kaynak kodunu ve tek bir öğenin kaynak kodunu nasıl görüntüleyeceğinizi bilmenizdir.

Bu nedenle, bugün bir site düzenlerken hayatı kolaylaştıran Web sihirbazı için birkaç yararlı araca bakacağız. Google Chrome'daki web yöneticisi konsolu ile başlayalım. Ve sitenin düzeni sırasında web yöneticisinden 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 belirli bir öğede Kod Görüntüle öğesini seçerek keşfedilecek".

En üstte listelenen birkaç sekmeye sahip olacaksınız. Bugün "Öğeler" sekmesi hakkında konuşacağız , bir web sayfasının öğelerini vurgulayıcı etiketler, özellikler, öğelerin iç içe yerleşimini vurgulama, DOM ağacındaki öğe hiyerarşisini temsil etme (altta, kök ebeveynden incelenen mevcut olana kadar ipucu), düzenleme yeteneği ile sunan öğeleri, özelliklerinin bir listesini, öğelere göre arama yapmayı düşünün ve ayrıca öğelerle ilişkili css stillerini görüntülemeyi öğrenelim, vb.

Belirli bir öğeyle ilişkili tüm stiller nasıl görüntülenir? Şu anda hangisi kullanılıyor? Hangi dosyalardalar?

Yani, daha kolay bir şey yok! Google Chrome tarayıcısını açıyoruz, soruların kaynağı olan sitemizi açıyoruz, sayfa bağlamında görünüyorsa istenen öğeye sağ tıklayın ve içerik menüsünde "Öğe kodunu görüntüle" öğesini seçiyoruz.

Altta, solda vurgulanmış bir sekme bulunan bir konsolumuz var " Öğeler"Ve sağdaki öğeyle ilişkili tüm stiller, burada: Hesaplanan Stiller- bunlar, öğeye css kurallarından ve kullanıcının tarayıcısının (ortamının) ayarlarından atanan ve aynı zamanda sekme daraltılmış genel "özet" stilleridir.

Ancak, öğeye atanan tüm stilleri ve ayrıca bu kuralların bu öğe için türüne, kimliğine, sınıfına, adına, özelliğine göre belirtildiği dosyaları listeleyen, altında dağıtılan "Stiller" sekmesiyle ilgileniyoruz. nitelik vb. Aynı zamanda, eğer css kuralının üzeri çizilirse, bu daha önce/sonraki olarak yeniden tanımlandığı anlamına gelir (bu, css kurallarından hangisinin öncelikli olduğunu ve bu durumda öğeye uygulandığını izlemeyi kolaylaştırır).

Konsolun altında, öğeyi belge hiyerarşisinde gösteren ve kök öğeden seçilen öğeye kadar tüm üst öğe listesini kolayca görüntülemenize olanak tanıyan bir çizgi bulunur. 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, ada, ö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ğırın, seçin « Sayfa kodunu görüntüle » . "CTRL + F" tuş kombinasyonuna aynı anda basın, ihtiyacımız olan ifadeyi girin ( Örneğin: sınıf="dolgu malzemesi") ve sayfanın sağ tarafında istenen öğelerle ilişkili tüm stillere aynı anda bakarak bulunan sonuçlar listesinde gezinin.

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

Sayfanın Google Chrome'da yüklenmesi bekleniyor. Ajax'ın çalışması için gerekli işlemleri yapıyoruz. İndirdiğimiz datanın üzerine sağ tıklayıp içerik menüsünden "View element code" seçeneğini seçip sol taraftaki "Elements" sekmesinden konsolda sonucu inceliyoruz.

Css stil değişikliklerini gerçek zamanlı olarak görüntüleyin

Bu arada, gerekirse, örneğin galeride ve diğer zamanlayıcı olaylarında gezinirken, bir öğeye hangi stillerin atandığını anında gözlemlemek de uygundur. Javascript aracılığıyla gerçek zamanlı olarak atanan tüm stiller, mülkte görüntülenecektir. stilÖğeler sekmesindeki pencerede seçili öğe.

HTML etiketlerinin sunumunda css kurallarının etkisinin etkileşimli görünümü

Google Chrome, css stilleri için etkileşimli bir konsol sağlar. Bu, yalnızca öğeye hangi stillerin uygulandığını göremeyeceğiniz, aynı zamanda fare imlecini belirli bir css özelliğinin üzerine getirebileceğiniz, sağda açılır bir onay işaretiyle etkinleştirebileceğiniz veya bayrağın işaretini kaldırarak ve görüntüleyerek devre dışı bırakabileceğiniz anlamına gelir. sonuç sayfada.

Html öğelerinin sunum yapısını anında değiştiriyoruz (doğrudan tarayıcıda)

Bu nedenle, Google Chrome'da bir web belgesinin yapısını nasıl keşfedeceğimizi zaten öğrendik, şimdi öğeleri anında düzenlemeye hızlıca bir göz atalım. Bizim için uygun olan herhangi bir şekilde konsola gidiyoruz. İstenilen öğeyi "Öğeler" sekmesinde bulduk, üzerine sağ tıklayın ve böylece açılır içerik menüsünü çağırın:

Öznitelik ekle- Belirtilen öğeye bir öznitelik ekler. İmleç aktif hale gelir gelmez, istenen özelliği ayarlamaya başlarız. Örneğin: Hemen elementimize eklenecek olan name="itemImage" yazalım.
Özniteliği düzenle– bir öğenin niteliğine sağ tıklarsanız, öğe kullanılabilir hale gelir düzenlemekÖznitellikler. Tıklayın, düzenleyin.

Kullanım örneği: Google Chrome'da yıldızların altına kaydedilen şifreyi unuttuk (şifre bu tarayıcıya kaydedildiyse). Parola ile öğeye sağ tıklayın, "Öğe Kodunu Görüntüle" seçeneğine tıklayın , sekmenin sol tarafındaki konsolda Elementler type="password" özelliğine sağ tıklayın, sol tıklayın DüzenlemekÖznitellikler,özniteliği değiştir tip="şifre" Açık tip="metin", ve burada zaten yıldız yerine metin biçiminde aynı şifreye sahibiz.

Düzenlemekhtml- konsoldaki bir öğeye sağ tıklayın Elementler, seçmek Düzenlemekhtml, kodu beğeninize göre değiştirin.
KopyalagibiHTML- daha fazla araştırma yapmak için ihtiyacımız olan HTML bölümünü kopyalayın, örneğin bir not defterine veya tam olarak aynı düzeni uygulamamız gereken başka amaçlar için. Zamandan tasarruf ediyoruz.
KopyalaXPAT– yapının XPATH gösterimini ü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 gerekirse.
Kelimedürüm- web sayfası görünümünü konsol bağlamında işleyecektir Elementler daha okunaklı

İlerleyen yazılarda webmaster araçlarına bakmaya devam edeceğiz ve özellikle diğer webmaster araçları sekmeleri ile tanışmaya devam edeceğiz. Google Chrome ve ayrıca farklı tarayıcılar kullanarak javascript hatalarında hata ayıklamayı düşünün

Başlangıca bakma olasılığı kod ağ sayfalar, sunucuya yapılan bir istek sonucunda tarayıcı tarafından alınan, aslında her İnternet tarayıcısındadır. İlgili komuta erişim yaklaşık olarak aynı şekilde düzenlenmiştir, ancak ilk komutun size hangi yöntemde ve hangi biçimde sunulacağı konusunda önemli farklılıklar vardır. kod .

Talimat

1. Mozilla FireFox tarayıcısında, menüden "Görüntüle" bölümünü genişletin ve "Başlangıç" seçeneğine tıklayın. kod sayfalar". Aynı öğe, metne sağ tıkladığınızda görünen bağlam menüsünde de bulunur. sayfalar. CTRL + U klavye kısayoluna da izin verilir Mozilla FireFox harici programları kullanmaz - ilk kod sayfalar sözdizimi ile vurgulama, ayrı bir tarayıcı penceresinde açılır.

2. Internet Explorer'da, Dosya menüsüne tıklayın ve Not Defteri'nde Düzenle'yi seçin. Notepad adı yerine tarayıcınızın ayarlarında atadığınız başka bir program yazılarak başlangıç sayfası görüntülenebilir. kod A. Tıklamada sayfalar farenin sağ tuşuyla, ilk dosyayı açmanıza izin veren bir öğeye de sahip olan bir bağlam menüsü açılır. kod sayfalar harici bir programda - "HTML'yi Görüntüle- kod A".

3. Opera tarayıcısında menüyü açın, “Sayfa” bölümüne gidin ve muhtemelen “Geliştirme Araçları” alt bölümündeki “İlk” öğesini tercih edeceksiniz. kod” veya “İlk kodçerçeve". Bu seçime sırasıyla CTRL+U ve CTRL+SHIFT+U kısayol tuşları atanır. Tıklamaya eklenmiş bağlam menüsünde sayfalar sağ tıklayın, ayrıca "İlk kod". Opera açık kaynak sayfalar HTML dosyalarını düzenlemek için işletim sisteminde veya tarayıcı ayarlarında atanmış harici bir programda.

4. Google Chrome tarayıcısı, hiç şüphesiz, ilk sayfaya göz atmak için en iyi organizasyona sahiptir. kod A. Bir sayfaya sağ tıklayarak Görünümü tercih edebilirsiniz. kod A sayfalar” ve ardından sözdizimi vurgulamalı kaynak kodu ayrı bir sekmede açılacaktır. Veya aynı menüde "Görüntüle" satırını tercih edebilirsiniz. kod a element" ve aynı sekmedeki tarayıcı, HTML ve CSS'yi inceleyebileceğiniz iki ek çerçeve açacaktır - kod herhangi bir eleman sayfalar. Tarayıcı, imleci satırlar arasında hareket ettirmeye yanıt verir kod ve sayfada HTML'nin bu bölümüne karşılık gelen öğeleri vurgulayarak- kod A.

5. Apple Safari tarayıcısında "Görünüm" bölümünü genişletin ve "HTML'yi Görüntüle" satırını seçin. kod A". Sağ tıkladığınızda açılan menüde sayfalar, ilgili öğe "Kaynağı Görüntüle" olarak adlandırılır. CTRL + ALT + U kısayol tuşları bu eyleme atanmıştır. kod ayrı bir tarayıcı penceresinde açılır.

İnternetteki sayısız siteye baktığınızda çok beğendiklerimizi bulabilirsiniz. Hemen bir takım sorular ortaya çıkıyor. Site kendi yazdığı kod veya bir tür CMS kullanılarak mı yapılmış? CSS stilleri nelerdir? Meta etiketleri nelerdir? Ve benzeri.

Bir sitenin sayfa kodu hakkında bilgi almak için kullanılabilecek birçok araç vardır. Ama elimizde her zaman sağ fare düğmesi var. Sitem örneğini kullanarak kullanacağız.

Sayfa kodu nasıl görüntülenir?

Bir web sitesi sayfasının kaynak kodunu görüntülemek için, fare imlecini web sayfasının herhangi bir alanı üzerine getirmeniz gerekir (resimler ve bağlantılar hariç). Bundan sonra, farenin sağ düğmesine tıklayın. Önümüzde birkaç seçeneğin bulunduğu bir pencere açılacaktır (farklı tarayıcılarda biraz farklılık gösterebilir). Örneğin, Google Chrome tarayıcısında komutlar şunlardır:

geri;
ileri;
Tekrar yükle;
farklı kaydet;
fok;
Rusçaya çevir;
sayfa kodu görünümü;
kodu görüntüle

üzerine tıklamamız gerekiyor sayfa kodu görünümü, ve karşımızda site sayfasının html kodu açılacaktır.

Sayfa kodunu görüntüleme: ne aranmalı?

Yani, Html sayfa kodu, her biri bu sitenin nasıl yapıldığı hakkında bilgi taşıyan, numaralandırılmış bir satır listesidir. Bu çok sayıda işareti ve özel karakteri anlamayı hızlı bir şekilde öğrenmek için, kodun farklı bölümlerini ayırt etmeniz gerekir.

Örneğin, head etiketinin içinde bulunan kod satırları, arama motorları ve web yöneticileri için bilgiler içerir. Sitede görüntülenmiyorlar. Burada, bu sayfanın hangi anahtar kelimeler için tanıtıldığını, başlığının ve açıklamasının nasıl yazıldığını görebilirsiniz. Sitede kullanılan google yazı tipi ailesini öğrendiğimiz linke de buradan ulaşabilirsiniz.

Site CMS WordPress veya Joomla ile yapılmışsa, bu burada da görünür olacaktır. Örneğin, bu alan bir WordPress teması veya Joomla site şablonu hakkında bilgi görüntüler. Mavi renkle vurgulanan bağlantıların içeriğini okuyarak görebilirsiniz. Bir bağlantı, web sitesi şablonunu gösterir.

Örneğin:

//fonts.googleapis.com/css?family=Source+Sans+Pro%3A400%2C400italic%2C600&ver=4.5.3

Sayfanın CSS font stillerini göreceğiz. Bu durumda, yazı tipi kullanılır. Bu burada görülebilir - font-family: 'Source Sans Pro'.

Bu site Yoast SEO eklentisi kullanılarak optimize edilmiştir. Bu, kodun bu yorumlanmış bölümünden görülebilir:

Bu site Yoast SEO eklentisi v3.4.2 ile optimize edilmiştir — https://yoast.com/wordpress/plugins/seo/

Gövde etiketi içindeki tüm bilgiler tarayıcı tarafından monitör ekranında görüntülenir. Burada sayfanın html kodunu görüyoruz ve en altta Yandex Metrics script kodu var. Şu metinle birlikte yorumlanmış bir etikete sarılır:

/Yandex.Metrika sayacı

Özetliyor

Sitenin ana sayfasının kodunun oldukça yüzeysel bir analizini yaptıktan sonra, bu sayfanın hangi araçların yardımıyla yapıldığı sonucuna varabiliriz. üzerinde gördük:

İçerik Yönetim Sistemi;
Google yazı tipi Source Sans Pro;
WordPress teması - Sidney;
Yoast eklentileri
sayaç Yandex metrikleri.

Artık bir site sayfasının html kodunu analiz etme ilkesi oldukça açıktır. İncelenmekte olan sayfanın tarayıcıda açık tutulması gerekli değildir. Sayfa kodunu ctrl + a, ctrl + c, ctrl + v tuş kombinasyonlarını kullanarak bilgisayarınıza kaydedebilirsiniz. Herhangi bir metin düzenleyiciye (tercihen Notepad++) yapıştırın ve html uzantısıyla kaydedin. Böylece, istediğiniz zaman onu daha derinlemesine inceleyebilir ve kendiniz için daha yararlı bilgiler bulabilirsiniz.

Uzun bir süre "sayfa kaynak kodunu göster" seçeneği benim için yararsız ve ilgi çekici değildi. Şimdiye kadar Codecademy'de HTML öğrenmek ve kendi sitelerimi oluşturmak yeni hobim haline gelmedi. Burada şu soru ortaya çıktı: "kumbaranız" için gerçek vakaları nerede bulabilir ve ilginç çözümleri nerede ödünç alabilirsiniz? Cevap şaşırtıcı derecede basitti, tüm dahiler gibi: sayfanın kaynak kodunu Google Chrome'da görüntüleyin! Sizinle mütevazı bulgularımı paylaşıyorum.

sayfa kaynak kodu nedir

Benim gibi HTML programlamada ilk adımlarınızı atıyorsanız, bir sayfanın kaynak kodunun ne olduğunu bilmek gereksiz olmayacaktır.

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

Kaynak Kodunu Google Chrome Tarayıcı Sayfasında Görüntüleme

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

simgeye tıklayın Menü tarayıcının sağ üst köşesinde ve "Diğer Araçlar" öğesini seçin. Diğerlerinin yanı sıra, "Kaynak Kodunu Görüntüle" seçeneği vardır. Açıkçası, bu yöntemi nadiren kullanırım: birçok gereksiz hareket. Daha da kolay hale getirilebilir.
Tuş kombinasyonuna basın Ctrl+U- kaynak koduyla yeni bir pencere açar;
Bağlam menüsü 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örevini üstlendik. En ilginç aşamaya geçiyoruz.

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şiklikler yapmanız ve sonucu kontrol etmeniz gerekiyor. Hatta birkaç başarılı örneği derleyerek başlayabilirsiniz. Kaynak kodu nasıl düzenlenir ve kaydedilir?

Seçenek 1. "Manuel olarak"

Sayfanın kaynak kodunu açtıktan sonra içerik menüsünü çağırıp "Farklı Kaydet" seçeneğini seçip dosyayı hard 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ı (başarılı ve çok iyi değil) 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" süreci yorucudur. Kendim için Google Chrome - Firebug Lite için bir eklenti yükleme şeklinde bir çözüm buldum. Tarayıcı pencerenizden ayrılmadan kaynak kodunu düzenlemenizi ve kaydetmenizi sağlar.