iPhone'da Web Sayfası Hata Ayıklama — Mac Olmadan

Tanılama ile başlayın: otomatik tarama

DOM'u kurcalamadan önce bariz olanı otomatik tarama söylesin: OpenHTML'in Tanılama listesi, sayfanın başvurduğu eksik dosyaları, gizlilik varsayılanı yüzünden engellenen uzak kaynakları, JavaScript çalışma zamanı hatalarını ve kodlama sorunlarını gösterir — mümkün olan her yerde tek dokunuşluk bir düzeltmeyle birlikte (ağa izin ver, JS'i etkinleştir, Yerel Sunucu'ya geç).

Pratikte bu, “neden boş / stilsiz / yarım çalışıyor” vakalarının çoğunu saniyeler içinde çözer; özellikle de hiç üretilmemiş dosyalara başvuran yapay zekâ üretimi sayfalarda.

Konsol: sayfa ne söylüyor

Konsol, sayfanın JavaScript'inden gelen log, warn ve error çıktısını canlı olarak yakalar. Yakalanmayan istisnalar mesajlarıyla birlikte burada belirir — etkileşim öldüğünde genellikle en hızlı ipucu budur.

Öğe Denetçisi: DOM, aygıtın üzerinde (Pro)

• Etiketini, özniteliklerini ve hesaplanmış stillerini görmek için herhangi bir öğeye dokunun.
• Bir varsayımı sınamak için öznitelikleri yerinde düzenleyin — o sınıf kaldırılınca düzen kendini toparlıyor mu?
• İncelediğiniz öğeden doğrudan kaynak görüntüleyicideki satırına atlayın.

Ağ paneli: her istek, zamanlamasıyla (Pro)

fetch, XHR ve WebSocket trafiğini URL'ler, durum kodları, boyutlar ve zamanlamalarla izleyin — ağ sekmesinin aygıttaki karşılığı. Tüm oturumu HAR dosyası olarak dışa aktarıp daha sonra masaüstündeki DevTools, Charles veya Proxyman'de inceleyebilirsiniz.

Gizlilik varsayılanını unutmayın: siz belge bazında izin verene kadar sayfalar ağa erişemez, dolayısıyla boş bir ağ paneli sayfanın çevrimdışı tutulduğu anlamına da gelebilir — Tanılama bunu size söyler.

Gerçek koşulları yeniden oluşturun

• Yerel Sunucu modu (Pro) projeleri 127.0.0.1 üzerinden sunar; böylece fetch(), ES modülleri ve JSON yükleme üretimdeki gibi davranır — ZIP web projeleri için şarttır.
• Görüntü Alanı önayarları (Pro) sayfayı telefon, tablet ve masaüstü genişliklerinde işleyerek duyarlı düzen hatalarını ortaya çıkarır.
• Masaüstü Sitesi İste (Pro), bir sayfa mobile fazla agresif uyum sağladığında masaüstü düzenini yükler.

Gerçekçi bir oturum

1. Sayfayı veya projeyi içe aktarın; Tanılama, engellenmiş bir CDN stil sayfasını ve bir konsol hatasını işaretler.
2. Belge için ağa izin verin → stiller gelir, hata kalır.
3. Konsol, app.js içinde tanımsız bir değişken gösterir; kaynak görüntüleyici ilgili satıra atlar.
4. Düzeltme, denetçide DOM özniteliğini düzenleyerek doğrulanır — sonra masa başına dönüp dosyayı düzgünce yamalar ve doğrulamak için yeniden içe aktarırsınız.