Ana Krom Google Chrome'da HTML Kaynağını Görüntüleme

Google Chrome'da HTML Kaynağını Görüntüleme



Bilinmesi gereken

  • Web sayfasına sağ tıklayın ve seçin Sayfa kaynağını görüntüle .
  • Kısayol: Basın Ctrl + İÇİNDE (Windows PC) veya Emretmek + Seçenek + İÇİNDE (Mac).
  • Chrome'un geliştirici araçlarını kullanmak için Menü (üç nokta) > Daha fazla araç > Geliştirici araçları .

Bu makalede, Google Chrome web tarayıcısında bir web sitesinin HTML kaynak koduna nasıl erişileceği, ayrıca Chrome'un geliştirici araçlarına nasıl erişilip kullanılacağı açıklanmaktadır. Bir sitenin kaynak kodunu görüntülemek, yeni başlayanlar için HTML öğrenmenin mükemmel bir yoludur.

Kaynak Kodunu Chrome'da Görüntüle

Peki bir web sitesinin kaynak kodunu nasıl görüntülersiniz? Google Chrome tarayıcısını kullanarak bunu yapmak için adım adım talimatları burada bulabilirsiniz.

  1. Google Chrome web tarayıcısı (Eğer senin yoksa Google Chrome yüklü , bu ücretsiz bir indirmedir).

  2. Şuraya gidin: İncelemek istediğiniz web sayfası .

  3. Sağ tık sayfa ve beliren menüye bakın. Bu menüden tıklayın Sayfa kaynağını görüntüle .

    Chrome web tarayıcısının bağlamsal menüsünde Sayfa Kaynağını Görüntüle
  4. Bu sayfanın kaynak kodu artık tarayıcıda yeni bir sekme olarak görünecektir.

  5. Alternatif olarak klavye kısayollarını da kullanabilirsiniz. Ctrl + İÇİNDE Bir sitenin kaynak kodunun görüntülendiği bir pencere açmak için PC'de. Mac'te bu kısayol Emretmek + Seçenek + İÇİNDE .

Hilary Allison / Cankurtaran Teli

instagrama bumerang nasıl atılır

Chrome'un Geliştirici Araçlarını Kullanın

Basit olanın yanı sıraSayfa kaynağını görüntüleGoogle Chrome'un sunduğu mükemmel yeteneklerden de yararlanabilirsiniz. Geliştirici Araçları bir sitenin daha da derinlerine inmek. Bu araçlar yalnızca HTML'yi değil, aynı zamanda o HTML belgesindeki öğeleri görüntülemek için geçerli olan CSS'yi de görmenize olanak tanır.

Chrome'un geliştirici araçlarını kullanmak için:

  1. Açık Google Chrome .

  2. Şu yöne rotayı ayarla incelemek istediğiniz web sayfası .

  3. Şunu seçin: üç noktalı menü Tarayıcı penceresinin sağ üst köşesinde.

  4. Menüden fareyle üzerine gelin Daha fazla araç ve sonra seç Geliştirici araçları görünen menüde.

    Google Chrome
  5. Bölmenin solunda HTML kaynak kodunu ve sağında ilgili CSS'yi gösteren bir pencere açılacaktır.

  6. Alternatif olarak sağ tıklarsanız bir web sayfasındaki bir öğe ve seç İncelemek Görünen menüde, Chrome'un geliştirici araçları açılacak ve HTML'de seçtiğiniz belirli bölümü sağda gösterilen ilgili CSS ile vurgulayacaktır. Bir sitenin belirli bir parçası hakkında daha fazla bilgi edinmek istiyorsanız çok faydalıdır.

    Steam'de kaç kişinin oyun oynadığını nasıl görebilirim?
Mac'te Bir Öğe Nasıl Denetlenir

Kaynak Kodunu Görüntülemek Yasal mı?

