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

- visibility ٠ mode_comment

inspector

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

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

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

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

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

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

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

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

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

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

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

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

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

موفق باشید

یا علی

comment دیدگاه کاربران

نیاز به لاگین

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