Untuk mengakses situs web di sisi PC, kita dapat menekan F12 untuk membuka alat debugging melalui browser untuk melihat log output, permintaan jaringan, elemen halaman web, cookie, dan informasi lainnya.
Namun, ketika kita mengembangkan program dan aplikasi seluler atau mini, ada masalah abnormal, dan kita tidak dapat secara langsung melihat informasi yang tidak normal. Artikel ini merekomendasikan dua panel debugging developer front-end.
Pertama-tama unggah kode sumber:
vKonsol
Panel debugging pengembang front-end yang ringan, dapat diskalakan, untuk halaman web seluler.
- Memeriksa log konsol
- Melihat permintaan jaringan
- Lihat struktur elemen halaman
- Lihat Cookie, localStorage, dan SessionStorage
- Jalankan baris perintah JS secara manual
- Plugin khusus
Alamat:Login hyperlink terlihat.
eruda
Eruda adalah panel debugging yang dirancang untuk front-end halaman web seluler, mirip dengan versi mini DevTools, dengan fungsi utama seperti: menangkap log konsol, memeriksa status elemen, menangkap permintaan XHR, menampilkan penyimpanan lokal dan informasi cookie, dan banyak lagi.
Seret dan lepas tombol, pengaturan ukuran transparansi panel.
- Panel konsol: menangkap log konsol, log pendukung, kesalahan, info, peringatan, dir, waktu/waktuAkhir, hapus, hitung, tegaskan, tabel; Dukungan untuk placeholder, termasuk %c output gaya kustom; Mendukung pemfilteran berdasarkan jenis log dan ekspresi reguler; Eksekusi skrip JavaScript didukung.
- Panel Elemen: Melihat konten dan properti tag; Lihat gaya aplikasi Anda di DOM; Dukungan untuk menyoroti elemen halaman; Mendukung pemilihan klik langsung di layar; Lihat jenis peristiwa yang terikat pada DOM.
- Panel jaringan: Tangkap permintaan dan lihat informasi seperti data yang dikirim, header yang ditampilkan, dan konten yang ditampilkan.
- Panel Sumber Daya: Lihat dan hapus localStorage, sessionStorage, dan cookie. Lihat skrip pemuatan halaman dan file gaya; Lihat gambar muat halaman.
- Panel Sumber: Melihat kode sumber halaman; Format HTML, CSS, KODE JS, dan data JSON.
- Panel info: URL keluaran dan Agen Pengguna; Mendukung konten output khusus.
- Panel cuplikan: tambahkan batas ke elemen halaman; Tambahkan stempel waktu untuk menyegarkan halaman; Cuplikan kode kustom didukung.
Alamat:Login hyperlink terlihat. |
Diposting pada 29/06/2020 15.36.20
|
|
|
|
Tuan tanah|
Diposting pada 08/02/2025 13.44.17
|
