ترفندهای پیشرفته برای Inspector مرورگر Chrome (قسمت 10) : جابجا کردن تبها و کار کردن با رنگها در Inspector

ترفند 19 : جابجا کردن و چیدن تب ها با سلیقه خودتون

همونطور که میدونید درون Inspector تعدادی تب وجود داره و از ابتدا ترتیب اونا توسط خود مرورگر بصورت پیش فرض قرار گرفته. در نسخه های اخیر قابلیتهای زیادی به Inspector اضافه شده که خیلی در اون به رابط کاربری و تجربه کاربری اهمیت دادن و با اینکار رضایت کاربران رو جلب میکنن. یکی از اون کارا جابجا کردن تب ها و چیدن اونا متناسب با سلیقه خودتون هست. وقتی که تبها رو جابجا میکنید، جوری نیست که با بستن مرورگر باز به صورت اول برگرده و تا وقتی که تغییرشون ندید همون میمونه. برای جابجا کردن کافیه که هر تبی رو خواستید درگ کنید و در جای مورد نظرتون رها کنید. بصورت زیر:

دیدید که چقد راحت میشه اینکارو انجام داد.

ترفند 20 : کار کردن با جعبه ابزار رنگ در Inspector

یکی از قابلیتهای خوبی که در Inspector کروم قرار داده شده اینه که میتونین با استفاده از Color palette قوی اون رنگهای خودتون رو به سادگی مدیریت کنید. برای مثال سایت Google رو باز کنید و Inspector رو درون اون باز کنید. در قسمت سمت راست که استایلهای CSS قرار داده شدن، هر جا که رنگی تعریف شده باشه، یک مربع کوچک همون رنگی هست که با کلیک بر روی اون یک Color Palette باز میشه و میتونین رنگ مورد نظر رو مدیریت کنید:

بعد از کلیک بر روی اون، بصورت زیر میشه:

1. با درگ کردن بر این منطقه میتونین رنگ مورد نظرتون رو انتخاب کنید. در این منطقه رنگهای مشابه و نزدیک به هم قرار داده شدن. مثلا از قرمز روشن تا قرمز تیره.
2. با استفاده از این دو اسلایدر میتونین بازه رنگ و درجه شفافیت رنگتون رو مشخص کنید.
3. با کلیک بر روی این آیکون Syntax نمایش رنگ بین HEX و RGBA و HSLA جابجا میشه
4. با کلیک بر روی این آیکون میتونین Color Palette خودتون رو انتخاب کنید. چند گزینه داره که دو تای مهم اون Material Color و Page Color هست. در بالا مورد Page color فعال هست و خود Inspector بصورت اتوماتیک رنگهای عمده استفاده شده در صفحه فعلی رو پیدا کرده و نمایش میدن و شما میتونین از اونا استفاده کنید.

همچنین یه آیکون Color picker وجود داره:

میبینید که الان فعال هست و اگر روش کلیک کنید غیر فعال میشه. در حالتی که فعال هست، اگر ماوستون رو به داخل صفحه سایت ببرید، با دقت زیاد و پیکسلی میتونین یکی از رنگهای موجود در صفحه رو انتخاب کنید:

بهمین راحتی میتونین رنگهای موجود در Inspector رو مدیریت و اداره کنید.

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

موفق باشید

یا علی