Bir web sayfasının kaynak html kodu nasıl açılır. Google Chrome'da sayfa kodu nasıl değiştirilir?

Beceri sayfa kaynak kodunu değiştir- ileri düzey bir İnternet kullanıcısı için faydalı bir beceri. HTML kod değiştirme yardımı ile açık olan web sayfasını istediğiniz gibi değiştirebilirsiniz. Bu yazıda 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 herhangi bir zorluk olmamalıdır.

Bir sayfanın HTML kodu nedir?

Tarayıcınızda açtığınız her sayfanın HTML biçimlendirme dilinde kendi kodu 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 bir tür etikettir. 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. İle site 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ü alabilirsiniz. Lütfen tüm değişikliklerin yalnızca sizin tarafınızdan görülebileceğini ve sayfayı yeniden yüklediğinizde kaybolacağını unutmayın. Ayrıca değiştirilen veriler gerçek olmayacaktır. Örneğin, 10 dolarım yoksa ve onu 100 dolara değiştirirsem, daha fazla param olmayacak. Bu sadece sayfanın tarayıcı tarafından oluşturulmasıdır. Örnek:

Sonrasında:

Örneğin aynı siteyi alıp daha önceki “” yazısının duyurusunu değiştireceğim Google Chrome'da ana sayfayı açıyorum. Değiştirmek istediğim öğeye, örneğin duyuru başlığına sağ tıklıyorum ve “Kodu Görüntüle” seçeneğini seçiyorum.

Açılan pencerede Elements sekmesine gidin ve sayfanın HTML kodunu görün. İlgilendiğimiz metni bulmamız gerekiyor. (kırmızı ile vurgulanmıştır)

Şimdi eski metni silip yenisini gireceğim.

İşte bu, duyurunun adı değiştirildi. Şimdi duyurunun kendisini, etiketleri ve kategorisini değiştireceğim.

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

Bu nedenle bugün, bir siteyi düzenlerken hayatı kolaylaştıran Web sihirbazı 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ö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 "Kodu Görüntüle"yi seçerek keşfetmek için belirli bir öğeyi seçin. . öğe".

En üstte listelenen birkaç sekmeniz olacak. Bugün "Elementler" sekmesi hakkında konuşacağız , bir web sayfasının öğelerini, etiketlerin vurgulanması, özellikler, öğelerin iç içe yerleştirilmesi, DOM ağacında öğe hiyerarşisinin temsili (altta, kök ebeveynden incelenmekte olan ana öğeye kadar ipucu) ile birlikte sunan, düzenleme yeteneği öğeleri, özelliklerinin bir listesi, öğ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? Hangisi şu anda kullanılıyor? Hangi dosyalardalar?

Yani, daha kolay bir şey yok! Google Chrome tarayıcısını açıyoruz, sitemizi açıyoruz - soruların kaynağı, 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çin.

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

