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

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



  آیا می دانید تا کنون 6245 نفر در 14 دوره آموزشی سون لرن ثبت نام کرده اند !

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

6 6316 ۶ شهریور ۹۳
1 2 3

در این دوره قصد دارم که Chrome Inspector رو بهتون آموزش بدم و امکاناتی رو که در اختیارمون قرار میده مرحله به مرحله براتون توضیح بدم.

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

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

خب برای شروع مرورگر Chrome رو باز میکنیم و سایت سون لرن رو درون آن باز میکنیم.

نکته : در ابتدا این رو بگم که من از آخرین نسخه Chrome استفاده میکنم. آخرین نسخه ای که تا امروز منتشر شده Version 37.0.2062.94 m هست. برای اینکه بفهمین Chrome شما چه نسخه ای هست و همچنین برای به روز رسانی آن باید به روش زیر عمل کنید :

1

در بالا و سمت راست Chrome خودتون یک گزینه وجود داره که سه خط روی آن کشیده شده. با کلیک بر روی این گزینه منویی باز خواهد شد. حال بر روی About Google Chrome کلیک کنید. با این کار صفحه ای جدید باز میشه که اطلاعاتی رو در اختیارتون قرار میده به صورت زیر :

 

 

 

2

 

همونطور که در شکل بالا مشاهده میکنید ، نسخه Chrome رو قرار داده و در زیر اون یک تیک سبز رنگ وجود داره که نشون میده که Chrome ما Update هست.

اگر به اینترنت متصل باشیم و Chrome ما بروز نباشه ، با آمدن به این صفحه خود به خود مرورگر شروع به بروز شدن میکند. از شما میخوام که مرورگرتون رو Update کنین.

برای باز کردن Inspector در Chrome و استفاده از امکانات آن دو راه کلی وجود داره :

  • روش اول :

این روش کلی هست و عنصر خاصی در صفحه را ، در ابتدا هدف قرار نمیدهد.

3

همونطور که در تصویر بالا مشاهده میکنید ، ابتدا باید به گزینه Tools برین و بعد از اون روی Inspect devices کلیک کنید. راه ساده تری نیز وجود دارد که اون اینه که بر روی کیبورد کلید F12 رو فشار بدین. به هر طریقی که عمل کنبن Inspector باز خواهد شد.

 

  • روش دوم :

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

برای این کار ، ابتدا باید بر روی عنصر مورد نظر کلیک راست کنید و گزینه Inspect element رو انتخاب کنید. با این کار هم Inspector باز خواهد شد و فرقی که با روش اول دارد این است که کدهای مربوطه به آن عنصر مورد نظر در Inspector باز میشه و به نوعی میتوان گفت راه سریعتری برای دستیابی به کدهای عنصر مورد نظر است.

برای مثال من سایت سون لرن رو باز میکنم و بر روی بانک کد کلیک راست میکنم و بر روی Inspect Element کلیک میکنم. با این کار باکسی به شکل زیر ظاهر میشه :

4

 

5

من قسمتی از تصویر بالا رو براتون جدا میکنم تا کمی در موردش براتون توضیح بدم :

6

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

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

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

  • ‏‏

    سلام
    درمرورگرفایرفاکس هم توضیحشو بذارید به چه صورته؟!

  • ‏‏
    Aref ghoochan nezhad(۱۶ شهریور ۱۳۹۳)

    خیلی هم عالی 😛
    دمت گرم داداش استفاده کردیم.

  • ‏‏
    محمد شاهملکی(۲۲ مهر ۱۳۹۳)

    خروجی PDF برای این مقالات نیز در اختیار کاربران VIP قرار داده نمیشه؟

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

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

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

    ورود به سایت

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

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

    عبارت :
    7LearnTelegram