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

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



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

Inspector مرورگر Chrome ( قسمت دوم ) : آشنایی با تب Elements

3 5673 ۱۲ شهریور ۹۳
1 2 3

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

در این جلسه میخوام بیشتر در مورد تب Elements صجبت کنم.

برای شروع مثل قبل سایت سون لرن رو باز میکنیم و عبارت بانک کد رو Inspect میکنیم. با اینکار Inspector باز میشه و بطور پیش فرض در ابتدا محتویات تب Elements نشان داده میشه.

این تب از دو بخش کلی تشکیل شده که یک بخش در سمت چپ و دیگری در سمت راست قرار گرفته. این دو بخش رو در تصویر زیر مشخص کردم :

1

در این جلسه بیشتر قسمت سمت چپ رو براتون توضیح میدم. این قسمت کدهای HTML صفحه رو به ما نشون میده. همونطور که در جلسه قبل گفتم به این کدها Javascript هم اعمال شده و نتیجه نهایی در اینجا قرار میگیرد.

اینو هم در نظر داشته باشین که هر کاری با Inspector انجام دهیم و چیزی رو اضافه یا کم بکنیم ، صرفا جهت تست هست و با یک بار Refresh کردن صفحه کل کارایی که ما کردیم از بین میره. پس هدف از Inspector تست کردن سریع و آنی هست. مثلا فرض کنید میخوایم ببینیم چه سایزی برای متنمون مناسبه. من خودم اوایل میومدم هی اون عددو در Editor کم و زیاد میکردم و میرفتم در مرورگر و صفحه رو Reload میکردم تا ببینم اندازش خوب شده یا نه!!!

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

2

تصویری که در بالا براتون قرار دادم ، همون بخش سمت چپ موجود در تب Elements هست. این بخش مربوط به HTML هست. همونطور که در جلسه قبل هم گفتم ، با انتخاب هر کدام از تگها در این بخش ، کدهای CSS مربوط به این تگ در سمت راست و در پنل Styles نمایش داده میشود.

همانطور که در تصویر بالا مشخص کردم ، در کنار بعضی از تگهای HTML یک علامت مثلثی وجود داره. اگر جهت این مثلت به سمت راست بود ، یعنی این تگ شامل تگهای دیگه ای هم هست. با کلیک کردن بر روی این مثلث ، تگهای موجود در اون به نمایش در میاد. با کلیک مجدد بر روی این مثلث ، دوباره تگهای درونی مخفی میشوند.

3

همونطور که در جلسه قبل گفتم ، در Inspector اگر ماوس خودمون رو ، روی تگهای HTML جابجا کنیم ، عنصر مورد نظر در صفحه پررنگ ( Highlight ) میشه. فرض کنید که صفحه سایت مورد نظر خیلی بلند باشه و شما یک عنصر را در ابتدای صفحه Inspect میکنین. حالا میاین و اسکرول مربوط به Inspector رو میارین پایین و روی یک تگ که در حال حاضر قابل دیدن نیست کلیک میکنیم.

4

مثلا در تصویر بالا اومدیم و تگ footer رو انتخاب کردیم. تگ footer در پایین سایت موجوده و در حال حاضر اسکرول سایتمون در وسط قرار داره و قابلیت دیدن footer در صفحه رو نداریم. همونطور که در تصویر فوق مشاهده میکنید من یک قسمتو کادر قرمز دورش کشیدم :

5

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

6

برای اینکار روی تگ مورد نظر کلیک راست کنید و از منوی باز شده ، گزینه آخر را انتخاب کنید. این گزینه Scroll into view نام دارد ، همانطور که از نامش پیداست ، به معنای این است که صفحه را اسکرول میکند تا عنصر مورد نظر قابل دیدن بشه. با کلیک بر روی این گزینه ، به قسمت پایین سایت هدایت میشین و اون تگ قابل دیدن میشه :

7

 

همونطور که در تصویر بالا میبینید ، بعد از اینکه بر روی گزینه مورد نظر کلیک کردیم ، اسکرول به پایین هدایت شده و اون تگ مربوطه پررنگ ( Highlight ) میشه.

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

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

  • ‏‏

    ممنون آموزش خوبی بود ❓

  • ‏‏
    aminsalam598(۲۱ بهمن ۱۳۹۴)

    اموزش بدهید بتوان سریع رنگ زمینه مورد نظر و فونت رنگ ان و عرض متن در تمام مروگرها یا افزودنیه هست کار سریع انجام دهد منتظرم

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

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

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

    ورود به سایت

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

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

    عبارت :
    7LearnTelegram