Memahami dan Menggunakan Javascript Console API secara Terperinci

Jika anda suka artikel saya, anda boleh belikan saya kopi :)

---

API konsol digunakan untuk nyahpepijat, mencetak mesej dan memindahkan pelbagai maklumat ke konsol, terutamanya dalam masa jalan JavaScript seperti pelayar dan Node.js. Tetapi untuk menggunakan api konsol dengan betul, anda perlu mengetahui dengan tepat apa itu API konsol.

Dalam artikel ini, Saya akan menerangkan API konsol kepada anda. API Konsol ialah objek. Objek ini mempunyai kunci dan apabila anda menulis kaedah konsol, anda mengakses nilai kunci dalam objek konsol.

---

Sekarang, saya akan menerangkan kepada anda dengan mengekodkan objek konsol saya sendiri supaya anda boleh memahami logik cara kaedah log berfungsi dalam API konsol.

const customConsole = {
    log: function(message) {
        const timestamp = new Date().toISOString();
        const output = `[${timestamp}] LOG: ${message}`;
        alert(output); // Displaying the output (replace with console.log in a real scenario)
    }
};

customConsole.log("Hello, this is a custom console log!");

Cuba baca kod. Seperti yang dapat dilihat dalam kod, saya mencipta objek konsol tersuai dan menentukan kunci untuk objek ini, dan nilai kunci ini ialah fungsi. Kemudian saya mengakses kekunci log objek ini.

---

Akibatnya, API konsol bukan sahaja mempunyai kaedah "log". Jadi berapa ramai yang ada? Jom ketahui sekarang.

Seperti yang dilihat dalam foto, objek konsol mempunyai lebih daripada satu kunci dan nilai kunci ini. Nilai ini adalah fungsi.

Kita boleh mengakses fungsi ini dengan objek konsol.

console.error()
console.warn()

Sekarang mari kita pelajari fungsi beberapa fungsi ini.

---

1. console.debug()

console.debug , fungsi dalam JavaScript yang digunakan untuk tujuan nyahpepijat dalam konsol penyemak imbas. Secara lalai, output daripada kaedah console.debug() tidak akan kelihatan dalam Alat pembangun Chrome.

Contoh :

function subtract(a, b) {
    console.debug("subtract function called:", { a, b });
    const result = a - b;

    if (result > 0) {
        console.debug("Result is positive.");
    } else if (result < 0) {
        console.debug("Result is negative.");
    } else {
        console.debug("Result is zero.");
    }

    return result;
}


let result = subtract(10, 5);  

Output :

output daripada kaedah console.debug() tidak akan kelihatan dalam alat pembangun Chrome.

---

2. console.error()

Ia ialah kaedah yang digunakan dalam JavaScript untuk mencetak mesej ralat ke konsol. Ia digunakan untuk memudahkan penyahpepijatan apabila ralat berlaku. mesej mungkin menerima pemformatan khas, seperti warna merah dan ikon ralat.

Contoh :

async function fetchData(ıd) {
    try {
        const response = await fetch(`https://jsonplaceholder.typicode.com/posts/${ıd}`);

        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }

        const data = await response.json();
        console.log("posts data fetched successfully:", data);
        return data;

    } catch (error) {
        console.error(" error posts data :", error.message);
    }
}

fetchData(1);

Jika terdapat ralat semasa mengambil data, ini ialah outputnya :

---

3. console.warn()

Ia adalah kaedah yang digunakan dalam JavaScript untuk mencetak masalah yang berpotensi atau situasi yang memerlukan perhatian konsol. Ia digunakan untuk memudahkan penyahpepijatan apabila ralat berlaku. mesej mungkin menerima pemformatan khas, seperti warna kuning dan ikon amaran.

Contoh :

const customConsole = {
    log: function(message) {
        const timestamp = new Date().toISOString();
        const output = `[${timestamp}] LOG: ${message}`;
        alert(output); // Displaying the output (replace with console.log in a real scenario)
    }
};

customConsole.log("Hello, this is a custom console log!");

---

4. console.dir()

Kaedah console.dir() memaparkan senarai sifat bagi objek JavaScript yang ditentukan. Dalam konsol penyemak imbas, output dibentangkan sebagai penyenaraian hierarki dengan segi tiga pendedahan yang membolehkan anda melihat kandungan objek kanak-kanak.

Contoh :

console.error()
console.warn()

Output :

---

5. console.dirxml()

Kaedah console.dirxml() memaparkan pepohon interaktif unsur turunan elemen XML/HTML yang ditentukan. Jika tidak mungkin untuk dipaparkan sebagai elemen, paparan JavaScript Object ditunjukkan sebaliknya. Output dibentangkan sebagai penyenaraian hierarki nod boleh dikembangkan yang membolehkan anda melihat kandungan nod anak.

Contoh :

function subtract(a, b) {
    console.debug("subtract function called:", { a, b });
    const result = a - b;

    if (result > 0) {
        console.debug("Result is positive.");
    } else if (result < 0) {
        console.debug("Result is negative.");
    } else {
        console.debug("Result is zero.");
    }

    return result;
}


let result = subtract(10, 5);  

Output :

---

6. console.assert()

Kaedah console.assert() menulis mesej ralat ke konsol jika pernyataan itu palsu. Jika dakwaan itu benar, tiada apa yang berlaku.

Contoh :

async function fetchData(ıd) {
    try {
        const response = await fetch(`https://jsonplaceholder.typicode.com/posts/${ıd}`);

        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }

        const data = await response.json();
        console.log("posts data fetched successfully:", data);
        return data;

    } catch (error) {
        console.error(" error posts data :", error.message);
    }
}

fetchData(1);

Output :

---

7. console.count()

Kaedah console.count() merekodkan bilangan kali panggilan khusus ini ke count() telah dipanggil.

Contoh :

  if (password.length < minLength) {
        console.warn("Warning: Password must be at least 8 characters long.");
        return false; 
    }

Output :

---

Kesimpulan

Jika syarat tidak benar, ia mencetak mesej ralat. Jika syarat itu benar, ia tidak akan mencetak apa-apa.

Atas ialah kandungan terperinci Memahami dan Menggunakan Javascript Console API secara Terperinci. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!