Google chrome'da sayfa kodu nasıl açılır. Kopyalama yasak olsa bile, bir tarayıcıda sayfa kodu nasıl hızlı bir şekilde açılır?

Ctrl + U

Bir öğenin kaynak kodunu nasıl görebilirim?

Sayfadaki ilgilenilen öğeye sağ tıklayın.

Google Chrome: "Ürün kodunu görüntüle"

Opera: "Elemanı Denetle"

FireFox: "Analiz Elemanı"

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

Herkese merhaba!

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

Bilgi birçok kişi tarafından biliniyor olabilir, ancak acemi blogcular, web programcıları ve diğer araştırmacılar için yazdığım için bu yardım makalesi mevcut olmalıdır.

Gelecekte, sayfaların ve bireysel öğelerin kaynak kodunu kesinlikle inceleyeceksiniz.

Sayfa kaynak görünümünü nasıl kullanabileceğinize dair somut 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ı bulmak için. Bu durumda, arama kutusuna “ kelimesini yazıyoruz. anahtar kelimeler”. Bu meta etiketle otomatik olarak kod parçacığına yönlendirileceksiniz ve arama kelimesi vurgulanacaktır.

Benzetme yoluyla, diğer kod parçalarını arayabilir ve inceleyebilirsiniz.

Bir sayfanın kaynak kodunun tamamını görüntülemek çoğu durumda çok 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.

Bir öğenin kodunu görüntülemek için belirli bir örnek kullanalım. Örneğin, bağlantının nofollow özelliği olup olmadığını görelim. İlgilendiğimiz bağlantıya sağ tıklayın ve açılır içerik menüsünde öğeye sol tıklayın "Ürün 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 alıyoruz.

Bağlantı kodunda rel = "nofollow" olduğunu görebiliriz. Bu, bu bağlantının "sızdırmayacağı" ve PR anlamına gelir. Aşağıdaki makalelerde bundan daha ayrıntılı olarak bahsedeceğiz. Şimdi önemli olan, artık sayfanın kaynak kodunu ve tek bir öğenin kaynak kodunu nasıl görüntüleyeceğinizi bilmenizdir.

Tarayıcı geliştiricileri, aynı tarayıcılarda açılan siteler oluşturanların, yani web yöneticilerinin rahatlığını üstlenmiştir. Standart işlevlere, kolayca açıp açabileceğiniz geliştirici araçları eklediler. tarayıcıda site sayfasının kaynak kodunu görüntüleyin: HTML, CSS, JavaScript (JS), sitenin yapısı hakkında çeşitli faydalı veriler elde eder, teknik analizini yapar. Genel olarak, birçok yararlı şey görmek için.

Tabii ki, bu araçlar sadece site yaratıcıları tarafından iş için değil, aynı zamanda kaynak koduyla çeşitli faydalı verileri görebilen sıradan kullanıcılar tarafından da kullanılır.

Bu makalede, bir site sayfasının kaynak kodunu bir tarayıcıda nasıl görüntüleyeceğinizi öğreneceksiniz (HTML, CSS, JavaScript site kodu nasıl açılır).

Bir tarayıcıda bir sayfanın kaynak kodu nasıl açılır

Bir web sayfasının kaynak kodunu tarayıcıda açmanın iki yolu vardır:

1. Kısayol tuşlarını kullanma;
2. Bağlam menüsünden açın.

Ctrl + U- sitenin tüm sayfasının kaynak kodunu ayrı bir yeni pencerede görüntülemek için bir kısayol tuşları kombinasyonu. Tüm tarayıcılar için standart: Google Chrome, Opera, Mozilla Firefox, Yandex tarayıcı, IE.

Geliştirici araçlarına aşağıdaki gibi de girebilirsiniz:

Sayfada gerekli kodu, kelimeyi veya metni hızlı bir şekilde bulmak için, tüm tarayıcılar için arama kısayol tuşu kombinasyonu standardını kullanabilirsiniz: Ctrl + G.

Video talimatı:

Ürün kodunu görüntüle | öğeyi keşfet | bir öğeyi incelemek

Birdenbire kaynak kodunun tamamını değil, yalnızca ayrı bir bölümünü, sayfanın bir bölümünü görüntülemeniz gerekiyorsa, önceki araç çalışmaz. Bunu yapmak için, geliştirici araçlarında aşağıda tartışılacak olan başka bir işlev vardır.

Bir sayfadaki bir öğenin kodu nasıl görüntülenir:

Ayrıca, öğe incelemesine hızlı bir şekilde erişmek için klavye kısayollarını kullanabilirsiniz.

Kısayol tuşları (düğmeler):

Google Chrome: Ctrl + Shift + I ve Ctrl + Shift + C

Opera: Ctrl + Shift + I ve Ctrl + Shift + C

Mozilla Firefox: Ctrl + Shift + I ve Ctrl + Shift + C

Yandex tarayıcısı: Ctrl + Shift + I ve Ctrl + Shift + C

Yapılan işlemlerden sonra aynı tarayıcı penceresinde web sayfasının kaynak kodu açılacaktır:

