Terokai semua ciri konsol dalam JavaScript

Berikut ialah artikel yang sedia untuk diterbitkan di Dev.to dengan contoh konsol dalam JavaScript, berstruktur dan diformat untuk mudah dibaca:

Terokai semua ciri konsol dalam JavaScript

JavaScript ialah bahasa yang berkuasa untuk pembangunan web, tetapi kadangkala sukar untuk menyahpepijat kod anda dengan berkesan. Nasib baik, ciri konsol menawarkan banyak kaedah mudah untuk membantu anda memeriksa, mendiagnosis dan memantau tingkah laku aplikasi anda.

Dalam artikel ini, kami akan meneroka semua varian konsol yang tersedia, memperincikan cara dan masa untuk menggunakannya dengan contoh yang jelas.

1. console.log()

Ini adalah kaedah yang paling banyak digunakan dalam keluarga konsol. Ia memaparkan mesej dalam konsol, selalunya digunakan untuk menjejaki pelaksanaan umum program anda.

console.log("Message général");

2. console.error()

Kaedah ini digunakan untuk melaporkan ralat dalam konsol. Mesej ralat biasanya muncul dalam warna merah dalam konsol penyemak imbas.

console.error("Erreur détectée !");

3. console.warn()

console.warn() berguna untuk memaparkan amaran. Mesej muncul dalam warna kuning dalam konsol, yang menarik perhatian tanpa menunjukkan ralat yang serius.

console.warn("Attention !");

4. console.info()

Walaupun serupa dengan console.log(), kaedah console.info() digunakan untuk menunjukkan maklumat penting.

console.info("Information importante");

5. console.debug()

console.debug() adalah untuk mesej nyahpepijat. Mesej ini kadangkala boleh disembunyikan secara lalai dalam sesetengah persekitaran, tetapi ia bagus untuk penyahpepijatan yang mendalam.

console.debug("Message de débogage");

6. console.table()

Ciri yang sangat berguna untuk memaparkan objek atau jadual sebagai jadual (grid) dalam konsol. Sesuai untuk menggambarkan data berstruktur.

console.table([{ nom: "Alice", âge: 25 }, { nom: "Bob", âge: 30 }]);

7. console.dir()

Memaparkan representasi objek yang interaktif dan boleh diperiksa, membolehkan anda melihat sifatnya dengan lebih terperinci.

console.dir(document.body);

8. console.time() dan console.timeEnd()

Kaedah ini membolehkan anda mengukur masa pelaksanaan antara kedua-dua panggilan. Sangat berguna untuk menguji prestasi sebahagian kod anda.

console.time("chrono");
for (let i = 0; i < 1000000; i++) {} // Simulation d'une tâche longue
console.timeEnd("chrono");

9. console.group() dan console.groupEnd()

Kaedah ini membolehkan anda mengumpulkan berbilang mesej dalam konsol, membentuk hierarki yang mudah dikembangkan atau diruntuhkan.

console.group("Groupe de messages");
console.log("Message dans le groupe");
console.log("Autre message dans le groupe");
console.groupEnd();

10. console.groupCollapsed()

Serupa dengan console.group(), tetapi kumpulan itu diruntuhkan secara lalai.

console.groupCollapsed("Groupe réduit");
console.log("Message dans le groupe réduit");
console.groupEnd();

11. console.trace()

Jika anda ingin melihat surih lengkap tindanan panggilan yang membawa ke tempat kod dilaksanakan, gunakan console.trace().

function functionOne() {
    functionTwo();
}
function functionTwo() {
    console.trace("Trace de la pile");
}
functionOne();

12. console.assert()

Kaedah ini memaparkan mesej hanya jika syarat yang diberikan adalah palsu. Ia sesuai untuk mengesahkan hipotesis semasa pembangunan.

console.assert(1 === 2, "Ce message s'affiche car l'assertion est fausse");

13. console.clear()

Gunakan kaedah ini untuk mengosongkan konsol. Praktikal untuk membersihkan persekitaran yang bersepah.

console.clear(); // Efface la console

14. console.count() dan console.countReset()

Kaedah ini mengira bilangan kali label tertentu telah dipanggil dan membolehkan anda menetapkan semula pembilang dengan console.countReset().

console.count("compteur");
console.count("compteur");
console.countReset("compteur");
console.count("compteur");

