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

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



  آیا می دانید دوره های آموزشی سون لرن از جامع ترین و کاربردی ترین آموزش های موجود در سطح وب فارسی است!

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

2 1363 ۷ اردیبهشت ۹۴

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

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

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

دیدگاه ها 2 دیدگاه برای این مطلب ارسال شده است.

  • ‏‏
    لقمان آوند(۸ اردیبهشت ۱۳۹۴)

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

  • ارسال دیدگاه

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

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

    ورود به سایت

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

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

    عبارت :
    7LearnTelegram