Herhangi bir web sitesinin HTML kodunu herhangi bir tarayıcıda nasıl görüntüleyebilirim?

Bir web sayfası, bir web geliştiricisinin ve tasarımcısının, kullanıcıların dikkatini çekmeye çalıştıkları ürününden başka bir şey değildir, ancak onu doğru sıralanmış bir HTML öğeleri kümesi olarak da tanımlayabiliriz. Ziyaret ettiğiniz web sayfalarının meraktan veya sadece kendi kendine öğrenme ihtiyaçlarınızı karşılamak için kaportanın altında çalıştığını görmek isterseniz, şunları yapabilirsiniz: HTML koduna erişin herhangi bir tarayıcıdan herhangi bir web sayfasının çok kolay bir şekilde.

Satcounter'ın verilerine göre, Haziran 2022'de, en çok kullanılan tarayıcı bilgisayarlarda dünya çapında Google krom, % 66 pay ile. İkinci konumda ve sürekli büyümede, Microsoft kenar Chromium, %10'un biraz üzerinde pazar payına sahip. Üçüncü ve dördüncü sırada Safari vardır (bu, şu anda mevcut olmadığı için bu makalede bahsetmeyeceğiz). Windows) Ve Firefox sırasıyla %9.1 ve %7.6 pazar payı ile.

herhangi bir web sitesinin HTML kodunu herhangi bir tarayıcıda görüntüleyin

Masaüstü platformlarda dünyada en çok kullanılan 5 tarayıcının sınıflandırılması (mobil cihazlarda pek bir şey değişmiyor) ile kapanıyor. işletmek, şu anda %2.6 hisse ile Çinli şirketlerden oluşan bir holdingin arkasında olan bir şirket. Aşağıda en çok kullanılan tarayıcıları göz önünde bulundurarak, farklı tarayıcılar kullanarak herhangi bir web sitesinin HTML koduna nasıl erişeceğinizi gösteriyoruz.

Bir web sitesinin HTML kodu nedir ve ne işe yarar?

Tüm tarayıcılar, geliştiriciler için araçlar, web denetçisi, öğe denetçisi… adı verilen ve asıl amacı kullanıcıya izin vermek olan bir işlev içerir. web'in HTML koduna erişmek için , onu oluşturan farklı unsurların işleyişini analiz etmek, hataları tespit etmek ve bir çözüm üzerinde çalışmak için ziyaret ettiğimiz web'in kaynak kodu. Özellikle web tasarımına ilk adımlarını atan kullanıcılar için de yararlıdır.

Her tarayıcı, temel tarayıcıda uygulanan farklı bir denetçi kullanır. Chrome, Edge ve Opera'nın Chromium tabanlı olması durumunda kullanılan denetçi tamamen aynıdır. Biraz değişen tek şey, düzen ve tarama seçenekleri.

HTML koduna erişirken, tüm bilgiler şu şekilde sınıflandırılır: farklı sekmeler böylece onu oluşturan tüm bölümlere erişmek çok daha kolay. Bilgimiz çok yüksekse, Elements sekmesine erişerek fazlasıyla yeterli olacaktır.

Elements sekmesinden web'in tüm HTML kodlarına erişebiliriz. Fareyi Inspector'daki farklı kod satırları üzerinde hareket ettirirsek, web'de atıfta bulunduğu içeriğin web'in hangi bölümüne atıfta bulunduğunu belirtmek için nasıl vurgulandığını göreceğiz.

Google Chrome ile

Google Chrome'da bulunan Geliştirici Araçları, ziyaret ettiğimiz tüm web sitelerinin HTML koduna erişmemizi sağlayan işlevdir. Google'ın tarayıcısı, bu araca erişmek için bize üç farklı yöntem sunar; bu yöntemler, bir klavye kısayolundan Chrome yapılandırma menüsü aracılığıyla bir işlev tuşuna kadar uzanan yöntemlerdir.

Código HTML Chrome

  • F12 tuşu. Bu, küçültülmüş bir klavyemiz olmadığı ve İşlev tuşunu (Fn) kullanmamız gerektiği sürece, Google Chrome Geliştirici Araçları'na erişmenin en hızlı yöntemidir. Bu düğmeyi ilk kullandığımızda, tarayıcı bu tuşun çalışmasını bu işlevle ilişkilendirmemize izin verecektir.
  • Kontrol + Üst Karakter + ben . Verimliliğinizi artırmak ve fareye olan bağımlılığınızı azaltmak için günlük yaşamınızda klavye kısayollarını benimsediyseniz, Chrome koduna erişmek için bu klavye kısayolunu kullanabilirsiniz.
  • menü aracılığıyla . Google Chrome yapılandırma menüsünden, sağ üst köşede bulunan üç dikey noktaya tıklayarak kodu incelemek için Araçlar menüsüne de erişebiliriz. Ardından, Diğer araçlara gidiyoruz ve son olarak son seçeneğe tıklıyoruz: Geliştirici araçları.
  • İle Sağ fare tuşu , hem web'in kaynak koduna hem de geliştiriciler için araçlara erişebiliriz.

