Sayfanın kaynak kodunu nasıl açabilirsiniz. Sayfanın kaynak kodunu ve öğenin kodunu nasıl görüntüleyebilirsiniz?

İlk başta biri bu gerekli araç olmadığı görülecek, ancak tüm HTML site kodunun görünümü, gerekli eşyaların kodunu aramak için mükemmeldir, linkler, etiketler, meta etiketleri, nitelikler ve diğer öğeler olabilir.

Sıcak anahtarların bir kombinasyonu + Arama kutusunu açın, sağda göründüğü krom tarayıcısında:

Şekil 3. Kod Arama Sitesi

Form formunu aramanız istendikten sonra, ekran, aralarında hareket edebileceğiniz okları kullanarak, ekranı ilk bulunan elemana taşınır ve gerekli olanı seçin:

Şekil 4. HTML Site Koduna Göre Ara

Talimat 2: Google Chrome tarayıcısında HTML ve CSS site kodunu görüntüleme ve düzenleme

Şimdi sameya önemli kısımİçinde, HTML ve CSS site kodunu tarayıcıda nasıl düzenleyebileceğinizi göstereceğim. Bundan sonra tarayıcıya değişir.

İşte tarayıcınızda her zaman kullanılabilir bir araçtır, sitenin düzenlenmesini kolaylaştıracağınız diğer komutlarla deneyin.

" Aynı ürün bağlam menüsühangi metne sağ tıkladığında sayfalar. Bir kombinasyon kullanabilirsiniz tuşlar Ctrl + U. Mozilla Firefox. Harici programlar kullanmaz - orijinal kodu sayfalar Sözdizimi vurgulamak, ayrı bir tarayıcı penceresinde açılacaktır.

Gözlemciyede Internet Explorer. Dosya bölümü menüsünü tıklayın ve Not Defteri'nde Düzenle'yi seçin. Not Defteri adını ad yerine, bir diğeri yazılabilir, Kaynağı görüntülemek için tarayıcı ayarlarında atanırsınız. kodufakat. Tıklayın sayfalar Sağ fare düğmesi, içeriği açmanıza izin veren bir öğenin bulunduğu içerik menüsünü düşürür. kodu sayfalar içinde harici program - "HTML'yi görüntüleyin kodufakat".

İÇİNDE tarayıcı Opera. Menüyü açın, "Sayfa" bölümüne gidin ve "Kaynak Geliştirme" alt bölümünü seçme şansınız olacaktır. kodu"Veya nokta" kaynağı kodu Freum. Bu seçim sırasıyla sıcak tuşlar Ctrl + U ve Ctrl + Shift + U atanır. Bağlam menüsünde, tıklamaya bağlı sayfalar Sağ tıklayın, ayrıca bir öğe var "kaynağı kodu" Opera kaynak kodu sayfalar HTML dosyalarını düzenlemek için OS'ye veya tarayıcı ayarlarına atanan harici programda.

Herhangi bir şüphe olmadan Google Chrome tarayıcısı, en iyi görüntüleme kaynağına sahip kodufakat. Sağ tıklayın, "Görünümü kodufakat sayfalar"Ve sonra sözdizimi geri tepme kaynağı ayrı bir sekmeyle açılacaktır. Aynı menü dizesini seçebilir misin? koduve öğesi "ve aynı sekmede, HTML ve CSS'yi inceleyebileceğiniz iki ek çerçeveyi açacaktır. kodu Eleman sayfalar. Tarayıcı, imlecin satırlardaki hareketine cevap verecektir. kodua, HTML'nin bu bölümüne karşılık gelen sayfadaki öğeleri vurgulamak kodufakat.

Bu yüzden bugün, siteyi yatırırken hayatı kolaylaştıran web sihirbazları için çeşitli fonları düşüneceğiz. Google Chrome'daki web ustaları için konsolla başlayalım. Ve site düzeni sırasında en sık web masterından ortaya çıkan sorulara devam edeceğiz.

Konsola girmek için, sitenizi Google Chrome'da açın, Web sayfasındaki herhangi bir yere sağ tıklayın ve "Bağlamsal açılır menüde veya" Sayfa kodunu Görüntüle "seçeneğini seçin. Kod öğesini görüntüleyin. "

Üstte, birkaç sekme listeleneceksiniz. Bugün "unsurlar" sekmesi hakkında konuşacağız , Web sayfasının elemanlarının aydınlatılmış etiketleri, özellikleri, yuvalama elemanlarının seçimi, DOM ağacındaki eleman hiyerarşisinin gösterimi (altta ucu, kök ebeveyninden çalışma altındaki akıma), yeteneği Elementleri düzenle, özelliklerinin listesi, öğeleri olarak aramayı düşünün, öğelerle ilgili CSS stillerini izlemekle birlikte edinileceğiz.

