API JavaScript Pembelajaran Harian: API Konsol

JavaScript mempunyai banyak API terbina dalam yang menjadikan pengaturcaraan menyeronokkan dan menarik. Tetapi mari kita nyata berapa ramai daripada mereka yang sebenarnya anda gunakan untuk potensi penuh mereka? Sepanjang 30 hari seterusnya, kami akan menyelami API ini, merangkumi ciri-ciri API tersebut dan perkara menarik yang mungkin anda terlepas pandang. Daripada perkara asas kepada perkara yang lebih maju, anda akan mendapat helah baharu sepanjang perjalanan.

Rasa terharu dengan API JavaScript? Atau mungkin anda hanya di sini untuk mempelajari sesuatu yang baru? Walau apa pun, siri ini adalah untuk anda.

Hari ini, kami bermula dengan API yang secara senyap-senyap membantu anda menyahpepijat selama ini: API Konsol. Sudah tentu, anda pernah menggunakan console.log() sebelum ini, tetapi banyak lagi yang boleh dilakukannya. Mari kita bongkar beberapa helah tersembunyinya!

Apakah itu Console API?

API Konsol ialah koleksi kaedah yang sangat berguna yang menjadikan penyahpepijatan, pengelogan dan menggambarkan data anda lebih mudah.

Tetapi mari kita hadapi itu—anda mungkin terjebak menggunakan console.log() untuk segala-galanya. Sudah tiba masanya untuk meninggalkan tabiat itu kerana banyak lagi yang boleh dilakukan oleh API ini.

Berikut ialah beberapa perkara menarik yang anda terlepas pandang:

Perkara Hebat yang Boleh Anda Lakukan dengan Console API

1. Paparkan Data dalam Jadual

Pernah merasakan log anda hanyalah teks yang tidak dapat difahami? console.table() telah mendapat sokongan anda.

Berikut ialah rupa log anda sekarang:

const fruits = [
  { name: "Apple", color: "Red" },
  { name: "Banana", color: "Yellow" },
  { name: "Grapes", color: "Green" },
];
console.log(fruits);

Keputusan:

Sekarang mari kita bersihkan:

console.table(fruits);

Keputusan:

Lebih baik, bukan? Ia lebih mudah dibaca dan kini data anda benar-benar masuk akal sepintas lalu.

2. Berhenti Menulis Berlebihan Jika Penyata dengan console.assert()

Angkat tangan anda jika anda telah menulis sedozen jika kenyataan hanya untuk mencatat ralat. Nah, berhenti berbuat demikian! console.assert() berada di sini untuk menyelamatkan hari ini.

Sebaliknya:

const isLoggedIn = false;

if (!isLoggedIn) {
  console.log("User is not logged in");
}

Cuba ini:

const isLoggedIn = false;

console.assert(isLoggedIn, "User is not logged in");

Jika syarat palsu, mesej akan direkodkan. Sangat mudah, bukan?

3. Ukur Prestasi Kod

Ingin tahu tentang berapa lama satu blok kod diambil untuk dilaksanakan? Bertanya khabar kepada console.time() dan console.timeEnd().

Berikut ialah cara anda boleh mengukur prestasi:

console.time("Loop Timer");
for (let i = 0; i < 1_000_000; i++) {}
console.timeEnd("Loop Timer");

Keputusan:

Kini anda boleh mengetahui perkara yang melambatkan apl anda!

4. Kira Berapa Kali Satu Blok Berlari

Pernah terfikir berapa kerap sekeping kod dilaksanakan? Menjejaki secara manual boleh menjadi rumit, terutamanya apabila kod anda semakin kompleks. Di situlah console.count() berguna.

Bayangkan senario ini:

const fruits = [
  { name: "Apple", color: "Red" },
  { name: "Banana", color: "Yellow" },
  { name: "Grapes", color: "Green" },
];
console.log(fruits);

Pada pandangan pertama, mungkin mudah untuk mengetahui berapa kali ucapan itu digunakan untuk nama yang bermula dengan "A." Tetapi apabila logik anda berkembang, anda mungkin kehilangan jejak.

Sekarang mari mudahkan perkara dengan console.count():

console.table(fruits);

Berikut Apa Yang Berlaku:

• Setiap kali nama yang bermula dengan "A" disambut, console.count() menambah kiraan dan melabelkannya "Mengucapkan salam kepada pengguna bermula dengan A."
• Selepas penetapan semula dengan console.countReset(), kiraan bermula baharu.

Tiada lagi meneka atau menambah kenyataan cetakan di seluruh kod anda. Hanya satu baris, dan anda telah mengetahuinya!

5. Gayakan Log Anda dengan CSS

Kadangkala, anda memerlukan log anda untuk muncul. Gunakan %c untuk menggayakan log anda dengan CSS dan menonjolkannya.

Contoh:

const isLoggedIn = false;

if (!isLoggedIn) {
  console.log("User is not logged in");
}

Keputusan:

Serlahkan ralat, amaran atau hanya berseronok dengan log anda.

6. Log Berkaitan Kumpulan Bersama

Bosan menatal log yang tidak berkesudahan? Gunakan console.group() untuk mengumpulkan log berkaitan bersama-sama.

Ini contohnya:

const isLoggedIn = false;

console.assert(isLoggedIn, "User is not logged in");

Output:

console.time("Loop Timer");
for (let i = 0; i < 1_000_000; i++) {}
console.timeEnd("Loop Timer");

Anda juga boleh menggunakan console.groupCollapsed() untuk memastikan kumpulan runtuh secara lalai.

Membungkus

API Konsol jauh lebih berkuasa daripada yang anda fikirkan. Daripada jadual kepada pengukuran prestasi, pembilang, penggayaan dan pengumpulan, terdapat alat untuk hampir setiap senario penyahpepijatan.

Ini hanyalah Hari 1 siri 30 Hari JavaScript API kami. Jika anda mendapati ini berguna, tandai halaman artikel ini untuk kemudian hari dan pastikan anda kekal—terdapat banyak lagi yang perlu dipelajari!

Dan hei, jika anda mempunyai sebarang pertanyaan, sila hantar mesej kepada saya di Twitter di @sprucekhalifa. Jangan lupa ikuti saya untuk mendapatkan lebih banyak cerapan dan kemas kini. Selamat mengekod!

Atas ialah kandungan terperinci API JavaScript Pembelajaran Harian: API Konsol. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!