• illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید تا کنون 6253 نفر در 14 دوره آموزشی سون لرن ثبت نام کرده اند !

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

0 197 ۹ شهریور ۹۵

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

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

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

موفق باشید

یا علی

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها اولین دیدگاه این مطلب را ارسال کنید.

ارسال دیدگاه

ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

:: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
عضویت/ ورود سریع با :
در حال اتصال ...

ورود به سایت

ورود سریع با :
در حال اتصال ...

جستجو در سون لرن

عبارت :
7LearnTelegram