Belirli bir unsurla ilgili tüm stilleri nasıl görüntülemek için? Şimdi hangisi uygulanır? Hangi dosyalar bulunurlar?

Yani, daha kolay bir şey yok! Google Chrome tarayıcınızı açın, sitemizi açın - Soruların kaynağı, sayfanın bağlamında görünürse, sağ fare düğmesiyle istediğiniz öğeye tıklayın ve "Öğe Kodunun Görünümü" Bağlam menüsü.

Aşağıda, soldaki "elementlerin" vurgulanan bir sekmesine sahip bir konsolumuz var ve hepsi sağdaki eleman stilleriyle bağlanmış: Bilgisayarlı stiller. - Bunlar, CSS kuralları ve kullanıcı tarayıcı ayarlarından (çevre ortamı) bir öğeye atanan ortak "özet" stilleridir ve sekme en aza indirilir.

Ancak, maddeye atanan tüm stillerin, ayrıca, bu kuralların bu ürün için tür, kimlik, sınıf, isim, özellik, nitelik vb. . Aynı zamanda, CSS kuralı geçerse, daha önce / daha önce geçersiz kılındığı anlamına gelir (bu, CSS kurallarından hangisinin bir öncelik olduğunu ve bu durumda bu durumda geçerli olduğunu izlemeyi kolaylaştırır).

Konsolun dibinde, elemanı belge hiyerarşisinde gösteren bir dize var, kolayca ana eleman listesinin tüm listesini kökten seçilen öğeye görüntülemenizi sağlar. "Ekmek kırıntıları" gibi bir şey.

HTML etiketi sayfa bağlamında görünmez mi? Veya örneğin belirli bir sınıf, isim, mülk, türünde, örneğin tüm etiketleri bulmanız mı gerekiyor?

Siteyi Google Chrome'da açın, sağ tıklayın, içerik menüsünü arayın, seçin « Sayfa kodunu görüntüle » . "Ctrl + F" klavye tuşuna aynı anda tıklayın, ihtiyacınız olan cümleyi giriyoruz ( Örneğin: sınıf \u003d "dolgu malzemesi ") Ve aynı zamanda sayfanın sağ tarafındaki gerekli elemanlarla ilişkili tüm stillere bakarak bulunan sonuçların listesine gidiyoruz.

Nasıl dinamik olarak yüklenen elemanın (elemanların) HTML kodunu nasıl görüntüleyebilirsiniz (örneğin: Ajax tarafından)

Google Chrome'daki sayfa indirmelerini bekliyoruz. AJAX'in çalışması için gerekli eylemleri gerçekleştiriyoruz. İndirilen verilere sağ tıklayın, içerik menüsündeki "Öğe Kodunu Görüntüle" seçeneğini seçin, sonucu soldaki öğeler sekmesindeki konsolda araştırıyoruz.

CSS tarzı değişiklikleri gerçek zamanlı olarak görüntüle

Bu arada, gerekirse gözlemlemek de uygundur: örneğin galerileri ve diğer zamanlayıcı olaylarını kaydırırken, RAID'nin bir elemanına hangi stiller atanır? JavaScript aracılığıyla atanan tüm gerçek zamanlı stiller tesiste görüntülenecektir. stil. "Elements" sekmesindeki penceredeki seçilen öğe.

CSS kurallarının HTML etiketi temsilindeki etkisinin etkileşimli görüntülemesi

Google Chrome, CSS stilleri için etkileşimli bir konsol sağlar. Ve bu, yalnızca hangi stillerin öğe için geçerli olduğunu, ancak fare imlecini belirli bir CSS özelliklerine getirebileceği anlamına gelir, açılır kene kullanarak açılır ve bayrağı kaldırarak devre dışı bırakın. Sonuçtaki sonucu sayfada görüntüleme.

RAID'in HTML öğelerinin başvuru yapısını değiştirin (tarayıcıda sağ)

Böylece, web belgesinin yapısını Google Chrome'da keşfetmek için, daha önce öğrendik, şimdi RAID'in unsurlarını kısaca düzenlemeyi düşünün. Bizim için uygun herhangi bir şekilde konsola gidin. İstediğiniz öğeyi "Elements" sekmesinde buluruz, sağ fare düğmesiyle üzerine tıklayın, böylece açılır bağlam menüsünü arar:

• Öznitelik ekle. - Belirtilen öğe için bir özellik ekler. İmleç aktif olur olmaz, istenen özelliği belirlemeye başlayın. Örneğin: Elemanımıza hemen eklenecek olan isim \u003d "itemimage" yazın.
• Niteliği düzenle. - Maddeye sağ tıklama özniteliğini tıklarsanız, kullanılabilir olur. düzenle.öznitelik.. Tıklayın, Düzenleyin.