Microsoft Edge aracılığıyla

Microsoft Edge ile kendimizi bulduğumuz sayfanın HTML koduna erişmek istiyorsak Microsoft tarayıcısı bize üç farklı yöntem sunuyor. Her ikisi de Chromium'a dayandığından ve aynı tarayıcı tabanını paylaştığından, üç yöntemin de Google Chrome'dakiyle aynı olması şaşırtıcı olmamalıdır.

código HTML Kenarı

Google'dan farklı olarak Microsoft, bu araca, aşağıda size göstereceğimiz farklı yöntemlerden birini kullanarak erişebileceğimiz bir araç olan Geliştirme Araçları adını verir:

  • F12 fonksiyon tuşu. Chrome'da olduğu gibi, bu en hızlı ve en kolay yöntemdir. Bu düğmeyi ilk kullandığımızda, tarayıcı bu tuşun çalışmasını bu işlevle ilişkilendirmemize izin verecektir.
  • Kısayol ile Kontrol + Üst Karakter + ben . Kullanmaya alıştıysanız hayatınıza bir kısayol daha koymak sorun olmayacaktır.
  • Menüden . Sağ üst köşede bulunan üç yatay noktaya tıklayın. Ardından, Diğer araçlar'a tıklayın ve son olarak son seçeneğe tıklayın: Geliştirme araçları.
  • Bulunduğumuz web sitesinin kaynak koduna erişmek için Sağ fare tuşu ve Sayfa kaynak koduna bakın seçeneğini seçin. Inspect seçeneğini seçersek, Edge Developer Tool görüntülenecektir.

Geliştirici Araçlarına ilk kez erişiyorsak, tarayıcı bize Microsoft Edge Geliştirici Araçlarını Açmak isteyip istemediğimizi soracaktır.

Firefox'tan

Mozilla Foundation'dan Firefox, bu listede Chromium tabanlı olmayan tek tarayıcıdır, bu nedenle yukarıdaki yöntemler teorik olarak çalışmamalıdır, ancak tam olarak aynı oldukları için çalışmazlar.

codigo HTML Firefox

Ancak Firefox'un diğer tarayıcılardan bize sunduğu temel fark, web'in kod denetçisinin gösterildiği konumdur. Tüm Chromium tabanlı tarayıcılar, web kodunu tarayıcının sağ tarafında görüntülerken, Firefox bu bilgileri altta görüntülemeyi seçerek görüntülenen bilgileri daha erişilebilir hale getirir.

Geliştirici Araçları paneline Firefox üzerinden erişmek istiyorsak, Chrome ve Edge Chromium ile aynı 3 seçeneğimiz var.

  • F12 tuşu. Bu işlev tuşuna basmak, Firefox'un tarayıcının altında Geliştirici Araçlarını görüntülemesine neden olur.
  • Klavye kısayolunu kullanma Kontrol + Üst Karakter + ben bulunduğumuz web'in HTML kodunu açacaktır.
  • Fareyi bırakmakta zorlanan kullanıcılardan biriyseniz, bir web sitesinin HTML koduna şu adresten erişebilirsiniz: Firefox seçenekler menüsü , tarayıcının sağ üst köşesinde bulunan üç yatay çizgiye ve Diğer araçlar > Geliştirici araçlarına tıklayarak.
  • itibaren Sağ fare tuşu , Sayfa kaynak kodunu görüntüle seçeneğini seçerek webin HTML koduna erişebiliriz. Ancak Geliştirici Araçları paneline erişmek istiyorsak Inspect seçeneğini seçmeliyiz.

işletmek

Opera, tıpkı Google Chrome ve Microsoft Edge gibi Chromium projesine dayansa da, bu tarayıcının bize sunduğu yöntemler aynı değil. Aynı projeye dayalı diğer tarayıcılarla çakıştığı yer, tarayıcının sağ tarafından başka bir şey olmayan, görüntülendiği konumdur.

código HTML Opera

Opera tarayıcısının kullanıcılarına herhangi bir sayfanın HTML koduna erişmeleri için sunduğu farklı yöntemler şunlardır:

  • Klavye kısayolu ile Kontrol + Üst Karakter + ben , hangi projeye dayandıklarına bakılmaksızın tüm tarayıcıların evrensel olarak benimsediği klavye kısayolu. Kısayol Kontrol + Üst Karakter + c Da mevcuttur
  • Farenin sağ tuşuna basın ve seçeneği seçin İnceleme öğesi Web'deki herhangi bir yerden.
  • Opera'da açtığımız web'in HTML koduna Sayfa Kaynağı seçeneği ile sağ tuştan ulaşabilirsiniz. HTML kodunu incelemek için, sağ tuşa bastığınızda görüntülenen menüden İncele seçeneğini seçmeliyiz.