Cara memaparkan data sebagai jadual dalam Konsol Pelayar

Konsol ialah alat terbina dalam penyemak imbas yang merekodkan ralat yang berlaku pada tapak web. Jika terdapat sebarang ralat - seperti pautan terputus, fungsi JavaScript tidak lengkap atau sifat CSS yang tidak diketahui - penyemak imbas akan memaparkan mesej ralat dalam Konsol.

Anda juga boleh berinteraksi dengan Console melalui shell dan Console API, yang berguna untuk menguji fungsi dan data output tertentu. Di sini, artikel itu akan menunjukkan kepada anda petua berguna untuk menggunakan Console API.

Akses Konsol pada penyemak imbas

Dalam Chrome, anda boleh memilih View > Developer > JavaScript Console untuk memaparkan Console. Selain itu, anda juga boleh menggunakan pintasan papan kekunci: Cmd+ Option+ Jpada OS X dan Ctrl+ Shift+ Jpada Windows.

Di bawah ialah Konsol Chrome tanpa ralat.

Dari sini, anda boleh mula menggunakan arahan yang disediakan dalam Console API.

Berinteraksi dengan Console

Anda boleh berinteraksi dengan Konsol penyemak imbas anda melalui Konsol itu sendiri dan dengan menambahkan JavaScript. Sebagai contoh, di sini kami meminta Konsol untuk mengeluarkan hasil "Selamat Pagi!" dengan menaip arahan console.log() terus dalam Console:

Seperti yang dinyatakan, anda juga boleh menggunakan console.log(). Console.log() boleh digunakan untuk menguji pernyataan bersyarat JavaScript. Anda boleh melihat dengan lebih jelas apabila hasilnya mengembalikan benar atau salah (benar atau salah) dengan bantuan console.log().

Berikut adalah contoh:

var a = 1;

if(a == 1) {

console.log('true');

} else {

console.log('false');

}

Kod di atas akan kembali benar, kerana pembolehubah mengandungi nombor 1 . Dalam Konsol, anda akan melihat pelayar mengeluarkan teks dengan kandungan "benar".

Data keluaran dalam bentuk jadual

Kadangkala, anda perlu memproses tatasusunan data atau senarai Objek, seperti yang ditunjukkan di bawah:

var data = [

{ name: "Andi", age: "21", city: "Tuban" },

{ name: "Ani", age: "25", city: "Trenggalek" },

{ name: "Adi", age: "30", city: "Kediri" }

];

console.table(data);

Data ini sukar dibaca apabila kami menggunakan kaedah console.log(). Kaedah console.log() akan memaparkan Array dalam paparan pokok boleh lipat, seperti yang ditunjukkan di bawah.

Apabila anda perlu berurusan dengan Array sedemikian, menggunakan console.table() ialah cara yang lebih baik untuk mengeluarkan data. Kaedah ini memaparkan data dalam format jadual. Mengambil data yang sama seperti di atas, hasilnya akan muncul seperti berikut:

Konsol penyemak imbas membantu pembangun web menangani ralat dalam tapak web. Pengguna juga boleh menggunakannya untuk memeriksa output data, seperti kaedah console.log(). Apabila anda mempunyai tatasusunan data, arahan console.table() adalah lebih berguna, kerana ia memaparkan Tatasusunan dalam format jadual yang mudah dibaca. Sila ambil perhatian bahawa console.table() hanya terpakai dalam penyemak imbas berasaskan Webkit seperti Chrome, Safari dan versi terkini Opera.

Semoga anda berjaya.