ترفندهای پیشرفته برای Inspector مرورگر Chrome (قسمت 6) : کار با $ در کنسول و is:runnig در تب network

ترفند 11 : کار با $ در کنسول

شما میتونین در کنسول یا Console بصورت سریع به المنت انتخاب شده فعلی در تب Elements دسترسی داشته باشید و از اون استفاده کنید. Inspector یک ویژگی بنام $0 تعریف کرده که یک راه میان بر یا Shortcut برای رسیدن به المنت فعال فعلی هست. شاید زیاد این مورد رو دیده باشید ولی به اون دقت نکرده باشید. به سایت w3schools برید و در Inspector تب Elements رو باز کنید. من برای مثال روی تگ body کلیک میکنم تا فعال بشه:

همونطور که دیدید تگ body فعال هست و همونطور که مشخص کردم در آخر اون بیان شده که این تگ برابر با $0 هست و اگر $0 رو در جایی صدا بزنید، مثل این میمونه که المنت فعال فعلی رو صدا زدید. هر المنت دیگه ای رو هم انتخاب کنید، چنین چیزی براش پیش میاد. حالا که body انتخاب شده، میخایم به تب Console بریم و با $0 کار کنیم. همونطور که میدونید از دو طریق میتونیم Console رو باز کنیم. روش اول اینه که روی تب Console کلیک کنیم:

این صفحه Console ثابت هست و مختص به خودش هست و مقداری محدودیت داره. یک روش بهترین اینه که از کنسولی که همه جا حضور داره استفاده کنیم. برای اینکار دکمه Esc بر روی کیبورد رو فشار بدید، تا Console در پایین Inspector باز بشه:

همونطور که دیدید Console برای ما باز میشه و فرقش با قبلی اینه که، اگه حالا به تبهای دیگه هم بریم، این Console سر جاش میمونه و فعاله و میتونین از اون در همه جا استفاده کنید. خب حالا ما در حالی که المنت Body فعال هست، درون کنسول $0 رو تایپ کرده و اینتر میزینم:

همونطور که دیدید با اینکار همون المنت Body بصورت نتیجه به ما نشون داده میشه. پس دیدید که $0 با المنت فعال یکی هست. حالا میتونیم به ویژگی‌های اون دسترسی داشته باشیم و یا اینکه از متدهای مختلف Javascript برای اون استفاده کنیم و اون رو مورد تست قرار بدیم. مثلا میتونیم به سادگی با زدن دستور $0.parentElement به پدر body یعنی تگ html دسترسی داشته باشیم:

همونطور که دیدید تگ html بعنوان نتیجه به ما نشون داده شد. از همه ویژگی‌های دیگه ای که در Javascript وجود داره هم میتونین استفاده کنید و به سرعت تست‌های مورد نظرتون رو انجام بدین. همچنین یک دستور دیگه بصورت $_ هست که وظیفش اینه که آخرین دستوری که با $ اجرا شده رو مجددا براتون شبیه سازی کنه. مثلا اگر ما اینکارو انجام بدیم، بصورت زیر خواهد شد:

دیدید که نتیجه ای که بهم برگشت داده شد، همون نتیجه قبلی هست.

ترفند 12 : استفاده از فیلتر is:running در تب Network

همونطور که میدونید در تب Network یک قسمت وجود داره که میتونین در اون فیلتر مورد نظرتون رو قرار بدین و فقط نتایجی که با اون مطابقت میکنن به شما نمایش داده میشن.

ما میتونیم عبارتهای مختلفی که وجود داره رو درون این این فیلد قرار بدیم و دقیقتر درخواست‌ها رو بررسی کنیم. یک فیلتر بنام is:running وجود داره که اگه از اون استفاده کنید فقط درخواستهایی نمایش داده میشه که در حال اجرا باشن و هنوز به پایان نرسیدن. این فیلتر به درد زمانی میخوره که شما میخاید یک صفحه رو رفرش کنید و ببینید که چه درخواستهایی اجرا میشن. خب ما در باکس مورد نظر فیلتر رو قرار میدیم و کلیک F5 رو فشار میدیم تا صفحه رفرش بشه. نتیجه بصورت زیر خواهد بود:

دیدید که به چه راحتی و زیبایی تونستیم این کار رو انجام بدیم.

امیدوارم از این مطلب خوشتون اومده باشه.

موفق باشید

یا علی

نویسنده

محمد اسفندیاری

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