Bergerak melangkaui console.log

Meneroka Konsol Penyemak Imbas: Contoh Praktikal untuk Pembangun Web

Untuk sekian lama kaedah penyahpepijatan JavaScript utama saya terdiri daripada console.log() dan console.error(). Sebaik sahaja saya belajar untuk memanfaatkan kaedah objek konsol penyemak imbas yang lain, permainan JavaScript saya pasti mengambil lompatan besar.

Di bawah ialah 8 cara saya menggunakan objek tetingkap konsol apabila bekerja melalui projek dan skrip JavaScript serta penggunaan praktikal setiap satu.

---

1. console.log() - Pengelogan Umum

Niat: Keluarkan maklumat am untuk nyahpepijat atau menjejak aliran program.

Contoh Praktikal: Gunakan console.log untuk memeriksa nilai pembolehubah:

const user = { name: 'Alice', age: 30 };
console.log('User details:', user);

Contoh Output:

---

2. console.error() - Serlahkan Ralat

Niat: Paparkan mesej ralat dalam konsol dengan surih tindanan. console.error() mempunyai pemformatan berbeza yang membantunya menonjol biasanya dengan latar belakang merah dan ikon ralat.

Contoh Praktikal: Ralat log apabila panggilan API gagal:

fetch('/api/data')
  .then(response => {
    if (!response.ok) throw new Error('Failed to fetch data');
  })
  .catch(error => console.error('Fetch error:', error));

Contoh Output:

---

3. console.warn() - Amaran Mengenai Isu Berpotensi

Niat: Serlahkan isu atau penangguhan yang tidak kritikal. console.warn() mempunyai pemformatan berbeza yang membantunya menonjol. Biasanya latar belakang kuning dengan ikon amaran.

Contoh Praktikal: Amaran tentang input pengguna yang tidak sah:

const userInput = '';
if (!userInput) console.warn('User input is empty. Default value will be used.');

Contoh Output:

---

4. console.table() - Paparkan Data dalam Format Jadual

Niat: Visualisasikan tatasusunan atau objek dalam format jadual untuk kejelasan. Bermanfaat dengan menggambarkan pelbagai objek yang besar.

Contoh Praktikal: Periksa data respons API:

const data = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
];
console.table(data);

Contoh Output:

---

5. console.group() dan console.groupEnd() - Susun Log ke dalam Kumpulan

Niat: Kumpulan log berkaitan untuk kebolehbacaan yang lebih baik.

Contoh Praktikal: Nyahpepijat respons dan metadata API:

console.group('API Response');
console.log(`Status: ${response.status}`);
console.log(`Data:`, data);
console.groupEnd();

Contoh Output:

---

6. console.time() dan console.timeEnd() - Ukur Prestasi

Niat: Jejaki berapa lama blok kod diambil untuk dilaksanakan. Baik untuk ujian prestasi dan masa menyekat.

Contoh Praktikal: Optimumkan fungsi pengisihan:

const user = { name: 'Alice', age: 30 };
console.log('User details:', user);

Contoh Output:

---

7. console.assert() - Andaian Ujian

Niat: Log mesej hanya apabila syarat adalah palsu. Berguna apabila anda ingin menyampaikan mesej ralat secara bersyarat. Lazimnya mempunyai latar belakang merah dengan ikon amaran dan teks "Menegaskan gagal."

Contoh Praktikal: Sahkan kebenaran pengguna:

fetch('/api/data')
  .then(response => {
    if (!response.ok) throw new Error('Failed to fetch data');
  })
  .catch(error => console.error('Fetch error:', error));

Contoh Output:

---

8. console.trace() - Tunjukkan Tindanan Panggilan

Niat: Paparkan timbunan panggilan untuk mengesan panggilan fungsi. Jejaki langkah yang membawa kepada panggilan console.trace(), yang berguna apabila data dijejaki melalui berbilang panggilan fungsi.

Contoh Praktikal: Nyahpepijat tempat fungsi digunakan:

const userInput = '';
if (!userInput) console.warn('User input is empty. Default value will be used.');

Contoh Output:

---

9. console.count() - Kira Kejadian Log

Niat: Kira berapa kali baris kod telah dilaksanakan. Berguna dalam keadaan di mana anda perlu mengira bilangan kali fungsi dipanggil atau gelung telah digelung.

Contoh Praktikal: Kira gelung:

const data = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
];
console.table(data);

Contoh Output:

---

10. console.clear() - Bersihkan Konsol

Niat: Kosongkan log yang bersepah semasa ujian.

Penggunaan Praktikal:

console.group('API Response');
console.log(`Status: ${response.status}`);
console.log(`Data:`, data);
console.groupEnd();

---

Atas ialah kandungan terperinci Bergerak melangkaui console.log. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!