Kullanım Örneği:google Chrome'daki asteristerlerin altında depolanan şifreyi unuttuk (eğer parola bu tarayıcıya kaydedilirse). Parola girişi ile öğeye sağ tıklayın, "Görüntüle Öğe kodu» , SEG'deki soldaki konsolda ElementlerÖznitelik türüne tıklayın \u003d "şifre" sağ tıklayın, fareye sol tıklayın Düzenle.Öznitelik,Özniteliği değiştiririz type \u003d "pAROLA " üzerinde type \u003d "metin "Ve burada zaten yıldızlar yerine metin biçiminde en fazla şifreye sahibiz.

• Düzenle.html - Konsoldaki öğeye sağ tıklayın. Elementler, Seç Düzenle.html,kodu beğeninize göre değiştirin.
• KopyagibiHTML. - İhtiyacınız olan HTML bölümünü daha fazla araştırma için, dizüstü bilgisayarda veya başka amaçlar için, tam olarak aynı düzen uygulamamız gerekenler için kopyalayın. Zaman kazanıyoruz.
• KopyaXPath. - Yapının XPath'ı ebeveyn elemanının kökünden özel öğeye kopyalar.
• Silmek.düğüm. - Geçerli özel öğeyi ve tüm bağlı ortaklıklarını bağlamdan çıkarmanız gerekirse İnternet sayfalarıve sonucu gör.
• Kelime.paketlemek. - Konsol bağlamında bir web sayfası görünümü yapın Elementler daha okunaklı.

Aşağıdaki makalelerde, bir web ustası için fonların dikkate alınacağını ve özellikle de Web Master için diğer araçların diğer sekmeleri ile tanışacağız. Google Chrome.Ayrıca, JavaScript Hataları Araçlarını Farklı Tarayıcılardan Hata Ayıklamayı Durumlandırın

Her İnternet kullanıcısının, uzun süre geçirdiği favori sitelerine sahiptir. Ve sadece tembel nasıl oluşturulduğunu ve ne olduğunu görmeyi düşünmedi. Cevap Tüm bu sorular çalışmayacak, çünkü bir site oluşturmanın birçok yolu olduğu gibi, bu ekipleri ve bunların oluştuğu ekipleri ve kodları görmek için - herkes tarafından mümkün ve erişilebilir.

Başka bir soru, bir kişinin kodu oluşturan karakterlerden bir şeyin programlanmasında kiminle meşgul olmadığını anlamayacağıdır. Ancak, Google Chrome kullanıcısının altına gizlenecek olan örneklerden, sitelerin bireysel unsurlarını görebilecektir.

Google'dan Tarayıcıdaki HTML Sayfalarının Kaynak Kodunu Nasıl Görünür

Chrome'daki sayfa kodunu görebileceğiniz şey, ilgilendiğiniz siteye gitmeli ve aşağıdaki işlemleri gerçekleştirmelidir:

Bu maddelerden ikisi, kullanıcı, programcı veya hacker hakkındaki işlevsellik ve bilgileriyle kendileri aralarında farklılık göstermektedir.

Sayfa kodu ile sadece "Kodu Görüntüle" komutu arasındaki fark nedir?

Bu fonksiyonların her birini görüntüleme ayrı bir öğe yazılabilir. Programcılar için, bu fark önemlidir ve "View Code" nin kullanılması gerektiğinde ve hangi durumlarda "Sayfa Görünümü" nin içinde kullanılmasının gerekli olduğunu anlar. google tarayıcısı Krom.

Ancak normal kullanıcıları açıklamak, aşağıdaki amaçlarla bu işlevleri bölersiniz:

1. "Sayfa kodunu görüntüleyin" sadece sayfanın ana kombinasyonunu görmek için gereklidir. Temel olarak, bu, sitenin yapısıdır (CSS dosyaları formunda ek modeller olmadan ve Site Oluşturucu klasöründe kalan diğer uyarılar). Bu yapı Oluşturma için uygun değil kendi sayfası "Kopyalama - Ekleme" ile, ancak programcının ne yaptığını ve Google Chrome tarayıcısındaki sitenin böyle bir harici tasarıma sahip olması için hangi sırayla yaptığını görmenize izin verir.
2. "Kodu Görüntüle", sayfadan etkilenen tüm alanları tahsis eden ayrıntılı bir yapıyı görüntüler. Belirli bir liste kodunu getirirseniz - sitede ait olduğu bir öğeyi tahsis eder.
3. Sayfa kodunu görüntüleme, düzenleme yeteneği olmadan ayrı bir tarayıcıda açılır. Yani, yalnızca site kodunu kopyalamak ve okumak için uygundur. Ancak bu daha az faydalı bir özellik değil.
4. "Kodu Görüntüle" değiştirin ve herhangi bir öğeyi sizin için uygun olacak şekilde düzenleyebilirsiniz. Tabii ki - bu tüm değişiklikler, sayfa güncellenene kadar "canlı" olacaktır, ancak bazen ayarlara tırmanmak eğlencelidir ve neden gerekli olduğunu ve değiştirilirse ne olacağını basitçe anlayacaktır. Bu tür eylemlerin kendinize veya siteyi incittiğini varsaymamalısınız - bu değişiklikler yalnızca Google Chrome'unuzun kodunda geçerlidir ve çevrimiçi olmaz.

