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

کیسی باسکی
کیسی باسکی

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

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

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

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

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

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

    این آموزش در سمت چپ، و نسخه ی نمایشی در سمت راست.

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

    DevTools در سمت راست نسخه نمایشی باز می شود.

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

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

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

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

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

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

    کنسول پس از کلیک بر روی Log Info.

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

    DevTools پانل Sources را پس از کلیک روی 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 وارد کنسول می شود.

    کنسول پس از کلیک روی Log Warning.

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

  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 ثبت می کند زیرا جاوا اسکریپت صفحه سعی می کند فایلی را که وجود ندارد واکشی کند.

    خطای 404 در کنسول.

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

    یک نوع خطا در کنسول

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

    فعال کردن سطح Log 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 تایپ کنید تا توضیحی در مورد کاری که انجام می دهد.

    فیلتر کردن هر پیامی که با الگوی `/^[AH]/` مطابقت ندارد.

  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 کلیک کنید.