نحوه ی استفاده از کنسول و متد های آن در جاوا اسکریپت

کنسول (Console) چیست ؟

باتوجه به پیشرفت تکنولوژی امروزه مرورگرها دارای ابزار های بسیاری هستند که می توانند به توسعه دهندگان وب در زمینه های مختلف در جهت افزایش سرعت ، رفع خطا ، کنترل بهتر داده ها و ... کمک رسانی کنند ، یکی از این ابزار های مفید کنسول است که به وسیله ی آن می توانیم کنترل بهتری بر روی کد های جاوا اسکریپت داشته ، DOM را بررسی کنیم و به صورت کلی نظارت و مدیریت بهتری بر روی کد های خود داشته باشیم.

کار با کنسول در مرورگرها

اکثر مرورگرهای وب که از HTML و XHTML پشتیبانی می‌کنند ، امکان دسترسی به Console را برای توسعه دهندگان فراهم می‌کنند .

ما به وسیله ی Console می توانیم بر روی کد های جاوا اسکریپتی خود مانند ترمینال در ادیتور های کد کار کنیم و تغییرات خود را به صورت پیش فرض و برای تست انجام دهیم ، در این بخش از مقاله به بررسی کنسول در فایرفاکس (Firefox) و کروم (Chrome) می پردازیم.

فایرفاکس (Firefox)

برای استفاده از کنسول وب در فایرفاکس ، به منوی ☰ در گوشه سمت راست بالا ، در کنار نوار آدرس رفته ، بر روی More Tools کلیک کنید بعد از آن بر روی Web Developer Tools کلیک کنید همانطور که مشاهده می کنید یک منو در پایین مرورگر شما باز می شود.

کلید های میانبر کنسول در فایرفاکس

کلید میانبر CTRL + SHIFT + K در لینوکس و ویندوز

COMMAND + OPTION + K در macOS

کلید F12 در ویندوز

کروم (Chrome)

برای باز کردن کنسول در مرورگر کروم مانند مرورگر فایرفاکس می توانید ، به منوی سمت راست بالای پنجره مرورگر رفته و More Tools و پس از آن Developer Tools را انتخاب کنید.

کلید های میانبر کنسول در کروم

کلید میانبر CTRL + SHIFT + J در لینوکس و ویندوز

COMMAND + OPTION + J در macOS

کلید F12 در ویندوز

نحوه ی کار با کنسول

در داخل کنسول مرورگر خود ، می توانید به راحتی کد های جاوا اسکریپت خود را تایپ کرده و از آن اجرا بگیرید ، برای مثال :

رشته Hello, World! را به با استفاده از تابع alert بدون استفاده از ادیتور کد اجرا می کنیم :

alert("Hello, World!");

بعد از تایپ کد های خود در کنسول از دکمه ENTER در صفحه کیبورد خود استفاده کنید تا کد های موجود در کنسول اجرا شوند.

همچنین می توانیم نتیجه کد های که در ادیتور کد ایجاد کرده ایم را با استفاده از دستور ()console.log در کنسول مشاهده کنیم.

به مثال زیر توجه کنید :

console.log("Hello, World!");

که خروجی آن در کنسول مرورگر به صورت زیر است:

  Hello, World!

استفاده از کنسول به جای ماشین حساب

با استفاده از کنسول در مروگر های وب می توانیم معادلات ریاضی را به راحتی و در سریع ترین زمان ممکن حل کنیم ، برای این کار شما مانند مثال قبل می توانید در ادیتور کد خود با استفاده از دستور ()console.log در بخش کنسول به نتیجه برسید و یا فقط عبارت ریاضی خود را در کنسول مرورگر تایپ کنید .

به مثال زیر توجه کنید :

console.log(2 + 6);

که خروجی آن در کنسول مرورگر عدد 8 می شود.

console.log(34348.2342343403285953845 * 4310.23409128534);

خروجی آن در کنسول مرورگر 148048930.17230788 می شود.

کار با متغیر ها در کنسول

به مثال زیر توجه کنید :

let today = new Date();
console.log("Today's date is " + today);

که نتیجه آن در خروجی تاریخ روز است.

با استفاده از (↑) در صفحه کیبورد خود می توانید به راحتی به دستوراتی که قبلا در کنسول ایجاد کرده اید دسترسی داشته و آن ها را مجددا اجرا یا ویرایش کنید.

استفاده از کنسول برای کنترل بهتر فایل html و css

ابزار کنسول در مرورگر ها علاوه بر کنترل بهتر بر روی کد های جاوااسکریپت این امکان را به ما می دهند تا تغییرات خود را به صورت پویا و در لحظه بر روی کد های html و css خود اعمال کنیم و پس از بررسی نهایی نتیجه را به کد های خود در ویرایشگر های کد انتقال دهیم ، فقط باید به این نکته توجه کنیم ، به محض اینکه صفحه ای که در حال ویرایش کد های آن در کنسول هستیم را بارگیری مجدد کنیم همه تغییرات به حالت اولیه بر میگردد و به تغییرات قبلی دسترسی نداریم.

در مثال زیر ما یک سند HTML ایجاد کرده ایم و میخواهیم به وسیله ی دستور ()console.log تغیراتی در ایجاد کنیم.

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Today's Date</title>
</head>

<body>

</body>

</html>

اگر فایل HTML بالا را ذخیره کنید و در مرورگر خود بارگذاری کنید ، یک صفحه خالی با عنوان Today's Date در مرورگر نمایش داده می شود در ادامه کنسول مرورگر خود را باز کنید و تغییرات را مانند مثال ایجاد کنید.