Ancak, sırayla öğeye atanan tüm stilleri listeleyen ve bunun yanı sıra bu öğe için bu kuralların türü, kimliği, sınıfı, adı, özelliği, nitelik vb. Aynı zamanda, eğer css kuralının üstü çizilirse, önceki/sonraki olarak yeniden tanımlanmıştır (bu, hangi css kurallarının ö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ökten seçilen öğeye kadar tüm ana öğelerin listesini kolayca görüntülemenizi sağlayan bir satır bulunur. Ekmek kırıntıları 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ü arayı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, aynı anda sayfanın sağ tarafında istenen öğelerle ilişkili tüm stiller arasında gezinin.

Dinamik olarak yüklenen öğenin (elemanların) 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. İndirilen verilere sağ tıklıyoruz, içerik menüsünden "Element kodunu görüntüle" yi seçiyoruz, soldaki "Elementler" sekmesinde konsolda sonucu inceliyoruz.

CSS stili 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, anında bir öğeye hangi stillerin atandığını gözlemlemek de uygundur. Javascript ile gerçek zamanlı olarak atanan tüm stiller, özellikte görüntülenecektir. stilÖğeler sekmesindeki pencerede seçili öğe.

CSS kurallarının html etiketlerinin sunumu üzerindeki etkisinin etkileşimli görünümü

Google Chrome, css stilleri için etkileşimli bir konsol sağlar. Ve bu, yalnızca öğeye hangi stillerin uygulandığını görmekle kalmayıp, aynı zamanda fare imlecini belirli bir css özelliği üzerinde hareket ettirebileceğiniz, sağda bir açılır 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. sayfada çıkan sonuç.

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

Google Chrome'da bir web belgesinin yapısını nasıl keşfedeceğimizi zaten öğrendik, şimdi düzenleme öğelerine anında göz atalım. Konsola bizim için uygun olan herhangi bir şekilde gidiyoruz. İstenen öğeyi “Öğeler” sekmesinde buluyoruz, üzerine sağ tıklayın, böylece açılır içerik menüsünü çağırıyoruz:

• Özellik ekle- Belirtilen öğeye bir öznitelik ekler. İmleç aktif olur olmaz istenilen özelliği ayarlamaya başlıyoruz. Örneğin: Hemen elementimize eklenecek olan name="itemImage" yazalım.
• Özelliği düzenle– bir öğenin niteliğine sağ tıklarsanız, öğe kullanılabilir hale gelir DüzenleÖ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ıda kayıtlıysa). Parola ile öğeye sağ tıklayın, "Eleman Kodunu Görüntüle" ye tıklayın , sekmenin sol tarafındaki konsolda Elementler type="password" niteliğine sağ tıklayın, üzerine sol tıklayın DüzenlemekÖznitellikler, niteliği değiştir tür="şifre"üzerinde tür="Metin", ve burada zaten aynı parolaya yıldız yerine metin biçiminde sahibiz.

• Düzenlemekhtml- konsoldaki bir öğeye sağ tıklayın Elementler, Seç Düzenlemekhtml, kodu beğeninize göre değiştirin.
• kopyalaolarakHTML- HTML'nin daha fazla araştırma için ihtiyaç duyduğumuz kısmını örneğin bir not defterine 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.
• Kelimepaketlemek- web sayfası görünümünü konsol bağlamında oluşturacak Elementler daha okunabilir.

Aşağıdaki makalelerde, web yöneticisi araçlarına bakmaya devam edeceğiz ve özellikle aşağıdaki web yöneticisi araçları sekmelerinin geri kalanıyla tanışacağız. Google Chrome ve ayrıca farklı tarayıcılar kullanarak javascript hatalarında hata ayıklamayı düşünün

Blog veya gönderi başlığı, daha fazla etiketi ve benzeri gibi bazı önemli blog öğelerinin boyutu, rengi. Makalenin daha sonra yazıldığı test alanını deneyerek gerekli kodu manuel olarak aradım.

Ve son zamanlarda bağlantıların rengini değiştirmek aldı. Bu konuyla ilgili bir sürü literatür taraması yaptıktan sonra basit bir şey fark ettim: herkes kendi şablonlarından örnekler veriyor, ancak hepimizin şablonları farklı ve örnekteki kodun en azından biraz benzer olması iyi: sızlanma değil, bu yüzden Yine de yuvarlayarak bulacağım - dürtme yöntemini kullanarak.

Numara, bağlantı koduyla birlikte geçmedi. Hepsi tamamen farklı yolları işaret etti. Basit ve hassas bir alet olup olmadığını merak ettim. Herhangi bir sitede doğru html kodu nasıl bulunur. Birçok blogcu, deneyimli bile olsa, şablonu biraz değiştirmeyi zor buluyor. Endişelenecek bir şey yok çünkü herkesin bir site oluşturmak için kendi ilgi alanları ve hedefleri var.

Şablonda küçük değişiklikler yapmak istiyorsanız, herhangi bir başlığı, makale ve başlıkların başlığını, yazı tipi ve bağlantıların rengini ve boyutunu değiştirmek, Bu makalede tartışılan basit bir ilkeyi öğrenmek genellikle yeterlidir. Ancak, daha derin bir html ve css çalışmasını veya bir uzmanın yardımını gerektiren karmaşık durumlar da vardır.