Öğenin kodunu nasıl göreceğin sorusunu düşünün

Eğer böyle bir soruyu gerçekten cevaplarsanız, yalnızca örnek olarak bir seçenek. Çünkü bir makalenin bu konuyu (Web geliştiricisi) anlayabilecek bir kişi olmak için (Web Geliştirici) çok zordur, ancak tükenmenin örneğini göstermek için - çok daha kolay hale getirmek için.

Eleman kodunun işlevselliği çok geniştir, bu nedenle Google Chrome tarayıcı sitesindeki kelimelerden birini alırız. Hangi şeyi düşünmek istedik anahtar kelimeler (Kodda, sitemiz için "anahtar kelime" olarak kaydedilecektir. Bunu yapmak için aşağıdaki algoritmayı yapın:

Bu işlevi Google Chrome tarayıcısında kullanmanın başka yolları

Genel olarak, öğenin kodunu nasıl görüleceği ve neden gerektiğine ilişkin sorusuna cevap vermeye devam etmek, işlevlerine aktarılmalıdır. Yani, herhangi bir sitenin kodunu Google Chrome tarayıcısındaki kodunu görme yeteneği sayesinde şunları yapabiliriz:

• Baştan ("Site Kapağı") ve bitiş ucu (herhangi bir programın son komutu) tarafından başlayan sitenin yapısına bakın;
• Tüm site fonksiyonlarını görüntüleyin, yani: diğer sitelere bağlantılar, dış sitelerden ek modüller ve farklı bilgileri toplamak için yerleşik metre varlığı;
• Siteden kopyalamanın yasak olup olmadığını öğrenin;
• Kodda, diğer site sayfalarına olan tüm bağlantıların yanı sıra onlara tıkladıktan sonra tasarımları ve sonraki eylemleri kaydedilecektir.

Bu sınırlı bir liste değil. Ancak özel bir bilgi olmadan - "okuma" kodunu hatırlatılmalıdır. google sayfaları Krom neredeyse imkansızdır ve elde edilen veriler pratik olarak normal kullanıcı tarafından gerekli değildir.

Öğe "Öğe Kodunu Görüntüle" çalışmıyor

Derhal söylemeliyim - her site birlikte olacak açık Erişim Öğelerin kodlarına. Yani, en popüler ve pahalı siteler bile kodlarını görüntülemek için açık olacaktır. Bu nedenle, Google Chrome tarayıcısındaki öğenin aktif olmadığı veya bir hata verilmesi durumunda, aşağıdaki olası nedenlere sahiptir:

• Kullanıcı profili hasar gördü;
• Bilgisayarda kötü amaçlı yazılımların varlığı;
• Verimliliği artırmak için belirli bir uzantı ile engelleme (bu bile olabilir).

Hasar görmüş kullanıcı profilini düzeltin

Yaratmak yeni profilEski olanı bilgisayarınızdan kaldırmalısınız. Bunu yapmak için aşağıdakileri yapın:

1. Google Chrome'u kapatın ve yerleşikleri başlatın tarayıcı pencereleri Explorer.
2. Adres çubuğuna aşağıdaki komutu giriyoruz:% localAppData% \\ Google \\ chrome \\ kullanıcı verileri \\.
3. Dizin açıldığında, "Varsayılan" klasörünü arıyoruz ve "yedekleme" adına ekledik, böylece aşağıdakiler şunlardır. "Yedekleme Varsayılan".
4. Şimdi tarayıcı kromunun yeni başlatılmasından sonra, yeni bir profil oluşturulacak.

Kötü amaçlı yazılımı veya kalıntılarını çıkarın

Yeni bir profil, sayfa öğesinin sayfasına erişmedi ve hatayı hala görüyoruz, aşağıdaki adımları izleriz:

1. Açık komut satırı Windows ("koşu") ve orada "cmd" komutunu girin.
2. Satırdaki aşağıdaki komutu girin: RD / S / Q "% windir% \\ System32 \\ GroupPolicyUsers".
3. Eylemi onayladıktan sonra, şunu sürün: rd / s / q "% windir% \\ System32 \\ Grouppolicy".
4. Şimdi "gpupdate / kuvvet" (sürahi olmadan).

Her şey doğru yapıldıysa, o zaman yeniden başlatıldıktan sonra google bilgisayar Chrome, öğelerin kodunu açacak ve tarayıcının çalışma kapasitesi normalde olacaktır.