12 تکنیک و روش کار کردن با Inspector مرورگر Chrome ( قسمت دوم )

- visibility ۲ mode_comment

در این مطلب روشهای باقیمانده رو خدمتتون عرض کنم.

15-chrome-devtools-tips-and-tricks 

7. انتخاب رنگ مورد نظر :

با استفاده از این روش میتونین از Color Picker حرفه ای که در Inspector قرار داده شده برای بدست آوردن کد رنگ دلخواهتون استفاده کنید. در کنار هر رنگ یک مربع رنگی قرار داده ، با کلیک بر روی اون یک باکس باز میشه ، حالا اگر ماوستون رو از Inspector خارج کنید شبیه به یک ذره بین میشه. حالا میتونین روی رنگ دلخواهتون برید و روش کلیک کنید ، با اینکار اون رنگ در Color Picker میاد و میتونین از اون استفاده کنید.

10.ColorPicker

8. شبیه سازی حالات مختلف برای عنصر انتخابی :

با استفاده از این روش میتونین درون Inspector برای یک المنت مورد نظر حالت Hover و Active و Force رو قرار بدین و اون رو تست کنید. با انتخاب هر چک باکس ، اون حالت براش اعمال میشه و حتی میتونین برای اون حالت ( مثلا هاور ) کد دلخواهتون رو بنویسید و همه چیز رو تست کنید.

11.SimulateHover

9. نمایش Shadow Dom :

با استفاده از این روش میتونین کاری کنید که Shadow Dom سایت مورد نظر در Inspector نمایش داده بشه. اگر در مورد Shadow Dom اطلاعی ندارید ، میتونین به این لینک مراجعه کنید. برای اینکار باید روی چرخ دنده موجود در بالای Inspector کلیک کنید و گزینه موجود در عکس زیر رو فعال کنید.

12.ShadowDOM

10. انتخاب کلمات مشابه بعدی :

فرض کنید که 10 کلمه یکسان در صفحه دارید و میخواید 6 تای اول اون رو با کلمه ای دیگه جایگزین کنید. راه معمولی اینه که یکی یکی اونارو عوض کنید. اما میتونین اولین کلمه رو انتخاب کنید و با زدن دکمه های ترکیبی Ctrl + D کلمه های مشابه بعدی رو هم انتهاب کرده و همزمان تغییر بدین.

13.MultiSelect

11. تغییر فرمت رنگ در Inspector :

با استفاده از این روش میتونین فرمت رنگ نمایش داده شده در Inspector رو تغییر بدین. برای اینکار کلید Shift رو نگه دارید و روی مربع کنار رنگ مورد نظر کلیک کنید. با اینکار فرمت بین هگزادسیمال ، RGB و HSL تغییر پیدا میکنه.

14.ColorFormat

12. استفاده از Inspector بعنوان یک ویرایشگر قدرتمند :

با استفاده از این روش میتونین پروژه های خودتون رو در Inspector وارد کنید و اونا رو ویرایش کنید و روشون مدیریت داشته باشید. برای وارد کردن پروژه مورد نظرتون میتونین کل پوشه رو درگ کنید و درون Inspector رها کنید و یا اینکه با رفتن به تب Sources و کلیک راست کردن درون قسمت سمت چپ ، گزینه Add Folder To Worskpace رو انتخاب کنید. برای مطالعه بیشتر در این زمینه میتونین به این لینک برید.

خب دوستان خسته نباشید.

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

موفق باشید. یا علی

Source

comment دیدگاه کاربران
لقمان آوند

خیلی خوب بود محمدجان
من خودم که کل کارم با اینسپکتور کروم هست چند تا از این ترفندای جالب رو نمی دونستم. کارمو واقعا راحتتر میکنه .
ممنون

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

خواهش میکنم دکتر
خوشحالم که بدردتون خورده
موفق باشید

نیاز به لاگین

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