Android ve iPhone’da Web Sayfası Öğeyi Denetle Nasıl Yapılır ?

İPhone veya Android cihazınızda öğe inceleme aracını kullanmak ister misiniz? Normalde çoğu insan internete erişmek için web tarayıcıları kullanır, ancak web geliştiricileri için tarayıcı bir internet erişim uygulamasından çok daha fazlasıdır. Web geliştiricileri, kodlarını test etme ve hata ayıklama gibi çeşitli başka nedenlerle tarayıcıları kullanır.

 

SOSYAL MEDYA | Stratejik Operasyon | Sayfa 2
Şimdi, masaüstü ve mobil tarayıcıları karşılaştırırsak, masaüstü tarayıcılar açıkça daha gelişmiştir. Bunun nedenlerinden biri, mobil tarayıcılarda bulunmayan geliştirici araçlarına (DevTools olarak da bilinir) sahip olmalarıdır. Geliştiricinin bakış açısından, bu çok önemli bir özellik.

Geliştirici araçları ayrıca, web sitesinin HTML ve CSS’sini görüntülemek ve düzenlemek için kullanılan inceleme öğesi aracından oluşur. internet sayfaları. Bir geliştiriciyseniz, iPhone veya Android cihazınızda öğe inceleme aracını da kullanmanız gerekebilir. Chrome mobil uygulaması bu özelliğe sahip değil, ancak neyse ki aynı işi yapabilecek birkaç geçici çözüm var.

Tarayıcılarda Öğe İnceleme aracı nedir

İnceleme öğesi, Google Chrome, Firefox, Safari, Internet Explorer ve diğer masaüstü web tarayıcılarında bulunan geliştirici araçlarından biridir. Bu araç, web sayfasının kaynak kodunu görüntülemenizi ve içinde canlı düzenlemeler yapmanızı sağlar.

HTML kodunun yanı sıra, web sayfasının resimleri, CSS, Javascript, yazı tipleri ve diğer içeriklerini de görüntüleyebilirsiniz. İnceleme öğesi aracı oldukça kullanıcı etkileşimlidir. Web sayfası öğesine tıklayabilir ve ardından kodunu doğrudan inceleyebilirsiniz.

Bir başka ilginç özellik ise, elemanların tüm CSS kodlarını görüntüleyebilmeniz ve canlı olarak düzenleyebilmenizdir. İnceleme öğesi aracı, geliştiricilerin sitelerinin HTML kodunu incelemeleri ve grafik (renk) güncellemeleri yapmaları için çok kullanışlıdır.

Öğeyi İncele aracını bir masaüstü tarayıcısında açmanın farklı yolları vardır. En kolay yollardan biri kısayol tuşlarını kullanmaktır: CTRL + ÜST KRKT + I (Windows için) veya CMD + SEÇENEK + I (Mac için). Alternatif olarak, web sayfasında herhangi bir yere sağ tıklayın ve ardından menüden İncele seçeneğine tıklayın.

Web sayfasının kaynak kodunu mobil Chrome’da görüntüleyin

Mobil versiyonu Android için Google Chrome ve iPhone / iOS, masaüstü sürümünde olduğu gibi Geliştirici Aracı özelliğine sahip değildir, ancak yine de web sayfasının kaynak kodunu görüntüleyebilir ve HTML öğelerini manuel olarak inceleyebilirsiniz. Bu görev için, bir kaynak görüntüleme URL şeması kullanacağız. Bu adım adım kılavuz size bunu nasıl yapacağınızı gösterecek –

  1. Chrome uygulamasını başlatın iPhone veya Android cihazınızda.
  2. Web sayfasına git kaynak kodunu görüntülemek kaynak kodunu öğrenmek istediğiniz.
  3. Görünüm kaynağı ekle: web sayfasının URL’sinden önce (aşağıdaki resimde gösterildiği gibi) view-source: kodunu başına eklemelisiniz.
    Chrome Android'de web sayfasının kaynak kodunu görüntüleyin
  4. En sonunda, Enter / OK düğmesine basın yüklemek için. Web sayfasının kaynak kodunu açacaktır.

Bir öğeyi aramak istiyorsanız, Chrome menüsüne (sağ üst köşedeki üç nokta) gidin ve Sayfada bul seçeneği. Bu, öğeleri manuel olarak bulmanıza ve incelemenize yardımcı olabilecek bir arama kutusu açacaktır.

Bazı web sitelerinin masaüstü ve mobil için iki ayrı sürümü vardır. Varsayılan olarak, mobil sürüme yönlendirileceksiniz. Masaüstü web sitesinin kaynak kodunu görüntülemek istiyorsanız, Chrome menüsüne gidin ve Masaüstü sitesi buton. Bundan sonra aynı adımları izleyin.

Inspect and Edit HTML Live uygulamasını kullanın

Android kullanıcıları için, bir inceleme öğesi aracı olarak çalışabilen Inspect and Edit HTML Live adlı bir uygulama vardır. HTML kodlarını görmek ve sayfa kaynağını canlı olarak düzenlemek için öğelere tıklayabilirsiniz. Bunun dışında, bu uygulama aynı zamanda Javascript kodlarınızı çalıştırabileceğiniz bir Javascript Konsol Prototipi sağlar.

  1. İndirin ve kurun HTML Live’ı İnceleyin ve Düzenleyin Android telefonunuzdaki uygulama.
  2. Açın ve incelemek istediğiniz web sayfasına gidin. Varsayılan olarak, Google web sitesini açacaktır.
  3. Sağ üst köşedeki parmakla dokunma simgesine tıklayın. Bu, inceleme modunu etkinleştirecektir.
    Download Inspect and Edit HTML Live Free for Android - Download Inspect and Edit HTML Live APK Latest Version - APKtume.com
  4. Şimdi incelemek istediğiniz öğeye tıklayın. Uygulama, bu öğenin HTML kodunu gösterecektir. Canlı sonuçları görmek için onu düzenleyebilir ve değişiklikleri uygulayabilirsiniz.
  5. Sayfa kaynağını düzenleyin – Sayfanın kaynak kodunu düzenlemek için menü düğmesine (üç nokta) ve ardından Sayfa Kaynağını Düzenle seçeneğine tıklayın.
     
  6. HTML öğelerini düzenleyin – Menüdeki bu seçenek, web’de görüntüleyebileceğiniz bazı yaygın HTML öğelerini (,
    ,, ,, vb.) Gösterir. tek seferde sayfa.

Bu uygulama tamamen ücretsiz değil. Yalnızca 20 ücretsiz düzenleme sağlar. Bundan sonra, kilidini açmak için tam sürümü satın almanız veya bir reklam izlemeniz gerekir. Mobil platforma gelince, uygulama web sayfasının temel öğelerini incelemek için oldukça iyidir, ancak Inspect Elements aracının masaüstü tarayıcılarda sunduklarına yakın bile değildir.

Dolayısıyla bunlar, kaynak kodunu görüntülemek ve web sayfasının öğelerini iPhone veya Android cihazınızda incelemek için kullanabileceğiniz iki basit geçici çözümdür. Herhangi bir yardıma ihtiyacınız olursa veya sorularınızdan herhangi birine cevap verirseniz, aşağıya bir yorum bırakmaktan çekinmeyin. Bu gönderiyi beğendin mi? Geliştirici arkadaşlarınızla paylaşmayı unutmayın.

 

Yazar: admin