Web Denetleyici

Yalnızca telefonda bozulan bir düzen, tepki vermeyen bir düğme, beyaz kalan bir H5 sayfası — bilgisayarda F12’ye basıp nedenini anında görürsünüz. Telefonda ise genelde alert eklemek, yeniden derlemek ve tekrar bakmak kalır. Web denetleyici, aynı geliştirici araçlarını cihazdaki gerçek sayfaya doğrudan bağlar: kabloyu takın, Elements, Console, Sources, Network ve Storage bilgisayarınızda açılsın; bir değeri değiştirdiğiniz anda cihaz yeniden çizilsin.

Android sayfasında hata ayıklayan web denetleyici: solda cihazın canlı ekranı, sağda hesaplanan stillerle Elements paneli

1. Paket yakalamayla iş bölümü

İkisine de ihtiyacınız var, ama farklı soruları yanıtlarlar:

	Paket yakalama	Web denetleyici
Yanıtladığı	Ağ üzerinden ne geçti	Sayfa ne yaptı
Gösterdiği	İstekler / yanıtlar, başlıklar, gövde (şifresi çözülmüş)	DOM ağacı, hesaplanan stiller, konsol hataları, çağrı yığınları, çerezler ve depolama
Tipik soru	Bu uç nokta ne döndürdü, parametreler doğru mu	Bu isteği hangi JavaScript satırı gönderdi, bu stil neden uygulanmıyor

Yakalama isteği gösterir ama onu tetikleyeni asla göstermez; denetleyici Sources’ta bir kesme noktası koyar ve sizi tam o satıra götürür. İkisi de aynı araçta yaşar, aralarında geçiş yapmanın bir bedeli yoktur.

2. Bir kereye mahsus hazırlık

Aşağıdaki üç blok birbirinin alternatifi: hedefine uyanı yap, o kadar.

iOS cihaz

Kabloyu tak, cihazın kilidini açık bırak, ve web denetleyici anahtarını aç:

Safari: Ayarlar → Safari → Gelişmiş → Web Denetleyicisi
Chrome: Chrome Ayarları → İçerik Ayarları → Web Denetleyicisi

Bu, iOS’ta en sık atlanan adımdır. Açılmazsa cihaz algılanır ama sayfa listesi boş kalır.

Android cihaz

Kabloyu tak ve geliştirici seçeneklerinden USB hata ayıklamayı aç. Android emülatörleri 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.

# macOS
"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" --remote-debugging-port=9222

# Windows
"C:\Program Files\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222

3. Uygulama içindeki bir sayfa da mı? Bir şey daha

Yalnızca tarayıcı sekmeleri yetiyorsa bu bölümü atlayabilirsin.

Kendi uygulaman: kodda bir kez aç.

// Android: Application veya Activity başlarken bir kez çağır
WebView.setWebContentsDebuggingEnabled(true);

// iOS 16.4 ve üstü: WKWebView'ı incelenebilir yap
webView.isInspectable = true

Başkasının uygulaması, ya da koda dokunmadan: iletişim kutusunda “Uygulama içindeki sayfaları da dahil et” kutusunu işaretle; açık uygulamaların içindeki sayfalar da listeye eklenir. İşareti kaldır, yine yalnızca tarayıcı sekmeleri kalır.

	Gereksinim	Not
Android	Root’lanmış bir cihaz	Çalışan uygulamalarda WebView hata ayıklamayı açar, yeniden paketleme gerekmez
iOS	Yalnızca geliştirici imzalı uygulamalar	Sistem sınırı — App Store’dan yüklenen uygulamalar dahil edilemez

Her iki durumda da uygulama asla yeniden derlenmez, imzalanmaz ya da cihaza yardımcı bir şey kurulmaz. Oturum bittiğinde cihaz eski haline döner.

4. Hata ayıklamayı başlat

Bu bittikten sonra her oturum sadece şuna iner:

Yeni yakalama → hedef (Bu bilgisayar / iOS / Android) → yöntem “Web denetleyici” → Yenile → sayfayı seç → Inspect

Android ve Web denetleyici yönteminin seçili olduğu yeni yakalama iletişim kutusu; “Uygulama içindeki sayfaları da dahil et” işaretlendikten sonra hata ayıklanabilir sayfaların listesi

Sayfalar sahibi olan uygulamaya göre gruplanmış şekilde listelenir, böylece bir uygulama içi sayfa bir tarayıcı sekmesinden ilk bakışta ayırt edilir.
Inspect’e tıklamak, bilgisayarındaki tarayıcıda o cihazdaki o sayfaya bağlı eksiksiz geliştirici araçlarını açar.
İstediğin kadarını aynı anda açabilirsin — sayfa başına bir pencere, hepsi birlikte çalışır.

