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

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



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

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

0 1948 ۱۸ مهر ۹۳

سلام دوستان

در قسمت بالا و سمت چپ Inspector ، یه آیکون موبایل وجود داره. این آیکون بیشتر بدرد کسانی میخوره که طراحی Responsive کار میکنن. اول از همه بگم که Chrome خودتون رو به نسخه 38.0.2125.101 بروز رسانی کنید.

1

در ابتدا که این امکان غیر فعال هست ، رنگ آیکون مشکی هست و زمانی که روی اون کلیک کنید ، رنگش آبی میشه و فعال میشه و وارد محیط Emulation ( شبیه سازی ) میشین.

2

همونطور که میبینید ، در اینجا خیلی امکان وجود داره. خط کش عمودی و افقی که خیلی بدرد طراحی Responsive میخوره.

3

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

4

باید در قسمت بالا و سمت چپ روی آیکون Media query کلیک کنید. با این کار لیست تمام Media query ها با تمام جزئیات نمایش داده میشه. برای تست کردن هر کدوم از اونا فقط کافیه که روی اونا کلیک کنید. با این کار عرض به سرعت تغییر پیدا خواهد کرد و شما میتونین اون Media رو تست کنید و اگر مشکل داشت ، عددهاتون رو کم و یا زیاد کنین.

5

همونطور که در تصویر بالا میبینید ، هر وقت که width رو کم میکنیم ، در سمت راست و پایین دو تا قسمت وجود دارن ، که با استفاده از اونا میشه ارتفاع و عرض رو کم و زیاد کزد.

6

در بخش Device ، تعدادی mobile وجود داره که میتونین سایت خودتون رو با اونا تست کنید.

نکته : وقتی بعضی از تنظیمات رو تغییر میدین ، مثلا نوع دستگاه رو عوض میکنید ، با این پیغام در بالای مرورگر روبرو میشین :

7

و روی آیکون موبایل در Inspector یک علامت تعجب ظاهر میشه :

14

وقتی با این پیغام روبرو شدین ، برای اینکه شبیه سازی بطور کامل انجام بشه ، حتما باید صفحه رو Reload یا Refresh کنید.

اگر اون مدل دستگاهی که شما میخواستین نبود ، یا اینکه بخواین یه width و height دیگه بدین بصورت زیر عمل کنبد :

8

  1. اول از همه باید اون تیک رو بزنید ، تا این قسمت فعال بشه و بتونین هر width و height که خواستین وارد کنید.
  2. در این قسمت میتونین width و height مورد نظرتون رو وارد کنید.
  3. با کلیک روی این گزینه ، جهت ( Orientation ) صفحه عوض میشه. بعبارت دیگه میشه گفت width و height جاهاشون عوض میشه.
  4. در این قسمت میشه pixel ratio رو تغییر داد. در اینجا باید یه عدد قرار بدین که نسبت طول به عرض رو مشخص میکنه.
  5. با فعال کردن این گزینه ، اگر اندازه صفحه از مرورگر کمتر یا زیادتر باشه ، میزان zoom تغییر میکنه تا فضای در دسترس پر بشه.

9

  1. در این قسمت میتونین نوع شبکه خودتون رو انتخاب کنید و میتونین اونو offline کنید.
  2. در این قسمت هم میتونین USER AGENT وارد کنید.

10

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

11

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

12

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

در بخش سمت چپ ، 4 تا قسمت وجود داره. تب Device رو که در بالا توضیح دادم. در تب Media ، اگر تیک گزینه CSS media رو بزنید، میتونین Media صفحه رو عوض کنین. مثلا Print یا Tv و ...

13

در بخش Sensors هم میتونین تنظیمات مربوط به touch و ... رو تغییر بدین. با استفاده از گزینه Reset میتونین تمام تنظیمات رو به حالت اولش برگردونین.

اگر بخواین این قسمت در Inspector بسته بشه باید روی آیکون زیر کلیک کنید :

15

در این باکس بغیر از Emulation ، تبهای Console و Search و Rendering هم وجود داره. در پایین این تبهارو نیز براتون توضیح میدم.

16

در بخش Console تمام Error و Warning و ... نمایش داده میشه. ارورها با رنگ قرمز نوشته میشن و در مقابل هر ارور یا هشدار ، مشخص میکنه که در چه فایلی و در چه خطی اتفاق افتاده.

  1. در این قسمت میتونیم کدهای Javascript رو بنویسیم و کدهامونو تست کنیم و در همون لحظه جواب بگیریم.
  2. با کلیک روی این آیکون ، این بخش خالی میشه و همه ارورها و هشدارها و .... پاک میشه.
  3. با استفاده از این قسمت میتونین فیلتر کنید و مشخص کنید که چه چیزایی نمایش داده بشه و چه چیزایی نه. بصورت زیر :
    17

در تب Search هم میتونین در کل فایلهاتون به دنبال کلمه خاصی یگردین :

18

در تب Rendering هم میتونین امکانات دیگه ای رو اضافه کنید. مثل FPS ( فریم در ثانیه ) و ...

19

خب اینم از این قسمت. خسته نباشید.

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

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

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

ارسال دیدگاه

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

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

ورود به سایت

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

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

عبارت :
7LearnTelegram