Burada anlatılan Chrome Android ve Safari uzaktan inceleme yöntemlerinde, telefondan öğeyi denetle işlemi telefondaki tarayıcıda tek dokunuşla açılan yerleşik bir F12 paneli değildir. Mobil sayfanın HTML yapısını, CSS karşılığını ve sayfa davranışını incelemek için telefonu güvenilir bir bilgisayara bağlayıp bilgisayardaki resmi geliştirici araçlarını kullanmak gerekir. Yani bu yöntemlerde telefon sayfayı çalıştırır, inceleme ekranı bilgisayarda açılır.
Android'de Chrome ile Sayfa Kaynağını Görüntüleme
Bu yöntem sayfanın HTML kaynağını salt okunur olarak gösterir; canlı DOM düzenleme veya Elements/DevTools içermez.
- Chrome adres çubuğuna view-source:https://example.com yazıp sayfanın HTML kaynağını açın.
- Gerekirse parmakla yakınlaştırarak okuyun ve yerleşik Line wrap seçeneğini kullanın.
Mobilde İnceleme Mantığı Neden Farklı?
Masaüstünde tarayıcı penceresi ve geliştirici araçları aynı cihazda bulunur. Mobil kurulumda ise bu iki rol ayrılır. Telefon, gerçek mobil yerleşimi, dokunmatik davranışı ve mobil ağ koşullarını üretir. Bilgisayar ise bu sayfanın belge yapısını okuyan, stil değişikliklerini deneyen ve ağ isteklerini gözlemleyen denetim yüzeyini sağlar. Bu ayrım özellikle duyarlı tasarım hatalarında önemlidir; çünkü bir öğe masaüstünde doğru görünürken mobil genişlikte taşabilir, üst üste binebilir veya menü içinde kaybolabilir. Bu tür sorunların kalıcı çözümü için sayfa yapısının profesyonel bir web tasarım çalışmasıyla mobil uyumlu kurgulanması gerekir.
Burada yapılan değişikliklerin kapsamını doğru anlamak gerekir. Bilgisayardaki denetim ekranında bir yazıyı değiştirmek, bir rengi kapatmak ya da bir kutuyu gizlemek yalnızca o anki yerel görünümü etkiler. Uzak sitedeki gerçek veriyi, başka ziyaretçilerin gördüğü sayfayı veya sunucu tarafındaki kaydı değiştirmez. Bu nedenle yöntemi yalnızca kendinize ait sayfalarda ya da inceleme izniniz olan test sayfalarında kullanın. Başkasına ait bir siteden gizli bilgi çıkarmak, giriş ekranlarını aşmaya çalışmak veya bilinmeyen denetim uygulamaları kurmak güvenli değildir.
Telefondan Öğeyi Denetle: Android Sayfasını Bilgisayardan İnceleme
Android tarafındaki resmi yol, bilgisayar Chrome’undaki uzak inceleme ekranına dayanır. Telefonla bilgisayar USB ile bağlanır, telefonda USB hata ayıklamasına izin verilir ve bilgisayar Chrome’unda cihazlar listesi açılır. Bağlantı onaylandıktan sonra telefonda açık olan sekme bilgisayarda listelenir ve ilgili sekme için inceleme penceresi başlatılır.
Başlamadan Önce Hazırlanacaklar
- Kendi siteniz ya da test etmenize izin verilen bir sayfa
- Android telefonda Chrome ve Geliştirici Seçenekleri içinde önceden etkinleştirilmiş USB hata ayıklama
- Güncel Chrome yüklü güvenilir bir bilgisayar
- Sağlam bir USB kablosu
- Telefonda açık tutulan ve incelenecek mobil sayfa
Bağlantı ve İnceleme Adımları
- Android telefonda Geliştirici Seçenekleri bölümünden USB hata ayıklamayı önceden etkinleştirin.
- Telefonu USB kablosuyla yalnızca güvendiğiniz bilgisayara bağlayın.
- Telefonda istendiğinde USB hata ayıklama bağlantısını yalnızca güvenilen bu bilgisayar için onaylayın.
- Bilgisayarda Chrome açın ve adres çubuğuna chrome://inspect/#devices yazın.
- Devices ekranında USB cihazlarını bulma seçeneğinin etkin olduğunu doğrulayın.
- Telefonun bilgisayarda listelendiğini ve cihaz onayının tamamlandığını kontrol edin.
- Telefonda açık olan mobil sekmenin listede görünmesini bekleyin.
- İlgili sekmenin yanındaki Inspect seçeneğini kullanarak geliştirici araçlarını açın.
- Öğeyi seçme aracıyla mobil sayfadaki bölgeyi işaretleyin, HTML karşılığını ve uygulanan stilleri okuyun.
İnceleme penceresi açıldıktan sonra bilgisayardaki Select Element aracını etkinleştirip telefon ekranında merak ettiğiniz başlığa, düğmeye, görsele veya taşan bölüme dokunun. Böylece öğenin hangi kapsayıcı içinde olduğunu, hangi stil kuralından etkilendiğini ve mobil genişlikte hangi kuralın öne geçtiğini görebilirsiniz. İlk dokunuştan sonra seçim aracı kapanır; başka bir öğe incelemek için her seçimden önce bilgisayarda yeniden etkinleştirin. Stil denemelerini geçici olarak yapın; örneğin dolgu, genişlik veya görünürlük değerini değiştirip mobil yerleşimin nasıl tepki verdiğini izleyin. Kalıcı düzeltmeyi daha sonra sitenin kendi dosyalarında yapın.
iPhone Sayfasını Mac Üzerinden İnceleme
iOS tarafındaki resmi yol, Safari ve Web Inspector ilişkisine dayanır. iPhone’daki Safari sayfası, kablolu olarak bağlanan Mac’teki Safari geliştirici menüsü üzerinden görüntülenir. Bunun için iPhone tarafında Web Inspector özelliğinin, Mac tarafındaki Safari’de ise geliştirici özelliklerinin açık olması gerekir. Bağlantı kurulduğunda bağlı cihaz Mac Safari’sindeki Develop menüsünde görünür ve incelenecek sekme buradan seçilir.
Menü adları ve ayarların yeri iOS ve macOS sürümlerine göre değişebildiği için ezberlenmiş bir menü yolunu takip etmek yerine ilgili ayar ekranlarında Web Inspector, geliştirici özellikleri ve Develop menüsü ifadelerini arayın. Cihaz görünmüyorsa önce kablo bağlantısını, cihaz onayını ve iki tarafta da özelliğin gerçekten açık olduğunu denetleyin. Bilinmeyen bir bilgisayara bağlanıyorsanız onay vermeyin; inceleme işlemini yalnızca kendi Mac’inizde yapın.
- iPhone’da Web Inspector özelliğini etkinleştirin — resmi WebKit örneği: Settings → Safari → Advanced → Web Inspector.
- Mac’te Safari’nin geliştirici özelliklerini açın — resmi WebKit örneği: Safari → Settings → Advanced → Show features for web developers.
- iPhone’u güvenilir Mac’e kabloyla bağlayın ve gerekiyorsa cihaz onayını verin.
- Mac Safari’sinde Develop menüsünü açın.
- Bağlı cihaz adının menüde göründüğünü doğrulayın.
- İncelenecek iPhone sekmesini seçerek Web Inspector penceresini açın; sürümünüzde ad farklıysa resmi WebKit menüsünü kontrol edin.
Android ve iOS İçin Doğru Yöntemi Seçme
| Durum | Kullanılacak ortam | İnceleme ekranı nerede açılır? |
|---|---|---|
| Android Chrome sayfası | USB bağlantısı ve bilgisayar Chrome’undaki cihaz inceleme ekranı | Bilgisayarda, açık sekmenin yanındaki inceleme seçeneğiyle |
| iPhone Safari sayfası | Kablolu bağlı iPhone ve Mac Safari geliştirici menüsü | Mac’te, bağlı cihaz adının göründüğü geliştirici menüsünden |
Hangi yöntemi kullanacağınızı telefonunuzdaki tarayıcı belirler. Android Chrome sekmesi için bilgisayar Chrome’undaki cihaz listesi, iPhone Safari sekmesi için Mac Safari’sindeki cihaz menüsü kullanılır. Ters eşleşme aramayın; Android sekmesini Safari geliştirici menüsünde ya da iPhone sekmesini Chrome cihaz listesinde bulmayı beklemek zaman kaybettirir.
Güvenli Test Düzeni ve İş Bitiminde Yapılacaklar
Uzak inceleme, telefona geniş erişim veren bir geliştirici bağlantısıdır. Bu yüzden işlem sırasında kilitli olmayan ortak bilgisayar kullanmayın, tanımadığınız ana bilgisayarlara güvenmeyin ve hata ayıklama kanalını herkese açık bir ağda paylaşmayın. Test için üretim sitesini doğrudan kurcalamak yerine mümkünse hazırlık ya da deneme adresini kullanın. Böylece yanlış bir deneme canlı ziyaretçilerin gördüğü düzeni etkilemez.
- Yalnızca kendi bilgisayarınızı ve kendi test sayfanızı kullanın.
- Başkalarına ait sitelerde gizli veri, oturum bilgisi veya yönetim alanı aramayın.
- Bilinmeyen inceleme uygulamaları, rastgele betik enjeksiyonu ve herkese açık hata ayıklama bağlantısı kullanmayın.
- İşlem bitince telefondaki hata ayıklama iznini kapatın.
- Gerekirse bilgisayarda tanınan ana bilgisayar onayını kaldırın.
- Kabloyu çıkarmadan önce inceleme penceresini kapatın ve normal mobil görünümü yeniden denetleyin.
