یک حالت دستگاه جدید برای نسل اول موبایل

Paul Bakaus

حالت جدید دستگاه برای نسل اول موبایل

ما کمی بیشتر از یک سال پیش Device Mode را معرفی کردیم، راهی برای شبیه‌سازی دستگاه‌ها و کار با طراحی‌های واکنش‌گرا. اکنون زمان اولین ارتقاء اصلی آن است که در Chrome 49 شروع می شود. بنابراین، چه چیزی جدید است؟

موبایل در حال تبدیل شدن به نقطه شروع Chrome DevTools است. در حالی که در گذشته راه‌هایی برای شبیه‌سازی موبایل ارائه می‌دادیم، پیش‌فرض توسعه دسکتاپ بود. شبیه سازی موبایل همیشه باید روشن می شد. اکنون که مصرف سایت‌های موبایل در بسیاری از مکان‌ها از دسکتاپ پیشی گرفته است، ما در DevTools نیز موقعیت خود را تغییر می‌دهیم.

چه خبر؟

اول و مهمتر از همه، رابط کاربری ساده است و از فضای بسیار کمتری استفاده می کند. ما انتظار داریم که حالت جدید Device Mode به حالت اصلی توسعه برای بیشتر افراد تبدیل شود، بنابراین یک طراحی تمیز و ساده که نوار ناوبری DevTools اصلی را گسترش دهد یک الزام بود.

خط کش جدید دستگاه پرش سریع بر روی پرسش های رسانه ای.

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

و در نهایت، بسیاری از گزینه‌ها در صورت امکان در پشت یک ضامن قرار گرفته یا پنهان شده‌اند. این گزینه های ترکیبی جدید جابجایی بین حالت ها را بسیار آسان تر می کند. برای جابه‌جایی برخی از کنترل‌ها یا سفارشی کردن تجربه خود از نوار ابزار، نماد منوی سه نقطه کوچک را بالا بزنید.

به صورت پیش فرض پاسخگو است

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

• پاسخگو
• دستگاه خاص

در هر دو حالت، viewport در پنجره قابل تغییر اندازه خود در کروم قرار می گیرد. این مزیت قابل توجهی دارد که می‌توانید پنجره مرورگر و ابزارهای توسعه‌دهنده خود را به شکلی که دوست دارید به حداکثر برسانید و هنگام آزمایش اندازه‌های مختلف صفحه خود و برگشتن به جلو و عقب، از آن‌ها نخواهید پرید.

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

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

اشکال زدایی از راه دور یکپارچه

شبیه‌سازی‌ها، حتی بهترین‌های موجود، فقط می‌توانند شما را تا اینجای کار هدایت کنند. کارهای ساده ای وجود دارد که امروزه شبیه سازی ها نمی توانند انجام دهند، مانند:

• بررسی کنید که آیا یک دکمه به اندازه کافی برای انگشت شست شما بزرگ است یا خیر.
• عملکرد سایت خود را روی گوشی کندتر تست کنید.
• اشکال‌زدایی ویژگی‌های تصادفی و محدودیت‌های دستگاه‌های خاص.

برای آزمایش کافی همه این سناریوها، باید با استفاده از دستگاه های فیزیکی واقعی آزمایش، کار و اشکال زدایی کنید.

مدتی است که می‌توانید به chrome://inspect مراجعه کنید، دستگاه خود را از طریق USB متصل کنید و از طریق DevTools یک جلسه اشکال‌زدایی از راه دور را باز کنید. اما ما اکنون یک قدم فراتر رفته‌ایم و نحوه ظاهر و رفتار اشکال‌زدایی از راه دور را بازسازی کرده‌ایم و آن را در هسته DevTools جاسازی کرده‌ایم. به جای مرور به صفحه دیگری، اکنون می توانید به Inspect Devices به عنوان یک گفتگو مستقیماً در منوی اصلی جدید دسترسی داشته باشید. این کار گنجاندن اشکال‌زدایی فیزیکی در گردش کارتان را بسیار آسان‌تر می‌کند – فقط گوشی خود را وصل کنید، بدون نیاز به خروج از DevTools خود!

خانه های جدید برای بقیه کنترل های شبیه سازی قبلی

از آنجایی که تلفن همراه اکنون پیش‌فرض در DevTools است، ویژگی‌هایی مانند throttling شبکه به خانه مناسب خود منتقل شدند، در این مورد پانل شبکه.

برخی از ویژگی‌ها، مانند شبیه‌سازی حسگرها یا تنظیمات رندر مانند شبیه‌سازی رسانه چاپی به مکانی ثابت در کشو منتقل شده‌اند. می‌توانید تمام موارد اضافی را در منوی اصلی جدید در بخش «ابزارهای بیشتر» بیابید.

ما می دانیم که این یک تغییر مهم است که همه ما باید به آن عادت کنیم. در اسناد «حالت دستگاه» که به‌تازگی به‌روزرسانی شده‌اند، پوشش کاملی درباره همه چیزهایی که در آن وجود دارد، پیدا خواهید کرد. ما دوست داریم از شما در توییتر یا اگر به بیش از 140 کاراکتر نیاز دارید، در ردیاب اشکال ما (بله، حتی برای درخواست ویژگی) از شما بشنویم.