15. konsol.ingatan

Pada sesetengah penyemak imbas (seperti Chrome), anda boleh menggunakan console.memory untuk memaparkan maklumat tentang pengurusan memori.

console.log(console.memory);

Contoh gabungan

Berikut ialah contoh yang lebih lengkap yang menghimpunkan beberapa kaedah konsol yang dinyatakan di atas untuk menunjukkan kepada anda kegunaannya dalam situasi yang lebih kompleks.

console.log("Démarrage du programme");
console.group("Boucle");
for (let i = 0; i < 3; i++) {
    console.log(`Itération : ${i}`);
    if (i === 1) {
        console.warn("Attention à l'itération 1");
    }
}
console.groupEnd();
console.error("Fin du programme avec erreur");
console.time("Temps d'exécution");
// Code simulant une tâche
for (let j = 0; j < 1000000; j++) {} 
console.timeEnd("Temps d'exécution");

Kesimpulan

Keluarga kaedah konsol dalam JavaScript jauh lebih besar daripada kaedah console.log() ringkas. Dengan memahami dan menggunakan ciri berbeza ini, anda akan dapat memperbaik penyahpepijatan kod anda dan memperoleh cerapan berharga semasa pembangunan.

Jangan teragak-agak untuk menggunakan kaedah ini dalam projek anda dan berseronok meneroka perkara yang boleh mereka tawarkan kepada anda!

Anda boleh menyalin dan menggunakan blok kod ini dalam projek anda sendiri untuk meneroka kuasa konsol secara mendalam. ?

// console.log() : Affiche un message général
console.log("Message général");

// console.error() : Affiche un message d'erreur
console.error("Erreur détectée !");

// console.warn() : Affiche un avertissement
console.warn("Attention !");

// console.info() : Affiche des informations
console.info("Information importante");

// console.debug() : Affiche un message de débogage (souvent masqué par défaut)
console.debug("Message de débogage");

// console.table() : Affiche un tableau de données dans la console
console.table([{ nom: "Alice", âge: 25 }, { nom: "Bob", âge: 30 }]);

// console.dir() : Affiche une représentation interactive d'un objet
console.dir(document.body);

// console.time() et console.timeEnd() : Chronomètre pour mesurer le temps d'exécution
console.time("chrono");
for (let i = 0; i < 1000000; i++) {} // Code simulant une tâche longue
console.timeEnd("chrono");

// console.group() et console.groupEnd() : Groupe les messages dans la console
console.group("Groupe de messages");
console.log("Message dans le groupe");
console.log("Autre message dans le groupe");
console.groupEnd();

// console.groupCollapsed() : Groupe réduit par défaut
console.groupCollapsed("Groupe réduit");
console.log("Message dans le groupe réduit");
console.groupEnd();

// console.trace() : Affiche une trace de la pile d'appels
function functionOne() {
    functionTwo();
}
function functionTwo() {
    console.trace("Trace de la pile");
}
functionOne();

// console.assert() : Affiche un message uniquement si l'assertion est fausse
console.assert(1 === 2, "Ce message s'affiche car l'assertion est fausse");

// console.clear() : Efface la console
// console.clear(); // Décommentez cette ligne pour effacer la console

// console.count() et console.countReset() : Comptabilise le nombre d'appels avec une étiquette
console.count("compteur");
console.count("compteur");
console.countReset("compteur");
console.count("compteur");

// console.memory : Affiche des informations sur la mémoire utilisée (fonctionne dans certains environnements)
console.log(console.memory);

// Exemple combiné de plusieurs fonctions console :
console.log("Démarrage du programme");
console.group("Boucle");
for (let i = 0; i < 3; i++) {
    console.log(`Itération : ${i}`);
    if (i === 1) {
        console.warn("Attention à l'itération 1");
    }
}
console.groupEnd();
console.error("Fin du programme avec erreur");
console.time("Temps d'exécution");
// Code simulant une tâche
for (let j = 0; j < 1000000; j++) {} 
console.timeEnd("Temps d'exécution");

Merci pour la lecture !

Vous avez des questions ou des suggestions ? Laissez un commentaire ci-dessous, ou partagez d'autres astuces console que vous utilisez dans vos projets !

Atas ialah kandungan terperinci Terokai semua ciri konsol dalam JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!