PC tarafında web sitesine erişmek için, F12 tuşuna basarak tarayıcı üzerinden hata ayıklama aracını açabilir ve çıktı kayıtlarını, ağ isteklerini, web sayfası öğelerini, çerezleri ve diğer bilgileri görebiliriz.
Ancak, mobil veya mini programlar ve uygulamalar geliştirirken anormal bir sorun ortaya çıkar ve anormal bilgileri doğrudan göremeyiz. Bu makale, iki ön uç geliştirici hata ayıklama paneli öneriyor.
İlk olarak kaynak kodunu yükleyin:
vConsole
Mobil web sayfaları için hafif, ölçeklenebilir, ön uç geliştirici hata ayıklama paneli.
- Konsol kayıtlarını kontrol edin
- Ağ taleplerini görüntüleyin
- Sayfa öğesi yapısına bakın
- Cookies, localStorage ve SessionStorage'a göz atın.
- JS komut satırını manuel olarak çalıştırın
- Özel eklentiler
Adres:Bağlantı girişi görünür.
eruda
Eruda, mobil web sayfalarının ön kısmı için tasarlanmış bir hata ayıklama panelidir; DevTools'un mini bir versiyonuna benzer şekilde, konsol günlüklerini yakalamak, eleman durumunu kontrol etmek, XHR isteklerini yakalamak, yerel depolama ve çerez bilgilerini görüntülemek gibi temel işlevlere sahiptir.
Düğme sürükle ve bırak, panel şeffaflık boyutu ayarı.
- Konsol paneli: konsol kayıtlarını yakalar, destek log, error, info, warn, dir, time/timeEnd, clear, count, assert, table; %c özel stil çıkışı dahil olmak üzere yer tutucular desteği; Log türü ve düzenli ifadeye göre filtreleme desteği; JavaScript script çalıştırma desteklenmektedir.
- Öğeler paneli: Etiket içeriği ve özellikleri görüntüleyin; Uygulamanızın DOM'da nasıl tarz işlediğine bakın; Sayfa öğelerini vurgulama desteği; Ekranda doğrudan tıklama seçimini destekle; DOM'da bağlı etkinlik türlerini görün.
- Ağ paneli: İstekleri yakalayın ve gönderilen veriler, iade başlıkları ve geri gönderilen içerik gibi bilgileri görüntüleyin.
- Kaynaklar paneli: localStorage, sessionStorage ve çerezleri görüntüleyin ve temizleyin. Sayfa yükleme betiklerini ve stil dosyalarını görüntüleyin; Sayfa yükleme görüntülerini görüntüleyin.
- Kaynaklar paneli: Sayfanın kaynak kodunu görüntüleyin; HTML, CSS, JS kodunu ve JSON verilerini formatlayın.
- Bilgi paneli: çıkış URL'si ve Kullanıcı Ajanı; Özel çıkış içeriğini destekleyin.
- Snippets paneli: sayfa öğelerine kenar ekleyin; Sayfayı yenilemek için bir zaman damgası ekleyin; Özel kod parçaları destekleniyor.
Adres:Bağlantı girişi görünür. |