Bir gün bir arkadaşım şablonundaki başlıklar panelinin rengini nerede değiştireceğimi bulmamı istedi. Bir test alt etki alanına bir tema yüklendi. Bu öğenin ayarları style.css'de değil, başka bir dosyada saklandı, bu yüzden bir kişi onu bulamadı.

Sitenin html ve css kodu nasıl bulunur ve değiştirilir

Uzun yazılardan hoşlanmıyorsanız bu yazı tam size göre. makalenin sonunda Notepad ++ kullanarak sitenin html kodunu nasıl görebileceğinizi ve yazı tipi renginin nasıl değiştirileceğine ilişkin bir örnek kullanarak herhangi bir şablonun tasarımında nasıl değişiklik yapabileceğinizi gösteren bir video eğitimi. Videoda blogla uğraşmanın başka incelikleri de var. Ve metne daha yakın ve daha anlaşılır olanlar için, konunun ekran görüntüleri ile ayrıntılı bir analizi aşağıdadır.
httpv://youtu.be/uIlVvwCt2ho

Terimler ve kavramlar

Yazının başlığını koymak daha doğru olur" css kodu nasıl bulunur“, ancak “yanlış” isimde durmaya karar verdim, çünkü temelde bu sorunun cevabı html'de aranıyor. CSS ve HTML, aynı sistemin iki parçası olmalarına rağmen çok farklı şeylerdir. İnternette birçok teknik makale var, burada şunu anlamamız yeterli olacaktır:

• HTML- sitenin yapısından sorumlu (neden sonra, hangi sırayla, vb.). Bu, sitenin üzerine inşa edildiği temeldir. Bir evle karşılaştırırsak, bu onun düzeni, odaların düzenidir.
• css- tasarımdan sorumlu (hangi yazı tipi, boyut, renk vb.). Bu, evin genel tarzı ve bireysel odalarının tarzıdır: duvar kağıdı ne olacak, lambalar, perdeler, mobilyalar. Bu nedenle, öngören belge, css kodları"stil sayfası" olarak adlandırılan

Ve örneğin, site başlığının rengini, metinlerdeki yazı tipi boyutunu veya kenar çubuğundaki başlıkların rengini nasıl değiştireceğinizi merak ettiyseniz, tüm bunları CSS stil sayfasında aramanız gerekir. Kodda kendiniz değişiklik yapmak için bir başlangıç ​​için anlamaya değer tek şey budur.

Karmaşıkları basite dönüştürmeyi severim. Uzun zaman önce, ilk arabamı aldığımda, çok eski olduğunu, kabloların çürüdüğünü, sigortaların sık sık yandığını ve yedekte servis istasyonuna her çektiğimde hatırlıyorum. Görünüşe göre bağımsız bir değiştirmenin bir kuruşa mal olmasına rağmen, ne kadar paranın atıldığını hayal edin.

Bir keresinde ustanın tam olarak ne yaptığına baktım. Sigortanın nasıl çalıştığını hala bilmiyorum. Ama nerede değiştireceğimi biliyorum). Motoru kendim tamir etmem ve sigortayı değiştirmek zor değil. Web sitelerinde de durum aynı.

Bir programcı olmak istemiyorsanız, programlamayı derinlemesine anlamanıza gerek yoktur. Neyin amaçlandığını, nerede aranacağını ve nasıl değiştirileceğini açıkça anlamak yeterlidir. Kendiniz yapabileceklerinizi değiştirmek ve diğer her şeyi uzmanlara bırakmak daha iyidir. Hakkında makalenin bu konuyla ilgili yararlı bir bağlantısı var.

Her konuda uzman olmak zorunda mısınız?

Seo bloglarında, genellikle yeni başlayan birinin html'yi derinlemesine anlaması veya daha da iyisi, her şeyin benzersiz olması için siteleri kendi başlarına nasıl yazacağını öğrenmesi gerekip gerekmediği konusunda tartışmalar vardır. ve burada biri daha yakın. Biraz daha ilgileniyorum, bu yüzden şimdi ayrıca Vladimir ile çalışıyorum. Bu yılın Kasım ayında Vladimir kendi blogunu açtı. Blogu en basit, ücretsiz şablonda yapıldı, kendisi için sadece biraz değiştirdi.

