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