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

Kayce Basques

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

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

دمو و DevTools را تنظیم کنید

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

1. دمو را باز کنید.

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

   

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

   

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

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

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

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

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

1. روی دکمه Log Info در دمو کلیک کنید. Hello, Console! وارد کنسول می شود.

   

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

   

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

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

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

4. روی دکمه Log Warning در دمو کلیک کنید. Abandon Hope All Ye Who Enter وارد کنسول می شود.

   

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

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

6. روی Expand کلیک کنید نماد مقابل Abandon Hope All Ye Who Enter . DevTools ردیابی پشته منتهی به تماس را نشان می دهد.

   

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

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

   

8. روی Log Table کلیک کنید. جدولی در مورد هنرمندان مشهور به کنسول وارد می شود.

   

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

9. روی Log Group کلیک کنید. نام 4 لاک پشت معروف و جنایتکار تحت برچسب Adolescent Irradiated Espionage Tortoises گروه بندی شده است.

   

10. روی Log Custom کلیک کنید. پیامی با حاشیه قرمز و پس‌زمینه آبی به کنسول وارد می‌شود.

    

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

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

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

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

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

   

2. روی Cause Error کلیک کنید. مرورگر یک TypeError کشف نشده را ثبت می کند زیرا جاوا اسکریپت در تلاش است یک گره DOM را که وجود ندارد به روز کند.

   

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

   

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

   

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

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

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

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

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

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

   

2. دوباره روی منوی کشویی Log Levels کلیک کنید و Errors را دوباره فعال کنید. پیام های سطح Error دوباره ظاهر می شوند.

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

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

1. Dave در کادر متنی Filter تایپ کنید. تمام پیام هایی که رشته Dave شامل نمی شوند پنهان می شوند. همچنین ممکن است برچسب Adolescent Irradiated Espionage Tortoises را ببینید. این یک اشکال است.

   

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

با عبارت منظم فیلتر کنید

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

1. /^[AH]/ در کادر متنی Filter تایپ کنید. این الگو را در RegExr تایپ کنید تا توضیحی در مورد کاری که انجام می دهد.

   

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

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

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

1. روی Show Console Sidebar کلیک کنید .

   

2. روی Expand کلیک کنید نماد کنار 12 پیام نوار کناری فهرستی از نشانی‌های اینترنتی را نشان می‌دهد که باعث شده پیام‌ها ثبت شوند. به عنوان مثال، log.js باعث 11 پیام شد.

   

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

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

1. روی 9 پیام های کاربر کلیک کنید. پیام های مرورگر مخفی هستند.

   

2. برای نمایش مجدد همه پیام ها، روی 12 Messages کلیک کنید.

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

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

1. روی تب Elements کلیک کنید.

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

   

مراحل بعدی

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

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