این آموزش تعاملی به شما نشان میدهد که چگونه جاوا اسکریپت را در کنسول DevTools کروم اجرا کنید. برای یادگیری نحوه ثبت پیامها در کنسول، به بخش «شروع با ثبت پیامها» مراجعه کنید. برای یادگیری نحوه مکث کد جاوا اسکریپت و اجرای مرحله به مرحله آن، به بخش «شروع با اشکالزدایی جاوا اسکریپت» مراجعه کنید.
شکل ۱. کنسول .
نمای کلی
کنسول یک REPL است که مخفف چهار کلمه Read (خواندن)، Evaluate (ارزیابی)، Print (چاپ) و Loop (حلقه) است. این کنسول، جاوا اسکریپتی را که در آن تایپ میکنید، میخواند، کد شما را ارزیابی میکند، نتیجه عبارت شما را چاپ میکند و سپس به مرحله اول برمیگردد.
راهاندازی ابزارهای توسعه (DevTools)
این آموزش به گونهای طراحی شده است که بتوانید نسخه آزمایشی را باز کنید و خودتان تمام گردشهای کاری را امتحان کنید. وقتی خودتان به صورت عملی مراحل را دنبال کنید، احتمال بیشتری وجود دارد که بعداً گردشهای کاری را به خاطر بسپارید.
برای باز کردن کنسول ، همینجا در همین صفحه، کلیدهای Command+Option+J (مک) یا Control+Shift+J (ویندوز، لینوکس، ChromeOS) را فشار دهید.
شکل ۲. این آموزش در سمت چپ و DevTools در سمت راست.
مشاهده و تغییر جاوا اسکریپت یا DOM صفحه
هنگام ساخت یا اشکالزدایی یک صفحه، اغلب اجرای دستوراتی در کنسول برای تغییر ظاهر یا نحوهی اجرای صفحه مفید است.
به متن داخل دکمه زیر توجه کنید.
عبارت
document.getElementById('hello').textContent = 'Hello, Console!'در کنسول تایپ کنید و سپس برای ارزیابی عبارت، کلید Enter را فشار دهید. توجه کنید که متن داخل دکمه چگونه تغییر میکند.
شکل ۳. ظاهر کنسول پس از ارزیابی عبارت بالا.
زیر کدی که ارزیابی کردهاید، عبارت
"Hello, Console!"را میبینید. چهار مرحلهی REPL را به یاد بیاورید: خواندن، ارزیابی، چاپ، حلقه. پس از ارزیابی کد شما، یک REPL نتیجهی عبارت را چاپ میکند. بنابراین"Hello, Console!"باید نتیجهی ارزیابیdocument.getElementById('hello').textContent = 'Hello, Console!'باشد.
اجرای جاوا اسکریپت دلخواه که به صفحه مربوط نیست
گاهی اوقات، شما فقط یک محیط کدنویسی میخواهید که بتوانید در آن مقداری کد را آزمایش کنید، یا ویژگیهای جدید جاوا اسکریپت را که با آنها آشنا نیستید، امتحان کنید. کنسول مکان مناسبی برای این نوع آزمایشها است.
- در کنسول،
5 + 15را تایپ کنید. نتیجه20در زیر عبارت شما ظاهر میشود (مگر اینکه ارزیابی عبارت شما زمان زیادی ببرد). - برای ارزیابی عبارت،
Enterرا فشار دهید. کنسول نتیجه عبارت را در زیر کد شما چاپ میکند. شکل ۴ در زیر نشان میدهد که کنسول شما پس از ارزیابی این عبارت چگونه باید به نظر برسد. کد زیر را در کنسول تایپ کنید. سعی کنید آن را کاراکتر به کاراکتر تایپ کنید، نه اینکه آن را کپی و پیست کنید.
function add(a, b=20) { return a + b; }حالا، تابعی که تعریف کردید را فراخوانی کنید.
add(25);
شکل ۴. نحوه نمایش کنسول پس از ارزیابی عبارات بالا.
add(25)برابر با45ارزیابی میشود، زیرا وقتی تابعaddبدون آرگومان دوم فراخوانی میشود، مقدار پیشفرضbبرابر با20است.
تا زمانی که تابع شما نتیجه را برگرداند، نمیتوانید هیچ کدی را در این جلسه کنسول اجرا کنید. اگر این مدت زمان خیلی طولانی شود، میتوانید از Task Manager برای لغو محاسبات زمانبر استفاده کنید؛ با این حال، این کار باعث میشود صفحه فعلی از کار بیفتد و تمام دادههایی که وارد کردهاید از بین بروند.
مراحل بعدی
برای بررسی ویژگیهای بیشتر مربوط به اجرای جاوا اسکریپت در کنسول، به بخش اجرای جاوا اسکریپت مراجعه کنید.
DevTools به شما امکان میدهد یک اسکریپت را در میانه اجرا متوقف کنید. در حالی که متوقف شدهاید، میتوانید از کنسول برای مشاهده و تغییر window صفحه یا DOM در آن لحظه استفاده کنید. این امر یک گردش کار اشکالزدایی قدرتمند را ایجاد میکند. برای یک آموزش تعاملی ، به «شروع اشکالزدایی جاوا اسکریپت» مراجعه کنید.
کنسول همچنین از مجموعهای از مشخصکنندههای قالببندی پشتیبانی میکند. برای بررسی تمام روشهای قالببندی و قالببندی پیامهای کنسول، به بخش قالببندی و سبکبندی پیامها در کنسول مراجعه کنید.
جدا از آن، کنسول مجموعهای از عملکردهای راحت را نیز دارد که تعامل با یک صفحه را آسانتر میکند. برای مثال:
- به جای تایپ کردن
document.querySelector()برای انتخاب یک عنصر، میتوانید از$()استفاده کنید. این سینتکس از jQuery الهام گرفته شده است، اما در واقع jQuery نیست. این فقط یک نام مستعار برایdocument.querySelector()است. -
debug(function)به طور موثری یک نقطه توقف (breakpoint) در خط اول آن تابع قرار میدهد. -
keys(object)آرایهای حاوی کلیدهای شیء مشخص شده را برمیگرداند.
برای بررسی تمام توابع کمکی، به مرجع API ابزارهای کنسول مراجعه کنید.