let today = new Date();
document.body.innerHTML = "<h1>Today's date is " + today + "</h1>"

که خروجی آن در کنسول یک تگ h1 با تاریخ روز است.

بررسی Method های مختلف کنسول

در این بخش از مقاله به بررسی مهمترین متد های جاوااسکریپتی موجود در کنسول مرورگر ها می پردازیم و با ایجاد مثال با هر یک بیشتر آشنا می شویم.

()console.log

متد ()console.log یکی از پرکاربرد ترین متد های کنسول است که برای خروجی یک پیام در کنسول استفاده می شود که می تواند انواع مختلف داده مانند : رشته ها، اعداد، ، آرایه ها و ... را در خروجی نمایش دهد.

سینتکس آن به صورت زیر است :

console.log(msg1, msg2, ..., obj1, obj2, ...)

به مثال های زیر توجه کنید :

console.log(123);

console.log("Hello World!");

console.log(10 + 20);

console.log(new Date());

console.log("Hello", "World", 123);

()console.assert

این متد یک شرط را بررسی می کند و در صورت نادرست بودن آن شرط ، پیامی را در کنسول نمایش می دهد ، در صورتی که شرط برقرار باشد هیچ پیامی را نمایش نمی دهد.

سینتکس آن به صورت زیر است :

console.assert(assertion, message, obj1, obj2, ...)

همانطور که در مثال زیر مشاهده می کنید حداقل دو آرگومان برای متد () console.assert نیاز است ، آرگومان اول شرط ما است که مورد بررسی قرار می گیرد و آرگومان دوم پیامی است که در صورت نادرست بودن شرط نمایش داده می شود.

console.assert(false, "Statement is false");
var num = 10;
console.assert(num > 20, "Number is less than 20");
console.assert(25 === '25', "25 is not equal to '25'", { "SomeObject": 12345 });

()console.clear

این متد زمانی مفید است که می خواهیم کنسول را قبل از ورود به سیستم پاک کنیم ، به مثال زیر توجه کنید :

console.log(10);
console.log("Hello World!");
console.clear();
console.log("All above logs cleared");

()console.count

این متد تعداد دفعاتی که متد ()count فراخوانی می شود را ثبت می کند.

مثال :

for (let i = 0; i < 5; i++) {
  console.count("Count number");
  console.log(i);
}

در صورتی که کد بالا را در کنسول اجرا کنید خروجی آن به صورت زیر است :

Count number: 1
 0
 Count number: 2
 1
 Count number: 3
 2
 Count number: 4
 3
 Count number: 5
 4

()console.dir

به وسیله ی این متد می توانیم لیستی از خصوصیات یک شیء مشخص را در خروجی ببینیم.

کد زیر را در کنسول مرورگر خود اجرا کنید :

const arr = [1,2,3,4,5];
console.dir(arr);
console.dir(document.location);

()console.error

این متد یک پیام خطا را به کنسول ارسال می کند.

سینتکس آن به صورت زیر است :

console.error(msg1, msg2, ..., obj1, obj2, ...)

به مثال زیر توجه کنید :

let num1 = 10, num2 = 0;
if (num2 !== 0) {
  console.log(num1 / num2);
}
else {
  console.error("divided by 0");
}

()console.warn

این متد یک پیام هشدار به کنسول خروجی ارسال می کند.

let n = 99999;

if (n > 10000) {
  console.warn("Number is too large");
}

()console.table

برای نمایش داده ها به صورت جدول می توانیم از این متد استفاده کنیم.

const arr = ["a", "b", "c", "d", "e"];
console.table(arr);
const user = {
  name: "Henry",
  id: "iuA98",
  age: 22
}
console.table(user);

نتیجه گیری

به صورت خلاصه می توان گفت کنسول در مرورگر ها یک ویرایشگر کد فشرده است که در لحظه تغییرات را برای ما اعمال می کند و به وسیله ی آن می توانیم کنترل بهتری بر روی کد های خود داشته باشیم.

همچنین یکی از بهترین روش ها برای شروع برنامه نویسی جاوااسکریپت استفاده از کنسول در مرورگر ها و انجام تمرین های کوچک ، کار با توابع مختلف ، کار با متغییر ها و ... در کنسول است تا علاوه بر آشنایی با سازو کار جاوااسکریپت خطا های خود را در لحظه و بهتر شناسایی کنیم و با دستورات جاوااسکریپتی بهتر آشنا شویم.

همچنین افرادی که به طراحی سایت و کار با کد های html و css می پردازند یکی از بهترین ابزار برای اعمال تغییرات بسیار و رسیدن به شکل نهایی ، استفاده از کنسول در مرورگر ها است.

نحوه ی استفاده از کنسول و متد های آن در جاوا اسکریپت

کنسول (Console) چیست ؟

کار با کنسول در مرورگرها

فایرفاکس (Firefox)

کروم (Chrome)

نحوه ی کار با کنسول

استفاده از کنسول به جای ماشین حساب

کار با متغیر ها در کنسول

استفاده از کنسول برای کنترل بهتر فایل html و css

بررسی Method های مختلف کنسول

()console.log

()console.assert

()console.clear

()console.count

()console.dir

()console.error

()console.warn

()console.table

نتیجه گیری

مقالات مشابه

نوشتن اولین برنامه جاوااسکریپت

اضافه کردن کد های جاوااسکریپت به سند html

بررسی اصول چهار گانه ی شی گرایی oop در جاوااسکریپت