Elements: canlı incele ve düzenle
Sayfanın canlı DOM ağacı; hesaplanmış stiller, kalıtım ve kutu modeli ile. Bir değeri değiştir, cihaz anında yeniden çizsin — mobil yerleşim hatasına giden en kısa yol.
Telefonundaki web sayfalarını bilgisayarından ayıkla
Kendi tarayıcında F12’ye basmak gibi, ama gerçek bir iPhone ya da Android’de açık sayfalar üzerinde: tarayıcı sekmeleri veya uygulama içine gömülü WebView / H5. Öğe incelemesi, konsol hataları, kaynak kesme noktaları, ağ istekleri, çerezler ve yerel depolama.
- Uygulama içi WebView istekleri
- Telefon tarayıcısı istekleri
- Cihaz ekranı panellerin yanında
- Uygulamayı değiştirmeden
Mobil web hata ayıklama, alışılmış dolambaç olmadan
Aşağıdakilerin hepsi telefonda sayfa ayıklamanın sıradan günü. Sol sütun, işlerin genelde nasıl yürüdüğü.
| Yapmak istediğin şey | Alışılmış yol | Web denetleyici ile |
|---|---|---|
| Yerleşim yalnızca telefonda bozuluyor | Düzeltmeyi tahmin et, yeniden derle, yayına al, yine bak | Öğeyi ve CSS’i canlı değiştir, cihazın anında yenilenmesini izle |
| Beyaz ekran ya da hiçbir şey yapmayan bir düğme | Telefonda konsol yok, alert ve log eklemeye başlıyorsun | Sayfanın attığı hatalar ve loglar aynen konsolda |
| Bir isteği hangi JavaScript satırının attığını bulmak | Yakalama isteği gösterir, çağıranı asla | Sources’ta kesme noktaları ve adım adım ilerleme, değişkenler gözünün önünde |
| Çerezlerde ve localStorage’da gerçekte ne olduğunu görmek | İstek başlıklarından tahmin etmek | Tam tablolar — ad, değer, alan, son kullanma, Secure, HttpOnly, SameSite — üstelik düzenlenebilir |
| Uygulamaya gömülü bir H5 sayfasını ayıklamak | Trafiğin içinde kaybolur, bağlanmanın yolu yoktur | Ait olduğu uygulamanın altında listelenir: seç ve sıradan bir sayfa gibi ayıkla |
| Uzaktan hata ayıklamayı bir şekilde çalıştırmak | Platforma göre değişen anahtarlar, gizli girişler, zahmetli adımlar | Tek pencere: cihazı seç, sayfayı seç, Ayıkla’ya bas |
| Trafik ile sayfa durumunu birlikte okumak | Bir yakalama aracı ve bir hata ayıklayıcı, yan yana ama birbirinden kopuk | İkisi tek araçta: çözülmüş istek ve onu gönderen kod |
Cihaza yönlendirilmiş gerçek geliştirici araçları
Kırpılmış bir görüntüleyici değil; masaüstünde kullandığın panellerin aynısı, telefondaki sayfaya bağlı.
Console: hatalar ve canlı REPL
Sayfanın ürettiği bütün hata ve loglar, üstüne kendi JavaScript’ini o cihazdaki o sayfanın içinde çalıştıran bir komut satırı. alert() ile ayıklama tarihe karıştı.
Sources: kesme noktaları ve adım adım
Yüklenen betikleri ve stil dosyalarını gez, kesme noktaları koy, çağrı yığınında ilerle ve işlerin ters gittiği anda değişkenleri incele.
Network: her istek, şelale görünümünde
Her istek için durum, tür, kaynak, boyut, zamanlama ve önbellek durumu; ayrıca istek sayısı, aktarılan bayt, DOMContentLoaded ve tam yüklenme süresi toplamları.
Storage: çerez, local ve session
Alan adına göre gruplanmış çerezler; son kullanma, Secure, HttpOnly ve SameSite ile birlikte, yanında localStorage ve sessionStorage — oturum hatasını çözmenin en hızlı yolu.
Cihazın ekranı senin ekranında
Android’de canlı sayfa panellerin yanında yansıtılır; fareyle tıklayıp kaydırabilirsin. Telefon ile klavye arasında gidip gelmeden, tek ekranda hem incele hem kullan.
Nasıl göründüğü
Gerçek bir telefonla alınmış gerçek oturumlar — kurgu yok.
Neleri ayıklayabilirsin
Telefonlar, tabletler, emülatörler ve simülatörler; bir de kendi bilgisayarındaki tarayıcı.
| Bu bilgisayar | iOS | Android | |
|---|---|---|---|
| Tarayıcı sekmeleri | ✓ | ✓ | ✓ |
| Uygulama içi sayfalar (WebView / WKWebView / H5) | ✓ | ✓ | ✓ |
| Emülatör / simülatör | — | ✓ | ✓ |
| Öğeleri ve stilleri canlı inceleme ve düzenleme | ✓ | ✓ | ✓ |
| Konsol, kesme noktaları ve adım adım ilerleme | ✓ | ✓ | ✓ |
| Sayfa için ağ şelalesi | ✓ | ✓ | ✓ |
| Çerez / localStorage / sessionStorage | ✓ | ✓ | ✓ |
| Cihaz ekranı panellerin yanında | — | — | ✓ |
| Kurulacak sertifika ve proxy yok | ✓ | ✓ | ✓ |
Başlamadan önce, bir kereye mahsus hazırlık
Aşağıdaki üç blok birbirinin alternatifi: hedefine uyanı yap, o kadar.
iOS cihaz
Kabloyu tak ve cihazın kilidini açık bırak. Safari için Ayarlar → Safari → Gelişmiş → Web Denetleyicisi’ni, Chrome için Chrome Ayarları → İçerik Ayarları → Web Denetleyicisi’ni aç.
Android cihaz
Kabloyu tak ve geliştirici seçeneklerinden USB hata ayıklamayı aç. Emülatörler genelde kablosuz da bulunur.
Bu bilgisayardaki tarayıcı
Chrome ya da Edge’i --remote-debugging-port=9222 ile başlat, sonra sayfa listesinde Yenile’ye bas.
Uygulama içindeki bir sayfa da mı? Bir şey daha
Yalnızca tarayıcı sekmeleri yetiyorsa bunu atla. Kendi uygulaman: Android’de bir kez setWebContentsDebuggingEnabled(true) çağır, iOS 16.4 ve üstünde WKWebView’a isInspectable = true ver. Başkasının uygulaması ya da koda dokunmadan: “Uygulama içindeki sayfaları da dahil et” kutusunu işaretle; açık uygulamaların içindeki sayfalar da listeye gelir — Android’de root gerekir, iOS’ta yalnızca geliştirici imzalı uygulamalarda çalışır.
Bu bittikten sonra her seferi sadece şu
Yeni yakalama → hedef (Bu bilgisayar / iOS / Android) → yöntem “Web denetleyici” → Yenile → sayfayı seç → Inspect. Tarayıcında eksiksiz geliştirici araçları açılır; istediğin kadarını aynı anda açabilirsin.
Uygulamaların içinde saklı sayfalar da
Uygulamaların çoğu yarı yerel, yarı web. Can sıkan hatalar genelde o gömülü H5 sayfalarında yaşar — ve sıradan araçlar orada sana hiçbir şey vermez.
Ait olduğu uygulamaya göre gruplu
Sayfa listesi uygulamalara göre düzenlenir; uygulama içindeki ödeme sayfasını bir tarayıcı sekmesinden ilk bakışta ayırır ve tam istediğine bağlanırsın.
Tek bir kutucuk
«Uygulama içindeki sayfaları da dahil et» seçeneği, o an açık uygulamaların içindeki sayfaları listeye ekler. İşareti kaldır, yine yalnızca tarayıcı sekmeleri kalır.
Geride iz kalmaz
Uygulamayı yeniden derlemez, hiçbir şey imzalamaz, cihaza yardımcı bir program kurmazsın. Oturum bitince cihaz eski hâline döner.
Trafik yakalama ile birlikte
Sayfayı burada ayıkla, aynı araçla aynı uygulamanın trafiğini yakala: sertifika sabitleyen ya da sistem proxy’sini yok sayan uygulamalarda bile çözülmüş HTTPS.
Mobil web hata ayıklama: sık sorulanlar
Telefonda bir öğeyi nasıl incelerim?
Telefonu bilgisayara USB ile bağla, Trace Eagle’ı aç, Yeni yakalama → iOS ya da Android → yöntem «Web denetleyici» seç, sayfayı işaretle ve Ayıkla’ya bas. Bilgisayarında, cihazdaki sayfanın canlı DOM ve CSS’ini gösteren eksiksiz bir Elements paneli açılır; oradaki bir değeri değiştirdiğinde telefondaki sayfa anında değişir.
Uygulamayı değiştirmeden Android WebView’i ayıklayabilir miyim?
Evet. Hata ayıklamaya zaten izin veren WebView’ler doğrudan listede görünür. Bunu açmayan uygulamalar için «Uygulama içindeki sayfaları da dahil et» kutusunu işaretle; o an açık uygulamaların sayfaları listeye eklenir. Bu, root’lu bir cihaz gerektirir ama hiçbir şey yeniden derlenmez, yeniden paketlenmez ya da kalıcı olarak kurulmaz.
iPhone veya iPad’deki bir web sayfasını nasıl ayıklarım?
Cihazı tak, kilidini aç ve Ayarlar → Safari → Gelişmiş → Web Denetleyici’yi etkinleştir (ya da Chrome Ayarları → İçerik Ayarları → Web Denetleyici). Ardından Trace Eagle’da cihazı ve sayfayı seçip Ayıkla’ya bas: Elements, Console, Sources, Network, Storage, Layers ve daha fazlasını içeren tam web denetleyici, bilgisayarının tarayıcısında açılır.
Bu, chrome://inspect ile aynı şey mi?
Aynı işi ve fazlasını, tek bir pencerede yapar. Tarayıcının uzaktan hata ayıklama sayfası yalnızca Android’deki Chromium hedeflerini tanır; burada iOS, Android ve yerel tarayıcı aynı seçicide toplanır, sayfalar uygulamaya göre gruplanır, gömülü H5 sayfaları bir kutucukla eklenir ve hemen yanında aynı uygulamanın HTTPS trafiğini çözen bir yakalama aracı bulunur.
Jailbreak ya da root gerekiyor mu?
Sıradan hata ayıklama için hayır: tarayıcı sekmeleri ve zaten izin veren uygulamalar fabrika ayarındaki cihazda çalışır. Yalnızca üçüncü taraf uygulamaların sayfalarını listeye ekleyen ek seçenek root’lu bir Android cihaz ister; iOS’ta hangi uygulamaların dahil edilebileceğine sistem karar verir.
Sertifika, proxy ya da uygulamada SDK gerekir mi?
Üçü de gerekmez. Uzaktan web hata ayıklama USB bağlantısı üzerinden yürür: kurulacak proxy, cihaza yüklenecek kök sertifika, uygulamaya eklenecek SDK ya da kitaplık yoktur.
Bunun trafik yakalamadan farkı ne?
Yakalama “ağda ne gitti” sorusunu yanıtlar: istek, yanıt, başlıklar ve gövde — çözülmüş hâlde. Web denetleyici “sayfa ne yaptı” sorusunu yanıtlar: DOM, stiller, konsol hataları, isteği hangi betiğin attığı ve daha öncesinde çerezlerde ve depolamada ne olduğu. Trace Eagle ikisini de barındırır, böylece araç değiştirmeden aralarında gidip gelirsin.
Hata ayıklama penceresi hangi tarayıcıda açılır?
Android ve yerel tarayıcı oturumları Chrome, Edge veya Brave’de açılır (Trace Eagle bunlardan birini senin için başlatır); iOS oturumları her tarayıcıda çalışır.
Emülatör ve simülatörlerle çalışır mı?
Çalışır. Android emülatörleri genellikle kablosuz olarak algılanır, bilgisayarda çalışan iOS simülatörleri de öyle — akış fiziksel cihazdakiyle birebir aynıdır.
Web denetleyici ücretsiz mi?
Evet. Trace Eagle’ın geri kalanı gibi macOS, Windows ve Linux’ta tamamen ücretsiz; ücretli özellik yok.