10 günlük varlığın ardından blog, günde yaklaşık 1,5 bin kişi trafiği olan tüm Runet siteleri sıralamasında 104. sırada yer aldı. 10 gün için. Anlaşma nedir? Vladimir, html konusunda bilgilidir, kendisi için benzersiz bir şablon sipariş edebilir ve satın alabilir. İşte bunu anlamalısın sır kalıplarda değil, bilginin kullanışlılığındadır.

Html kodu nerede saklanıyor?

Ara verdiğimiz için özür dilerim, hadi kodlarımıza geri dönelim). Diyelim ki blog başlığının yazı tipi rengini değiştirmek istiyorsunuz. Test sitemin örneğini ele alacağız.

1. Siteyi Google Chrome tarayıcısında açma (Henüz kullanmadıysanız kurun - web siteleriyle çalışmak için iyi bir şekilde keskinleştirilmiştir, birçok yerleşik araca sahiptir).
2. Fare imlecini değiştirmek istediğiniz öğenin üzerine getirin . Bu durumda, blogun başlığı. “Sağ” fare ile üzerine tıklıyoruz ve çıkan pencerede ELEMENT KODUNU GÖRÜNTÜLE seçeneğini seçiyoruz.

ÖNEMLİ: SAYFA KODUNU GÖRMEK ile karıştırmayın! Şimdi tüm sayfaya ihtiyacımız yok, sadece ayrı bir öğeye ihtiyacımız var.

Üzerine tıklıyoruz - tarayıcının altında bir kod görüntüleme penceresi belirir:

Değiştirmekte olduğumuz kod satırı kırmızı ile vurgulanmıştır.

Ancak mavi ile vurgulanan alan aradığımız şeyi içeriyor. Yazı tiplerinden, renkten, boyuttan, vurgulamadan ve daha fazlasından sorumlu olan tam (yaklaşık değil) kod satırını burada bulabilirsiniz. Bu şekilde, herhangi bir şablonun herhangi bir öğesinin HERHANGİ bir kodunu bulabilirsiniz.

Mavi ile vurgulanan blokta istenen satırı buluyoruz. Sağ tarafta bir kaydırıcı var, kaydırarak istediğiniz satırı bulabilirsiniz.

Neyin arandığı genel prensip:

Yazı tipi adı - FONT AİLE satırında

Yazı tipi boyutu - FONT SIZE satırında

Yazı tipi rengi - RENK satırında

İşte herhangi bir öğenin adını, boyutunu ve yazı tipi rengini değiştiren üç ana satır. Sağda, stil css satırı, belgedeki satırın konumunu verir. Başka bir öğeyi değiştirmeniz gerekiyorsa (örneğin, menü çubuğunun rengini veya bağlantıların rengini değiştirebileceğiniz satırın nerede olduğunu bulmanız gerekir), her şey aynı şekilde yapılır. .

DİKKAT:

Kopyalayacağımız satır şekilde kırmızı ile vurgulanmıştır,

stil sayfasında daha sonra bulmak için.

4. Satırı kopyalayın. Bu örnekte site adının rengini değiştirmek istediğimiz için ikinci resimde vurgulanan satırı kırmızı bir dikdörtgenle kopyalıyorum. Şablonumda site adının rengini değiştirmekten sorumludur:

#header h1 a, #header h1 a:ziyaret edilen (

"Stil sayfası (style.css)" dosyasında istenen satırı buluyoruz. Bu zaten yöneticide yapılır. Güven ve tam bir anlayış sağlanana kadar, hariç tutmak için tüm deneyleri bir test alt etki alanında gerçekleştirmenizi rica ediyorum.

Öyleyse yönetici paneline gidin: KONSOL - GÖRÜNÜM - EDİTÖR. Sağ kenar çubuğunda STYLE TABLE (STYLE.CSS) dosyasını buluyoruz, açın.

Şimdi CTRL + F tuşlarıyla arama çubuğunu açıyoruz: üst pencerede boş bir satır penceresi görünecektir. 4. adımda kopyaladığınız satırı yapıştırın.

