پیام‌ها را در کنسول ثبت کنید

Kayce Basques

این آموزش تعاملی به شما نشان می‌دهد که چگونه پیام‌ها را در کنسول Chrome DevTools ثبت و فیلتر کنید.

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

نسخه آزمایشی و DevTools را تنظیم کنید

این آموزش به گونه‌ای طراحی شده است که بتوانید نسخه آزمایشی را باز کنید و خودتان تمام گردش‌های کاری را امتحان کنید. وقتی خودتان به صورت عملی مراحل را دنبال کنید، احتمال بیشتری وجود دارد که بعداً گردش‌های کاری را به خاطر بسپارید.

1. نسخه نمایشی را باز کنید.

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

   

3. روی نسخه نمایشی فوکوس کنید و سپس کلیدهای Control + Shift + J یا Command + Option + J (مک) را فشار دهید تا DevTools باز شود. به طور پیش‌فرض DevTools در سمت راست نسخه نمایشی باز می‌شود.

   

4. اختیاری: DevTools را به پایین پنجره متصل کنید یا آن را از حالت اتصال خارج کرده و در یک پنجره جداگانه قرار دهید .

   DevTools به پایین نسخه آزمایشی متصل شده است:

   DevTools در یک پنجره جداگانه از داک خارج شد:

مشاهده پیام‌های ثبت شده از جاوا اسکریپت

بیشتر پیام‌هایی که در کنسول می‌بینید از طرف توسعه‌دهندگان وب است که جاوا اسکریپت صفحه را نوشته‌اند. هدف این بخش معرفی انواع مختلف پیام‌هایی است که احتمالاً در کنسول خواهید دید و توضیح نحوه ثبت هر نوع پیام از طریق جاوا اسکریپت خودتان است.

1. روی دکمه‌ی «اطلاعات ورود» در دمو کلیک کنید. Hello, Console! وارد کنسول می‌شود.

   

2. در کنار پیام Hello, Console! در کنسول ، روی log.js:2 کلیک کنید. پنل Sources باز می‌شود و خطی از کد که باعث ثبت پیام در کنسول شده است را هایلایت می‌کند.

   

   این پیام زمانی ثبت شد که جاوا اسکریپت صفحه، console.log('Hello, Console!') را فراخوانی کرد.

