ترفندهای پیشرفته برای Inspector مرورگر Chrome (قسمت 9) : ضبط تصاویر از لود سایت و کار با پنل استایل

- visibility ۰ mode_comment

inspector

ترفند 16 : مشاهده انتخابگرهای تطابق یافته

همونطور که میدونید شما میتونین در یک Rule یا دستور css همزمان چند انتخاب گر رو قرار بدین. برای مثال کد زیر رو در نظر بگیرید:

میبینید که کدهای css مشابهی رو برای تعدادی زیادی انتخابگر یا Selector بصورت همزمان قرار دادیم. Inspector قابلیتی رو در اختیارتون میزاره که با استفاده از اون میتونین بفهمید، چه انتخابگرهایی هم اکنون برای المنت مورد نظر تطابق کردن و فعال هستن. برای مثال سایت 7Learn رو باز کنید:match selector

بر روی مورد مشخص شده کلیک راست کرده و اون رو در Inspector باز کنید.match selector 2

حالا اگه در سمت راست بخش استایلها رو ببینید، بصورت زیر هست:match selector 3

میبینید که انتخابگر span.isnew رنگش با بقیه فرق میکنه و سفیده. این یعنی اینکه برای المنت فعلی این انتخابگر فعال هست.

ترفند 17 : جابجایی سریع در بخش استایلها

شما میتونین با استفاده از کلیدهای tab و shift + tab با سرعت بین انتخاب گرها و ویژگیها و مقادیر جابجا بشین و اونا رو تغییر بدین. برای مثال همون المنت بیان شده در ترفند بالا رو در نظر بگیرید. میتونیم با زدن دکمه tab به سمت جلو و با زدن دکمه های shift + tab به سمت عقب برگردیم و مواردی که میخایم رو ویرایش کنیم و یا اضافه کنیم. بصورت زیر:match selector 4

ترفند 18 : ضبط تصاویر از لود شدن سایت

شما میتونین به سادگی با استفاده از Inspector تصاویری از لود شدن سایتتون بگیرید و متوجه بشید که سایتتون در لحظه به لحظه چطور لود میشه و کاربران اون رو چطور میبینن. برای اینکار درون همین سایت 7learn به تب network میریم و بر روی icon مربوط به Capture Screenshots کلیک میکنیم تا فعال بشه:screen capture

بعد از اینکه این مورد رو فعال کردید، دکمه F5 رو بزنید تا مرورگر رفرش بشه و بعد از لود شدن کامل اطلاعات در اختیارتون قرار میگیره:screen capture 2

با دوبار کلیک بر روی هر کدوم از تصاویر، عکس بزرگ اون در اختیارتون قرار میگیره. همچنین با یکبار کلیک بر روی هر کدوم اطلاعات Network تا اون زمان در اختیارتون قرار میگیره و میتونین ببینید تا اون لحظه چه درخواستهایی فرستاده شده.

بهمین راحتی میتونین بین ویژگی ها جابجا بشید.

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

موفق باشید

یا علی

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

نیاز به لاگین

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