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

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



  آیا می دانید با دوره های آموزشی سون لرن می توانید از 0 تا 100 طراحی وب را در منزل فراگیرید!

ترفندهای پیشرفته برای Inspector مرورگر Chrome (قسمت 2) : modification و search

0 277 ۲۷ مرداد ۹۵

inspector

در جلسه قبل در مورد ساختن Snippet در Inspector و اجرا کردن اون توضیحاتی رو خدمتتون عرض کردیم. در این جلسه هم تعدادی ترفند دیگه رو در اختیارتون میزاریم.

ترفند 2 : دیدن تغییرات داده شده توسط شما

همونطور که میدونین ما میتونیم منابعی که در تب Sources هستن رو دستکاری کنیم و تغییرات رو همون لحظه ببینیم. ما در اینجا میخایم وارد یک سایت نمونه بشیم و درون تب sources تغییراتی رو درون فایلهای اون به وجود بیاریم و بعد از اون همه تغییراتی که دادیم رو بصورت یکجا مشاهده کنیم و همچنین میتونیم اونا رو به عقب برگردونیم. برای نمونه ما وارد سایت w3schools میشیم و در اونجا inspector رو باز میکنیم و وارد تب sources میشیم. در اونجا تمام منابعی که در این سایت مورد استفاده قرار گرفته اند، نمایش داده میشه.modification

روی فایل مشخص شده دو بار کلیک میکنیم تا در سمت راست باز بشه و کدهای نمایش داده بشه:modification 2

حالا من به عنوان مثال درون خط اول قطعه کد body {background-color: red;} رو اضافه میکنم و ctrl + s رو میزنم تا کار من ذخیره بشه:modification 3

همونطور که دیدید کد مورد نظر رو در خط اول اضافه کردیم و بعد از اینکه این فایل رو ذخیره کردیم یک آیکون زرد نمایش داده میشه که منظور از اون اینه که این فایل در سیستم ما ذخیره نمیشه. حالا شما میتونین یک workspace بسازید و فایل رو درون اون ذخیره کنید که فعلا توی بحث ما نیس. بعد از اینکه ذخیره رو زدید برای اینکه بفهمید که چه فایلهایی چه تغییراتی کردن، بر روی فایل مورد نظر کلیک راست کرده و گزینه Local modifications رو انتخاب کنید:modification 4

بعد از اینکار یک پنجره در زیر inspector باز میشه و تب History در اون فعال هست و میتونین تاریخچه تغییرات اون رو ببینید:modification 5

میبینید فایل w3.css که همون فایلی که ما تغییرش دادیم وجود داره و گفته شده که در ساعت 5:34:55 یک تغییر درون اون داده شده. براش مشاهده تغییر داده شده بر روی مثلث کنار اون کلیک میکنیم تا محتویاتش نمایش داده بشه:modification 6

همونطور که میبینید قطعه کدی که ما اضافه کردیم با رنگ سبز نمایش داده شده. رنگ سبز نشون دهنده اینه که این قطعه کد اضافه شده و اگر چیزی رو پاک کرده باشید با رنگ قرمز نشون داده میشه. در کنار اون هم شماره خطشو قرار میده که در بالا 1 هست. با کلیک بر روی apply original content، فایل مورد نظر به حالت اولیه خودش برمیگرده.modification 7

همونطور که میبینید با زدن این گزینه کدی که ما در ابتدا اضافه کرده بودیم پاک شده و با رنگ قرمز نمایش داده شده. اگر بر روی لینک revert کلیک کنیم، همه چیز به حالت اولیه خودش برمیگرده و تمام History پاک میشه. این مواردی که عرض کردم زمانی که تغییرات زیادی رو اعمال کرده باشیم، خیلی میتونه کمکمون کنه.

ترفند 3 : جستجوی المنتها با CSS selector

همونطور که میدونید میشه با استفاده از کلیدهای ترکیبی ctrl+f درون تب Elements یک چیزی رو مورد جستجو قرار داد. شما میتونین با وارد کردن انتخاب گرهای css، المنتهای مورد نظرتون رو انتخاب و پیدا کنید. مثلا فرض کنید در همون سایت بالایی که باز کردیم، وارد تب Elements بشیم و قصد داشته باشیم که همه لینکهای موچود در المنتی با کلاس w3-container رو پیدا کنیم. برای اینکار بصورت زیر عمل میکنیم:search

میبینید که با اینکار لینک اولی انتخاب میشه و در کل 6 مورد پیدا کرده که با این جستجو مطابقت دارن. شما میتونین از انتخاب گرهای پیشرفته ای استفاده کنید و المنت های مدنظرتون رو پیدا کنید.

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

موفق باشید

یا علی

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

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

ارسال دیدگاه

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

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

ورود به سایت

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

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

عبارت :
7LearnTelegram