3. با استفاده از هر یک از گردش‌های کاری زیر به کنسول برگردید:

   • روی تب کنسول کلیک کنید.
   • کلیدهای Control + [ یا Command + [ (مک) را فشار دهید تا کنسول در حالت فوکوس قرار گیرد.
   • منوی Command را باز کنید ، شروع به تایپ Console کنید، دستور Show Console Panel را انتخاب کنید و سپس Enter را بزنید.

4. روی دکمه‌ی هشدار ورود به سیستم در دمو کلیک کنید. Abandon Hope All Ye Who Enter در کنسول لاگین می‌شود.

   

   پیام‌هایی که به این شکل قالب‌بندی شده‌اند، هشدار هستند.

5. اختیاری: برای مشاهده کدی که باعث شده پیام به این شکل قالب‌بندی شود، روی log.js:12 کلیک کنید و سپس پس از اتمام کار، به Console برگردید. این کار را هر زمان که می‌خواهید کدی را که باعث شده پیامی به روش خاصی ثبت شود، مشاهده کنید، انجام دهید.

6. روی باز کردن کلیک کنید آیکونی در جلوی عبارت Abandon Hope All Ye Who Enter . ابزار توسعه (DevTools) ردپای پشته (stack trace) منتهی به فراخوانی را نشان می‌دهد.

   

   ردگیری پشته به شما می‌گوید که تابعی به نام logWarning فراخوانی شده است که به نوبه خود تابعی به نام quoteDante را فراخوانی کرده است. به عبارت دیگر، فراخوانی که ابتدا اتفاق افتاده است در پایین ردگیری پشته قرار دارد. می‌توانید ردگیری‌های پشته را در هر زمانی با فراخوانی console.trace() ثبت کنید.

7. روی «ثبت خطا» کلیک کنید. پیام خطای زیر ثبت می‌شود: I'm sorry, Dave. I'm afraid I can't do that.

   

8. روی جدول ثبت وقایع کلیک کنید. جدولی درباره هنرمندان مشهور در کنسول ثبت می‌شود.

   

   توجه داشته باشید که ستون birthday فقط برای یک ردیف پر شده است. کد را بررسی کنید تا دلیل آن را بفهمید.

9. روی گروه ثبت وقایع کلیک کنید. نام ۴ لاک‌پشت معروف و مبارز با جرم و جنایت تحت برچسب Adolescent Irradiated Espionage Tortoises گروه‌بندی شده‌اند.

   

10. روی «ثبت سفارشی» کلیک کنید. پیامی با حاشیه قرمز و پس‌زمینه آبی در کنسول ثبت می‌شود.

    

ایده اصلی در اینجا این است که وقتی می‌خواهید پیام‌ها را از جاوا اسکریپت خود در کنسول ثبت کنید، از یکی از متدهای console استفاده می‌کنید. هر متد، پیام‌ها را به طور متفاوتی قالب‌بندی می‌کند.

حتی روش‌های بیشتری از آنچه در این بخش نشان داده شده است، وجود دارد. در پایان آموزش، نحوه بررسی بقیه روش‌ها را خواهید آموخت.

مشاهده پیام‌های ثبت‌شده توسط مرورگر

مرورگر پیام‌ها را نیز در کنسول ثبت می‌کند. این معمولاً زمانی اتفاق می‌افتد که مشکلی در صفحه وجود داشته باشد.

1. روی «علت ۴۰۴» کلیک کنید. مرورگر خطای شبکه 404 را ثبت می‌کند زیرا جاوا اسکریپت صفحه سعی کرده فایلی را که وجود ندارد، دریافت کند.

   

2. روی «علت خطا» کلیک کنید. مرورگر یک TypeError ثبت نشده را ثبت می‌کند زیرا جاوا اسکریپت در تلاش است تا یک گره DOM را که وجود ندارد، به‌روزرسانی کند.

   

3. روی منوی کشویی Log Levels کلیک کنید و در صورت غیرفعال بودن، گزینه Verbose را فعال کنید. در بخش بعدی درباره فیلتر کردن بیشتر خواهید آموخت. برای اطمینان از قابل مشاهده بودن پیام بعدی که ثبت می‌کنید، باید این کار را انجام دهید. توجه: اگر منوی کشویی Default Levels غیرفعال باشد، ممکن است لازم باشد نوار کناری کنسول را ببندید. برای اطلاعات بیشتر در مورد نوار کناری کنسول، در زیر بر اساس منبع پیام فیلتر کنید.

   

4. روی «علت نقض» کلیک کنید. صفحه برای چند ثانیه غیرفعال می‌شود و سپس مرورگر پیام [Violation] 'click' handler took 3000ms در کنسول ثبت می‌کند. مدت زمان دقیق ممکن است متفاوت باشد.

   

فیلتر کردن پیام‌ها

در بعضی از صفحات، خواهید دید که کنسول مملو از پیام می‌شود. DevTools روش‌های مختلفی برای فیلتر کردن پیام‌هایی که به کار مورد نظر مربوط نیستند، ارائه می‌دهد.

نکته کلیدی: کنسول فقط پیام‌های خروجی را فیلتر می‌کند، تمام ورودی‌هایی که در کنسول تایپ کرده‌اید در آنجا باقی می‌مانند.

فیلتر بر اساس سطح لاگ

به هر متد console.* یک سطح شدت اختصاص داده می‌شود: Verbose ، Info ، Warning یا Error . برای مثال، console.log() یک پیام در سطح Info است، در حالی که console.error() یک پیام در سطح Error است.

نکته: برای فهرست کامل متدهای console.* و سطوح شدت آنها، به مرجع Console API مراجعه کنید.

برای فیلتر کردن بر اساس سطح لاگ:

1. روی منوی کشویی Log Levels کلیک کنید و Errors را غیرفعال کنید. یک سطح زمانی غیرفعال است که دیگر علامت تیک در کنار آن وجود نداشته باشد. پیام‌های Error -level ناپدید می‌شوند.

   

2. دوباره روی منوی کشویی Log Levels کلیک کنید و Errors را دوباره فعال کنید. پیام‌های Error -level دوباره ظاهر می‌شوند.

نکته کلیدی: کنسول همیشه فیلتر کشویی که اعمال می‌کنید را به خاطر می‌سپارد. این فیلتر در تمام صفحات و همچنین صفحه، ابزارهای توسعه (DevTools) و بارگذاری مجدد کروم باقی می‌ماند. برای اعمال سریع یک فیلتر موقت، از نوار کناری (Sidebar ) استفاده کنید.

فیلتر بر اساس متن

وقتی می‌خواهید فقط پیام‌هایی را مشاهده کنید که دقیقاً شامل یک رشته هستند، آن رشته را در کادر فیلتر تایپ کنید.

1. عبارت Dave را در کادر فیلتر تایپ کنید. تمام پیام‌هایی که شامل رشته‌ی Dave نباشند، پنهان می‌شوند.

   

2. Dave از کادر فیلتر حذف کنید. همه پیام‌ها دوباره ظاهر می‌شوند.

فیلتر بر اساس عبارت منظم

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

1. عبارت /^[AH]/ را در کادر فیلتر تایپ کنید. برای توضیح عملکرد آن، این الگو را در RegExr تایپ کنید.

   

2. عبارت /^[AH]/ را از کادر فیلتر حذف کنید. همه پیام‌ها دوباره قابل مشاهده هستند.

فیلتر بر اساس منبع پیام

وقتی می‌خواهید فقط پیام‌هایی را که از یک URL خاص آمده‌اند مشاهده کنید، از نوار کناری استفاده کنید.

نکته کلیدی: فیلترهای نوار کناری موقتی هستند. کنسول چنین فیلترهایی را در تمام صفحات و همچنین صفحه، DevTools و بارگذاری مجدد کروم حفظ نمی‌کند.

1. روی نمایش نوار کناری کنسول کلیک کنید .

   

2. روی باز کردن کلیک کنید نماد کنار ۱۲ پیام . نوار کناری لیستی از URL هایی را نشان می دهد که باعث ثبت پیام ها شده اند. برای مثال، log.js باعث ثبت ۱۱ پیام شده است.

   

فیلتر بر اساس پیام‌های کاربر

پیش از این، وقتی روی Log Info کلیک می‌کردید، اسکریپتی به نام console.log('Hello, Console!') می‌شد تا پیام را در کنسول ثبت کند. پیام‌هایی که از جاوا اسکریپت مانند این ثبت می‌شوند، پیام‌های کاربر نامیده می‌شوند. در مقابل، وقتی روی Cause 404 کلیک می‌کردید، مرورگر یک پیام سطح Error ثبت می‌کرد که بیان می‌کرد منبع درخواستی یافت نشد. پیام‌هایی مانند این، پیام‌های مرورگر در نظر گرفته می‌شوند. می‌توانید از نوار کناری برای فیلتر کردن پیام‌های مرورگر و نمایش فقط پیام‌های کاربر استفاده کنید.

1. روی ۹ پیام کاربر کلیک کنید. پیام‌های مرورگر پنهان هستند.

   

2. برای نمایش مجدد همه پیام‌ها، روی ۱۲ پیام کلیک کنید.

از کنسول در کنار هر پنل دیگری استفاده کنید

اگر در حال ویرایش استایل‌ها هستید، اما نیاز دارید که به سرعت لاگ کنسول را برای چیزی بررسی کنید، چه باید بکنید؟ از Drawer استفاده کنید.

1. روی برگه عناصر کلیک کنید.

2. کلید Escape را فشار دهید. تب Console در Drawer باز می‌شود. این تب تمام ویژگی‌های Console را که در طول این آموزش استفاده کرده‌اید، دارد.

   

مراحل بعدی

تبریک می‌گویم، شما آموزش را به پایان رساندید. برای دریافت تروفی خود، روی Dispense Trophy کلیک کنید.

• برای بررسی ویژگی‌ها و گردش‌های کاری بیشتر مربوط به رابط کاربری کنسول، به مرجع کنسول مراجعه کنید.
• برای کسب اطلاعات بیشتر در مورد تمام متدهای console که در بخش «مشاهده پیام‌های ثبت‌شده از جاوا اسکریپت» نشان داده شده‌اند و بررسی سایر متدهای console که در این آموزش پوشش داده نشده‌اند، به «مرجع API کنسول» مراجعه کنید.
• برای بررسی کارهای دیگری که می‌توانید با DevTools انجام دهید، به بخش «شروع به کار» مراجعه کنید.
• برای کسب اطلاعات بیشتر در مورد تمام روش‌های قالب‌بندی و استایل‌بندی console به بخش پیام‌های قالب‌بندی و استایل‌بندی در کنسول مراجعه کنید.