Yıllar boyunca birçok yeni web tasarımcısının, bir sitenin kaynak kodunu görüntülemenin ve bunu eğitimleri ve sonuçta yaptıkları iş için kullanmanın kabul edilebilir olup olmadığını sorgulamasıyla karşılaştık. Bir sitenin kodunu toptan kopyalayıp bir web sitesinde kendi kodunuz gibi dağıtmak kesinlikle kabul edilemez olsa da, bu kodu bir şeyler öğrenmek için bir sıçrama tahtası olarak kullanmak aslında bu sektörde ne kadar ilerleme kaydedildiğinin göstergesidir.

Bu makalenin başında da belirttiğimiz gibi, bugün bir sitenin kaynağını inceleyerek bir şeyler öğrenmemiş, çalışan bir web uzmanı bulmakta zorlanacaksınız! Evet, bir sitenin kaynak kodunu görmek yasaldır. Benzer bir şey oluşturmak için bu kodu kaynak olarak kullanmak da güvenlidir. Kodu olduğu gibi alıp işiniz olarak başkalarına aktarmak, sorunlarla karşılaşmaya başladığınız yerdir.

Sonuçta, web uzmanları birbirlerinden öğrenirler ve genellikle gördükleri ve ilham aldıkları çalışmaları geliştirirler; bu nedenle, bir sitenin kaynak kodunu görüntülemekten ve onu bir öğrenme aracı olarak kullanmaktan çekinmeyin.

iphone'da engellenen numaralar nasıl bulunur

HTML'den Daha Fazlası

Unutulmaması gereken bir nokta, kaynak dosyaların çok karmaşık olabileceğidir (ve görüntülediğiniz web sitesi ne kadar karmaşıksa, sitenin kodunun da o kadar karmaşık olması muhtemeldir). Sayfayı oluşturan HTML yapısının yanı sıra o sitenin görsel görünümünü belirleyen CSS (basamaklı stil sayfaları) da olacaktır. Ek olarak, günümüzde birçok web sitesi HTML'nin yanı sıra komut dosyaları da içerecektir.

Birden fazla komut dosyasının dahil edilmesi muhtemeldir; aslında her biri sitenin farklı yönlerini güçlendiriyor. Açıkçası, bir sitenin kaynak kodu, özellikle de bu konuda yeniyseniz, bunaltıcı görünebilir. O sitede neler olup bittiğini hemen anlayamazsanız sinirlenmeyin. HTML kaynağını görüntülemek bu süreçteki yalnızca ilk adımdır. Biraz deneyimle, tarayıcınızda gördüğünüz web sitesini oluşturmak için tüm bu parçaların nasıl bir araya geldiğini daha iyi anlamaya başlayacaksınız. Koda daha aşina oldukça, ondan daha fazlasını öğrenebileceksiniz ve bu size o kadar da korkutucu gelmeyecek.