Tüm HTML kodu sol büyük sütunda olacaktır. Ve CSS stilleri sağda.

Bu yöntemin avantajı elbette kullanıcının kaynak kodunu değiştirme, stilleri düzenleme imkanına sahip olmasıdır. Yani hosting sunucularında bulunan dosyalarda hemen değişiklik yapmanıza gerek kalmadan sitedeki stilleri düzenleyebilir ve belirli stiller ile nasıl görüneceğini görebilirsiniz. Program kodunu değiştirmek veya eklemek için istediğiniz parçaya veya alana çift tıklamanız gerekir. Tabii ki, tarayıcı kodu düzeltmesi, barındırma sunucularına uygulanmayacaktır. Bu nedenle, gelecekte, her durumda, bu kodu kopyalayıp dosyalara yazmanız gerekecektir.

Bu eğitici video, geliştirici araçlarıyla nasıl çalışacağınızı ayrıntılarıyla gösterir ve gösterir:

Aynen öyle, çevrimiçi olarak, doğrudan tarayıcıda, bu sitenin dosyalarını bilgisayarınıza indirmenize gerek kalmadan, site sayfasının kaynak kodunu görüntüleyebilir, HTML ve CSS kodu hakkında temel verileri alabilir, değiştirebilir ve kopyalayabilirsiniz.

Bu arada, sayfa kodunu değiştiren ve kaydedilmesini bekleyen deneyimsiz İnternet kullanıcıları hayal kırıklığına uğrayacaktır. Sonuçta, sayfayı yeniledikten sonra üzerindeki tüm değişiklikler kaybolacaktır. Bu siteyi hacklemek için yeterli değil 🙂

Bir Android telefonda kaynak kodu nasıl görüntülenir?

Geliştirici araçlarının yalnızca tarayıcıların masaüstü sürümlerinde değil, yani bilgisayarlarda ve dizüstü bilgisayarlarda mevcut olduğunu da belirtmek isterim. Telefonlarda ve tabletlerde (Android, IOS) kaynak kodunu da görüntüleyebilirsiniz.

Bunu yapmak için, incelenen sayfanın URL'sine görünüm kaynağı önekini ekleyin:

Örneğin:

görünüm kaynağı: https: // site / turbo-rezhim-opera /

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 Kod öğesini Görüntüle'yi seçerek keşfetmek için belirli bir öğeyi seçin.

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 geçerli keşfedilen öğ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 istediğiniz öğeye sağ tıklayın ve içerik menüsünden "Öğe kodunu görüntüle" öğesini 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ü, kimliği, sınıfı, adı ile 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çili öğ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 bir öğenin/elemanların 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 "Elementler" 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 kutusunu 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ştir 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- daha fazla araştırma yapmak için ihtiyaç duyduğumuz HTML bölümünü, örneğin bir not defterine veya tam olarak aynı düzeni uygulamamız gereken başka amaçlar için kopyalarız. 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

İnternetteki sayısız siteye göz atarak, gerçekten sevdiğimiz bazılarını bulabilirsiniz. Hemen bir takım sorular ortaya çıkıyor. Site, kendi kendine yazılan kod veya bazı CMS kullanılarak mı yapılmış? CSS stilleri nelerdir? Meta etiketleri nelerdir? Vesaire.

Bir site sayfasının kodu hakkında bilgi almak için kullanılabilecek birçok araç vardır. Ancak sağ fare düğmesi her zaman elimizin altında. Sitemin örneğinde kullanacağız.

Sayfa kodunu nasıl görüntüleyebilirim?

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

• geri;
• ileri;
• yeniden başlat;
• farklı kaydet;
• fok;
• Rusçaya çevir;
• sayfa kodu görünümü;
• kodu görüntüleyin.

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

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

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

Örneğin, head etiketinin içindeki 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 kelimelerle tanıtıldığını, başlığının ve açıklamasının nasıl yazıldığını görebilirsiniz. Ayrıca burada, sitede kullanılan google font ailesini öğrendiğimiz linke tıklayarak ulaşabilirsiniz.

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

Örneğin:

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

Sayfa yazı tipleri için CSS stillerini göreceğiz. Bu durumda, yazı tipi kullanılır. Burada görebilirsiniz - yazı tipi ailesi: 'Source Sans Pro'.

Bu site Yoast SEO seo eklentisi kullanılarak optimize edilmiştir. Bu, yorumlanmış bu kod parçasından 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 metrik komut dosyasının 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çlarla yapıldığı sonucuna varabiliriz. Üzerinde gördük:

• CMS WordPress'i;
• Google yazı tipi Kaynak Sans Pro
• WordPress teması - Sidney;
• Yoast eklentileri;
• Yandex metrik sayacı.

Artık bir web sitesi sayfasının html kodunu analiz etme ilkesi oldukça açıktır. Keşfedilen sayfayı tarayıcıda açık tutmak hiç de 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 daha derine inebilir ve kendiniz için daha yararlı bilgiler bulabilirsiniz.

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 sitelerimi kodlamak yeni hobim haline geldi. 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, bizim için, acemi programcılar, 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ıp "Farklı Kaydet" seçeneğini seçip 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.