Ve bu çizginin stil sayfasında nasıl vurgulandığını göreceksiniz (şekilde - turuncu renkte):

Öğede bir değişiklik yapıyoruz. Bizim durumumuzda yazı tipi rengini değiştiriyoruz, bu nedenle COLOR satırında başka bir değeri değiştiriyoruz - istediğimiz renk. Örnekte renk siyahtır, anlamı şudur:

Herhangi bir web renk paleti hizmetinde bir renk seçebilirsiniz: "Web Renk Paleti" arama motoruna yazın ve istediğinizi seçin. Bir renk seçiyoruz, dijital değerini kopyalıyoruz ve eskisiyle dikkatlice değiştiriyoruz. ardından DOSYA GÜNCELLE'yi tıklayın ve ne olduğunu görün.

Değişiklikler görüntülenmezse, son bir saat içinde sayfaya tekrar gidin - bu sefer her şey görüntülenmelidir.

Bu uzun bir süre açıklanmıştır, ancak pratikte her şey hızlı bir şekilde yapılır, özellikle ilk beceri ortaya çıktığında.

Daha ayrıntılı olarak, belirli öğelerin nasıl değiştirileceği:

Bugünlük bu kadar, artık size kodlarla işkence etmeyeceğim. Umarım şimdi kendiniz html kodunun herhangi bir öğesini veya daha doğrusu css kodunu kolayca bulabilir ve değiştirebilirsiniz - evet, uzmanlar basitleştirdiğim için beni affedecektir. Ve anlamadıysanız, yine de sayfayı ziyaret edin. Saçma sapan şeylerle zaman kaybetmeyin.

Artem Abramovich'in herhangi bir temada / şablonda herhangi bir kelimeyi veya öğeyi, herhangi bir motor (wordpress, joomla, vb.) için nasıl arayacağınız ve bulacağınız ve ihtiyacınız olanla nasıl değiştireceğiniz hakkında bir video izlemenizi öneririm:

Beğendiyseniz lütfen paylaşın:

Ayrıca bilmek ilginizi çekebilir:

Tarayıcı geliştiricileri, aynı tarayıcılarda açılan siteleri oluşturanların, yani web yöneticilerinin rahatlığını üstlenmiştir. Standart özelliklere, 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 yalnızca iş için sitelerin yaratıcıları tarafından değil, aynı zamanda kaynak kodunun çeşitli faydalı verileri görmenize izin verdiği sıradan kullanıcılar tarafından da kullanılır.

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

Tarayıcıda sayfa 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ısı, IE.

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

Sayfada istediğiniz kodu, kelimeyi veya metni hızlı bir şekilde bulmak için tüm tarayıcılar için standart arama kısayol tuşu kombinasyonunu kullanabilirsiniz: Ctrl + G.

Video talimatı:

Öğe kodunu görüntüle | keşif öğesi | öğ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 yapmak zorunda kalmadan sitedeki stilleri düzenleyebilir ve belirli stiller ile nasıl görüneceğini görebilirsiniz. Bir program kodunu değiştirmek veya eklemek için istediğiniz parçaya veya bölüme çift tıklamanız gerekir. Tabi ki tarayıcıdaki kodun düzeltilmesi hosting sunucularında yapılmayacaktı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ışılacağını ayrıntılarıyla gösterir ve gösterir:

Yani sadece çevrimiçi, doğrudan tarayıcıda, site sayfasının kaynak kodunu görüntüleyebilir, HTML ve CSS kodu hakkında temel bilgiler alabilir, bu sitenin dosyalarını bilgisayarınıza indirmek zorunda kalmadan 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 kaybolacak. Bu siteyi hacklemek için yeterli değil 🙂

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-kaynak:https://website/turbo-mode-opera/

İnternette yayınlanan sitenin dosyalarını ve kodunu etkilemeden sitedeki tüm değişiklikleri hızlı bir şekilde görmek gerekir. Örneğin, bir bloğun renk şemasını değiştirin, taşınan bir öğeyi taşıyın, vb.