5. Neler görürsün

Bilgisayarda her gün kullandığın panellerin aynısı, telefondaki o sayfaya yönlendirilmiş halde.

Panel	Ne yapabilir
Elements	Sayfanın canlı DOM ağacı, hesaplanan stiller, kalıtım ve kutu modeliyle birlikte. Bir değeri değiştir, cihaz anında yeniden çizilir — mobil düzen hatasını bulmanın en hızlı yolu
Console	Sayfanın ürettiği her hata ve log, artı o cihazdaki o sayfa içinde doğrudan JavaScript çalıştıran bir komut satırı
Sources	Sayfanın yüklediği betikleri ve stil sayfalarını gez, kesme noktaları koy, çağrı yığınını takip et ve sorunun tam olduğu anda değişkenleri incele
Network	Sayfanın gönderdiği her istek bir şelale halinde: durum, tür, başlatan, boyut, zamanlama ve önbellek durumu; toplam istek sayısı, aktarılan bayt, DOMContentLoaded ve tam yükleme süresi de dahil
Storage	Alan adına göre gruplanmış çerezler — son kullanma, Secure, HttpOnly ve SameSite ile birlikte — localStorage ve sessionStorage’ın yanında; bir oturum durumu hatasını çözmenin en hızlı yolu

Web denetleyicinin Storage paneli: bir iPhone’da açık bir sayfanın çerez tablosu; değer, alan adı, son kullanma, Secure, HttpOnly ve SameSite sütunlarıyla

Android’de, cihazın canlı ekranı panellerin yanında yansıtılır ve fareyle tıklayıp kaydırabilirsin — inceleme ve kullanma tek bir ekranda olur, telefonla klavye arasında gidip gelmene gerek kalmaz.

6. Neler destekleniyor

	Bu bilgisayar	iOS	Android
Tarayıcı sekmeleri	✓	✓	✓
Uygulama içindeki 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 çalıştırma	✓	✓	✓
Sayfa için ağ şelalesi	✓	✓	✓
Cookie / localStorage / sessionStorage	✓	✓	✓
Cihaz ekranı panellerin yanında	—	—	✓
Kurulacak sertifika veya proxy yok	✓	✓	✓

7. Hiçbir şey görünmüyor mu? Önce bunları kontrol et

Belirti	Genelde nedeni	Ne yapmalı
Cihaz algılandı, sayfa listesi boş	iOS’ta Web Denetleyicisi kapalı ya da ekran kilitli	2. bölümü uygula, aç, kilidi açık bırak ve Yenile’ye bas
Android’de uygulama içi sayfalar görünmüyor	O WebView’da hiç hata ayıklama açılmamış	Kendi uygulaman: `setWebContentsDebuggingEnabled(true)` ekle; başkasının uygulaması: “Uygulama içindeki sayfaları da dahil et” işaretle (root gerekir)
Belirli bir iOS uygulaması hiç görünmüyor	Bir sistem sınırı	App Store yapıları dahil edilemez — yalnızca geliştirici imzalı uygulamalar olur
Yerel tarayıcı hiç sayfa listelemiyor	Hata ayıklama bağlantı noktası olmadan başlatılmış	Chrome / Edge’i `--remote-debugging-port=9222` ile yeniden başlat ve Yenile’ye bas
Inspect’e basınca hiçbir şey olmuyor	Desteklenmeyen bir tarayıcı	Android ve yerel oturumlar Chrome, Edge ya da Brave gerektirir

8. Ne zaman kullanılır

Bir hata yalnızca telefonda ortaya çıkıyorsa: düzen, dokunma alanları, yazı tipi çizimi.
Bir H5 sayfası beyaz kalıyor ya da bozuksa ve konsol hatalarını, çağrı yığınını görmen gerekiyorsa.
Bir isteği hangi betiğin gönderdiğini bilmek istiyorsan — yakalama tek başına bunu söylemez.
Bir oturum açma veya önbellek sorununu kovalıyorsan ve çerezlerde, depolamada gerçekte ne olduğunu görmen gerekiyorsa.
Bir uygulamaya gömülü H5’te hata ayıklıyorsan — sıradan araçlar burada hiçbir şey vermez.

Başlarken sayfasına dön · İlgili: İnceleme ve çözme · iOS yakalama · Android yakalama