به دلیل اهمیت زیاد طراحی واکنشگرا و روش های Mobile First در طراحی صفحات وب، ما به محیطی نیاز داریم تا بتوانیم واکشگرایی طرح خود در آن آزمایش و بررسی کنیم. مرورگر کروم برای این کار راه حلی بوجود آورده است تحت عنوان Device Mode که ما در این مطلب این قسمت از ابزار توسعه دهندگان را مورد بررسی قرار می دهیم.
پیشنیازها
برخی از امکاناتی که در این سایت در مورد کروم گفته می شود امکان دارد که در حال حاضر فقط در نسخه Canary آن قابل آزمایش باشد پس در نتیجه شاید برای بررسی آنها نیاز به این نسخه داشته باشید. همچنین به این نکته توجه کنید که امکان دارد برخی از این امکانات به هر دلیلی توسط تیم کروم در آینده از این مرورگر حذف شوند یا تغییر کنند.
برای دسترسی به تمام امکانات باید به آدرس chrome://flags برویم و گزینه Developer Tools experiments را فعال کنیم. کافی است Enable را انتخاب و سپس دکمه RELAUNCH NOW را کلیک کنیم:
حال همه چیز آماده است تا امکانات مختلف را بررسی کنیم.
برای رفتن به Device Mode اول باید Devtools را باز کنیم که سریع ترین راه استفاده از کلید ترکیبی Ctrl + Shift + I می باشد، سپس از دکمه Toggle device toolbar برای باز کردن Device Mode بصورت زیر استفاده می کنیم:
همینطور می توان از کلید ترکیبی Ctrl + Shift + M استفاده کرد.
تعیین اندازه دستگاه
? اگر به نوار بالا دقت کنیم مشاهده می شود که Responsive حالت پیشفرض است و به راحتی می توان اندازه دستگاه را با کشیدن کوچک و بزرگ کرد.
? همچنین در نوار بالا رایج ترین اندازه دستگاه ها بصورت میانبر در اختیار ما قرار دارد که با کلیک روی آنها می توانیم به اندازه دلخواه برسیم.
? و در نهایت می توان بصورت دقیق اندازه عرض و ارتفاع دلخواهی را برای دستگاه توسط باکس های ورودی تعیین کرد.
در ویدیوی زیر این سه موضوع را مشاهده می کنیم:
انتخاب دستگاه خاص
? اگر بخواهیم بصورت دقیق تر دستگاهی را انتخاب کنیم، کافی است از منوی انتخاب دستگاه مورد نظرمان را انتخاب کنیم. به عنوان نمونه دستگاهی که در نظر داریم Nexus 5x می باشد که می توانیم به راحتی آن را از لیست انتخاب کنیم.
? همچنین با زدن گزینه Edit می توانیم دستگاه های دیگری که نامشان در لیست دیده نمی شود را انتخاب کرده و لیست اضافه کنیم.
? و در نهایت کروم این امکان را به ما می دهد که یک دستگاه شخص سازی شده بسازیم. که می توان نام دستگاه، عرض و ارتفاع و موارد دیگری مربوط به دستگاه را برای آن مشخص کنیم. این کار با کلیک کردن بر روی دکمه Add custom device امکان پذیر است.
حالت های مختلف دستگاه
زمانی که یک دستگاه خاص را با نام آن انتخاب می کنیم کروم یک گزینه برای ما فعال می کند تا بتوانیم حالت های مختلف دستگاه مثل چرخش در حالت افقی و یا زمانی که صفحه کلید دستگاه باز است و موارد دیگر را تجربه کنیم و پروژه را در آن حالت هم آزمایش کنیم:
نمایش فریم دستگاه
برای اینکه بتوانیم شبیه سازی بهتری داشته باشیم و طرح به حالت واقعی نزدیک تر باشد کروم حتی این قابلیت را به ما می دهد تا بتوانیم فریم های دستگاه های مختلف را نیز مشاهده کنیم.
برای این کار کافی است بعد از انتخاب دستگاه مورد نظرمان، از منو تنظیمات گزینه Show device frame را انتخاب کنیم:
اگر بار اولی باشد که این کار را انجام می دهید احتمالا مدتی زمان نیاز است تا فریم لود شود (همچنین امکان دارد که نیاز به v-p-n داشته باشید، همون قندشکن خودمون ?)
اسکرین شات
اگر به هر دلیلی نیاز به یک اسکرین شات از صفحه مورد نظرمان داریم. کافی است اندازه دلخواه را برای حالت دستگاه انتخاب کنیم و سپس از منوی تنظیمات گزینه Capture screenshot را انتخاب کنیم. اگر در این حالت نمایش فریم را هم فعال کرده باشیم، فریم دستگاه هم در اسکرین شات قرار خواهد گفت.
همچنین اگر نیاز است تا از تمام صفحه اسکرین شات گرفته شود می توانیم فریم را حذف کنیم و گزینه Capture full size screenshot را انتخاب کنیم.
نمایش خط کش
برای نمایش خط کش می توان گزینه Show rulers را از منو انتخاب کرد:
تغییرات شبکه
گاهی نیاز است تا شبکه را نیز برای انجام یک سری آزمایشات تغییر دهیم. به عنوان مثال می خواهیم تا صفحه مورد نظرمان را در حالتی که کاربر از یک اینترنتی با سرعت پایین استفاده می کند آزمایش کنیم. یا حتی می خواهیم سایت را در حالت آفلاین تست کنیم می توانیم بصورت زیر عمل کنیم:
تنظیم pixel ratio دستگاه
برای تست تصاویر در دستگاه های مختلف موضوع Pixel ratio دستگاه ها اهمیت زیادی دارد. که ما می توانیم از منو گزینه Add device pixel ratio را انتخاب کنیم و این مقدار را بین اعداد 1 تا 3 تغییر دهیم و صفحه وب مورد نظر را آزمایش و بررسی کنیم:
تعیین نوع دستگاه
گزینه دیگری که در منوی تنظیمات وجود دارد Add device type است که می توان آن را به حالت های Mobile یا Desktop و حالت عادی و حالت Touch تبدیل کرد.
به عنوان نمونه در حالت Touch نمی توان از نشانه گر موس برای انتخاب متن ها استفاده کرد. همچنین برای آزمایش عملیات های مختلفی که برای حالت Touch نوشته می شود این تنظیمات مفید است:
تعیین اندازه بزرگ نمایی
در حالت پیشفرض کروم همیشه سعی می کند که دستگاه انتخاب شده را طوری کوچک یا بزرگ کند که کل آن داخل Viewport ما جا شده و مناسب باشد. ما می توانیم بزرگ نمایی دستگاه را به درصدهای مختلف تغییر دهیم. این موضوع به ما این امکان را می دهد که حتی بتوانیم مانیتورهای بزرگی را که در دسترس نداریم شبیه سازی کنیم:
نمایش مدیا کوئری ها
می توانیم با انتخاب گزینه Show media queries از منوی تنظیمات مدیاکوئری هایی را که در سی اس اس نوشته ایم فعال کنیم.
با نگه داشتن نشانه گر موس می توان مدیاکوئری نوشته شده را مشاهده کرد و همچنین با کلیک بر روی آن می توانیم اندازه دستگاه را منطبق بر آن مدیاکوئری قرار دهیم.
و در نهایت یک قابلیت بسیار عالی موجود این است که با کلیک راست بر روی یکی از مدیاکوئری ها می توان به مکان دقیق آن مدیاکوئری در کد سی اس اس سفر کنیم :)
و در آخر اگر تنظیمات را به کلی نابود کردید می توانید با انتخاب گزینه Reset to defaults همه چیز را به حالت اول برگردانید. ?
سلام و تشکر بابت محتوای فوق العاده عالی تون
میخواستم بگم که پلیری که ازش استفاده می کنید یه مشکلی داره، وقتی دکمه ی پلی رو میزنم اینترنت دانلود منیجر درخواست دانلود میده و بعد از کنسل کردن دانلود فایل نیمه می مونه و دیگه پلی نمیشه. خیلی خوب میشه اگه این مشکل رو بتونید حل کنید.
پلیر خاصی نیست مال خود مرورگرتونه. من هم دانلود منیجر دارم ولی این مشکل پیش نمیاد. نمیدونم راستش.
ممنون بابت مطلب خوبتون…
یه باگی چند وقت پیش برای یکی از پروژه هامون پیش اومده بود اونم این بود که در حالت موبایل وقتی که کیبورد گوشی میومد بالا که یه فیلدی رو پر کنه، اتفاق میفتاد..برای دیباگ کردنش مجبور بودیم تو گوشی چکش کنیم …به نظرتون ابزاری هست برای این نوع موارد؟؟
chrome remote debugging هستش که توی مطالب بعد بررسیش میکنیم. که البته بازم نیاز به یک گوشی هستش.
دمت گرم عالی بود
باسلام ببخشیدمن یک سایت طراحی کرده ام
ودامنه هم خریده ام توی file managerبایدچجوری فایلهارابریزم؟