Bunu yapmak için birçok web yöneticisi, bilgisayarlarında sitenin tam bir kopyasını çalıştıran yerel Denwer veya OpenServer sunucularını kullanır. Bu yöntem evrenseldir ve profesyoneller için uygundur, onunla çeşitli komut dosyalarının ve eklentilerin çalışmasını kontrol edebilir, tasarımı değiştirmeyi deneyebilir ve tüm site dosyalarını düzenleyebilir ve testten sonra uygun değişiklikleri doğrudan siteye aktarabilirsiniz.

Webmaster sanatından uzak olan kullanıcılar için bu amaçlar için bir tarayıcı kullanmanızı tavsiye ederim. Chrome kullandığım için bu tarayıcı için ekran görüntüleri ile talimatlar vereceğim. Benzeterek Opera, Yandex.Browser, Mozilla Firefox ve diğer tarayıcılarla çalışabilirsiniz, araçlarının prensibi benzer.

Talimat 1: Sitenin HTML kodunun tamamını tarayıcıda nasıl görüntüleyebilirsiniz

Sitenizin gerekli web sayfasını açın. Gerekli öğeye sağ tıklıyoruz, mevcut komutları içeren bir tarayıcı bağlamı açılır menüsü görünecektir:

Şekil 1. Bir web sayfasının HTML kodunun tamamını Chrome tarayıcıda görüntüleme

Önemli: Açılır menüdeki komutlar, örneğin etkin öğeler (bağlantılar, resimler, videolar) ve etkin olmayan öğeler (metin, arka plan, div'ler) için farklılık gösterebilir:

Şekil 2. Chrome tarayıcı açılır menüsü

Bu nedenle, ihtiyacınız olan komutu bulamazsanız, başka bir yere sağ tıklayın veya tarayıcınızın kısayol tuşlarını kullanın.

Şekil 1'e dönersek, orijinal web sayfasının tüm HTML kodunu görüntülemek için gerekli komutu gösterir, buna " denir. Sayfa kodunu görüntüle". Komuta tıklıyoruz, orijinal web sayfasının tam koduyla yeni bir sekme açılacak, her şeye büyük bir artı - sözdizimi vurgulamalı görünüm kullanılabilir:

Şekil 3. Bu site için kod parçacığı

Bu araç, aradığınız öğeleri bulmak ve düzenlemek için çok kullanışlıdır.

Bir Web Sayfasının Tüm HTML'sini Görüntülemenin Alternatif Yolları

Daha hızlı erişim için bu aracı çağırmanın diğer yollarını kullanabilirsiniz.

1. Şekil 1'de ayrıca bu komutun bir klavye kısayolu ile kullanılabildiğini görüyoruz. + ;
2. Tarayıcı view-source: site adresinin adres çubuğuna benim etki alanım yerine yapıştırın, adresinizi yapıştırın;

Her iki yöntem de evrenseldir ve tüm tarayıcılarda çalışmalıdır.

İlk başta bazılarına bu hiç gerekli bir araç değilmiş gibi görünebilir, ancak bir sitenin tüm HTML kodunu görüntülemek, kodda gerekli öğeleri bulmak için harikadır, bunlar bağlantılar, etiketler, meta etiketler, nitelikler ve diğer unsurlar.

Kısayol tuşu kombinasyonu +arama kutusunu açın, Chrome tarayıcısında sağ üstte görünür:

Şekil 3. Site koduna göre arama

Arama formuna bir istekte bulunduktan sonra, ekran, aralarında hareket edebileceğiniz okları kullanarak bulunan ilk öğeye gidecek ve ihtiyacınız olanı seçin:

Şekil 4. Web sitesi HTML koduna göre arama

Talimat 2: Google Chrome Tarayıcıda Web Sitesi HTML ve CSS Kodu Nasıl Görüntülenir ve Düzenlenir

Şimdi, sitenin HTML ve CSS kodunu tarayıcıda nasıl düzenleyebileceğinizi göstereceğim en önemli kısım. ardından değişiklikleri tarayıcıya aktarın.

İşte, tarayıcınızda her zaman mevcut olan çok kullanışlı bir araç, siteyi düzenlemenizi kolaylaştıracak diğer komutları deneyin.