SSS
  • Chrome'da HTML kodunu nasıl düzenlerim?

    tuşuna basarak Chrome'da Geliştirici Araçlarını açın. Ctrl (veya Emretmek Mac'te) + Üst Karakter + I . Oradan basın Ctrl ( Emretmek Mac'te) + O ve açmak için düzenlemek istediğiniz kayıtlı kaynak dosyayı seçin.

  • Kaynağı Görüntüle devre dışı bırakılırsa Chrome'da sayfa kaynak kodunu nasıl görüntülerim?

    Bir web sitesi Kaynağı Görüntüle seçeneğini devre dışı bırakmışsa, yine de genel bilgilere göz atabilirsiniz. Tarayıcı penceresinin üst kısmından öğesini seçin Görüş > Geliştirici > Kaynağı Görüntüle , web sayfasının kaynak kodunu çıkarmalıdır.

  • Android cihazımı kullanarak bir sitenin kaynak kodunu Chrome'da nasıl görüntülerim?

    Cihazınızın Chrome uygulamasını kullanarak görüntülemek istediğiniz web sitesine gidin ve ardından tarayıcının adres çubuğunu seçin. Metin imlecini en sola (URL'nin önüne) taşıyın ve yazın kaynak görüntüleme , ardından tuşuna basın Girmek veya seçin Gitmek .

Ilginç Haberler

Editörün Seçimi

OBS ile Ekran Nasıl Kaydedilir
OBS ile Ekran Nasıl Kaydedilir
OBS Studio, güçlü bir ekran ve yayın aracı sağlar. Açık kaynaklı yazılım, canlı akış içeriğinin yanı sıra, bilgisayar ekranlarını sorunsuz bir şekilde kaydedebilir ve sesi alabilir. Kullanıcı dostu kontrol paneli, bir dizi özelleştirme özelliği ile birlikte gelir
MacOS Sierra'da Gatekeeper Nasıl Devre Dışı Bırakılır ve Uygulamalara Her Yerden İzin Verilir
MacOS Sierra'da Gatekeeper Nasıl Devre Dışı Bırakılır ve Uygulamalara Her Yerden İzin Verilir
Gatekeeper, macOS'ta önemli bir güvenlik özelliğidir, ancak Apple, macOS Sierra'da nasıl çalıştığı konusunda bazı değişiklikler yaptı. İşte tüm Gatekeeper seçeneklerini nasıl geri yükleyeceğiniz ve isterseniz devre dışı bırakacağınız.
Kindle Fire'da Instagram Nasıl İndirilir
Kindle Fire'da Instagram Nasıl İndirilir
Kindle Fire uygulaması, diğer akıllı cihazlarınızın yapabildiği hemen hemen her şeyi yapabilir. YouTube'a erişebilir, web'e göz atabilir ve hatta müzik dinleyebilirsiniz. Ancak Instagram uygulamasını Amazon'un uygulama mağazasından indirmeyi denediyseniz,
Microsoft, yeni PowerToys Ayarları Kullanıcı Arabirimi ve ImageResizer aracı üzerinde çalışıyor
Microsoft, yeni PowerToys Ayarları Kullanıcı Arabirimi ve ImageResizer aracı üzerinde çalışıyor
Son zamanlarda GitHub'da Microsoft, PowerToys ayarları için yeni bir kullanıcı arayüzü fikrini ortaya çıkardı. Fikir, kullanıcı katkıları ve tasarım modellerinin ardından tasarlandı.Reklam Microsoft, PowerToys içinde ayarlama için son kullanıcı deneyimini iyileştirecek. Yeni bir özellik taslağı aşağıdakileri açıklar: PowerToy'lar iki nedenden dolayı mevcuttur. Kullanıcılar daha fazla verimlilik elde etmek istiyor
Windows 10'da Bir Uygulama Tarafından En Son Değiştirilen Dosyalara Bakın
Windows 10'da Bir Uygulama Tarafından En Son Değiştirilen Dosyalara Bakın
Windows 10, belirli bir uygulamadan en son değiştirilen dosyaları size gösterebilir. Bu dosya listesi yalnızca uygulamayla ilgili dosyaları içerecektir.
2024 Yılının En İyi 6 Kasırga Uyarısı Uygulaması
2024 Yılının En İyi 6 Kasırga Uyarısı Uygulaması
Fırtına yaklaşıyorsa güvenebileceğiniz bir kasırga uyarı uygulamasına ihtiyacınız var. Hem iOS hem de Android için bu en iyi kasırga uygulamalarını bulmak için özellikleri inceledik.
Windows 10'da Olay Görüntüleyicide Yazdırma Günlüğünü Etkinleştirin
Windows 10'da Olay Görüntüleyicide Yazdırma Günlüğünü Etkinleştirin
Windows 10 Olay Görüntüleyicisinde Yazdırma Günlüğü Nasıl Etkinleştirilir Windows 10'da, kullanıcılar tarafından başlatılan işletim sistemi günlük yazdırma işlerini yapmak mümkündür. Bu özellik etkinleştirildiğinde, yazıcı işlerinin her biri için bir Olay Günlüğü kaydı yapar. Bu, yazdırılan her şeyi hızlı bir şekilde incelemenizi sağlar