توسعه برای موبایل باید به همان راحتی باشد که برای دسکتاپ توسعه می یابد. ما به سختی در Chrome DevTools کار کرده‌ایم تا کارها را برای شما آسان‌تر کنیم و زمان آن رسیده که برخی از ویژگی‌های جدیدی را معرفی کنیم که می‌توانند به طور چشمگیری توسعه وب تلفن همراه شما را بهبود بخشند. ابتدا اشکال زدایی از راه دور و سپس شبیه سازی مناسب موبایل را معرفی خواهیم کرد .
صفحه نمایش دستگاه خود را روی دسکتاپ نمایش دهید
تاکنون، هنگام اشکال‌زدایی از راه دور، مجبور بوده‌اید چشم‌های خود را بین دستگاه و ابزارهای برنامه‌نویس خود به عقب و جلو ببرید. اکنون، Screencast صفحه‌نمایش دستگاه‌های شما را درست در کنار ابزارهای توسعه‌دهنده شما نمایش می‌دهد . دیدن آن خوب است، اما تعامل با آن حتی بهتر است:
- کلیک‌های روی صفحه نمایش به ضربه‌هایی تبدیل می‌شوند و رویدادهای لمسی مناسب روی دستگاه اجرا می‌شوند.
- با اشاره گر دسکتاپ، عنصر دستگاه خود را بررسی کنید
- روی صفحه‌کلید دسکتاپ خود تایپ کنید - همه ضربه‌های کلید به دستگاه ارسال می‌شوند . صرفه جویی در زمان برای تایپ کردن با انگشت شست.
- صفحه را با پرتاب کردن آن با اشاره گر خود یا کشیدن روی صفحه لمسی لپ تاپ خود حرکت دهید.
مستندات کامل در مورد پخش صفحه نمایش همه اینها و موارد دیگر را، مانند ارسال یک حرکت زوم کوچک، نشان می دهد. Chrome در Android بتا (m32) مورد نیاز است.
اشکال زدایی آسان از راه دور
18 ماه پیش، کروم اشکال زدایی از راه دور مناسبی را برای مرورگرهای WebKit معرفی کرد، اما اگر در آن زمان آن را امتحان می کردید، باید با دانلود 400 مگابایت Android SDK دست و پنجه نرم می کردید، باینری adb را به $PATH خود و برخی از دستورات جادویی خط فرمان اضافه می کردید.
اکنون، ما خوشحالیم که اعلام کنیم می توانید همه اینها را فراموش کنید. Chrome اکنون می‌تواند به‌طور بومی دستگاه‌های متصل به USB شما را پیدا کند و با آنها صحبت کند . ما پروتکل adb مستقیماً از طریق USB در Chrome پیاده‌سازی کرده‌ایم، بنابراین می‌توانید به راحتی به Menu > Tools > Inspect Devices بروید و بلافاصله جلسه اشکال‌زدایی از راه دور خود را شروع کنید.
این در همه پلتفرم‌ها، از جمله سیستم عامل کروم، عالی عمل می‌کند، هرچند توجه داشته باشید که در ویندوز، ابتدا باید درایورهای USB مناسب را نصب کنید تا با دستگاه صحبت کنید. اگر قبلاً هرگز آن را امتحان نکرده‌اید، باید اشکال‌زدایی USB را نیز در دستگاه فعال کنید و تأیید کنید که از Chrome for Android بتا استفاده می‌کنید. اسناد کامل را بخوانید. .
پورت فوروارد برای پروژه های محلی
شما در حال توسعه بر روی localhost:8000 هستید اما تلفن شما نمی تواند به آن دسترسی پیدا کند. بنابراین، ما ارسال پورت را مستقیماً به گردش کار اشکال زدایی از راه دور اضافه کردیم. اکنون کار روی پروژه های کامل خود آسان است، بدون هیچ گونه هک تونلی. در about:inspect روی Port Forwarding کلیک کنید تا پورت‌هایی را که می‌خواهید در دسترس باشند تعیین کنید، و در صورت تمایل به رنگ سبز روشن می‌شوند.
شبیه سازی موبایل
شما همیشه دستگاه هایی را که برای تست سازگاری نیاز دارید ندارید، درست است؟ در حالی که اشکال زدایی از راه دور دستگاه های واقعی بهترین احساس را برای عملکرد و لمس به شما می دهد، اکنون می توانید به طور واقع بینانه بسیاری از ویژگی های دستگاه را در دسکتاپ شبیه سازی کنید، در زمان شما صرفه جویی می کند و حلقه تکرار شما را بسیار سریعتر می کند.
شبیه سازی اندازه صفحه نمایش، devicePixelRatio و <meta viewport> با شبیه سازی رویداد تمام لمسی
اگر ویژگی قبلی Device Metrics را دیده‌اید، آنچه اکنون در دسترس است یک ارتقای بزرگ است. این تیم سخت کار کرده است تا شبیه‌سازی موبایل جدید نمایشی تقریباً واقعی از آنچه در دستگاه‌های واقعی می‌بینید داشته باشد. به عنوان مثال، مرورگرهای WebKit یک الگوریتم پیچیده اندازه‌گیری خودکار متن را حفظ می‌کنند و در واقع، هر دستگاه دارای یک «فاکتور فاج» خاص برای اندازه‌گیری خودکار متن است که برای کمک به خوانایی متن تغییر می‌کند. در حالت شبیه سازی می توانید تأیید کنید که این رفتار اعمال می شود و نتایج را مشاهده می کنید.
نسبت پیکسل دستگاه
تا کنون، تقریباً غیرممکن بوده است که ببینیم یک دستگاه hi-DPI چه چیزی را در دستگاهی با DPI پایین نمایش می دهد. اکنون، شبیه‌سازی dPR در DevTools نمای شما را به گونه‌ای تطبیق می‌دهد که به شما امکان می‌دهد در یک سناریوی عمیق DPI بزرگنمایی کنید. علاوه بر این، می‌توانید انتظار داشته باشید که window.devicePixelRatio ، @media (-webkit-min-device-pixel-ratio: 2) ، image-set( url(pic2x.jpg) 2x, …) و غیره تنظیمات شما را منعکس کنند و به شما این امکان را می‌دهند. برای مشاهده نحوه سازگاری برنامه شما از جمله بارگیری دارایی‌های خاص dpi مختلف.
شبیه‌سازی دستگاه به ویژگی‌ها یا اشکالات مرورگر گسترش نمی‌یابد. بنابراین، در حین شبیه‌سازی iOS، WebGL همچنان کار می‌کند و باگ بزرگنمایی جهت‌گیری iOS 5 را نخواهید دید. برای تجربه این تنوع، به دستگاه سر بزنید.
شبیه سازی مناسب <meta viewport> (و @viewport )
آزمایش رفتار کاری که width=device-width و minimum-scale:1.0 انجام می دهند قبلاً یک بازی فقط دستگاهی بوده است. اکنون می توانید به سرعت نمای های مختلف را امتحان کنید و نحوه رندر شدن آنها را مشاهده کنید.
شبیه سازی رویداد را لمس کنید
تنظیمات شبیه‌سازی صفحه لمسی اطمینان حاصل می‌کند که کلیک‌های شما به عنوان touchstart و غیره تفسیر می‌شوند. به علاوه، رویدادهای مصنوعی مانند زوم، اسکرول و حرکت کردن کار خواهند کرد. برای کوچک کردن زوم، به سادگی shift + کشیدن یا shift + Scroll را برای بزرگنمایی محتوا انجام دهید. شما یک نمای عالی از مقیاس بندی محتوا فراتر از درگاه دید خواهید داشت.
در نهایت، حالت آماده به کار جعل عامل کاربر (هم در سطح هدر درخواست و هم در سطح window.navigator )، موقعیت جغرافیایی، و شبیه سازی جهت به شما امکان می دهد تا عملکرد کامل دستگاه خود را بررسی کنید.
تنظیمات از پیش تعیین شده دستگاه
از پیش تنظیم‌های شبیه‌سازی به شما امکان می‌دهند یک تلفن یا رایانه لوحی را انتخاب کنید و اندازه صفحه نمایش صحیح، dPR ، UA اعمال شده برای آن دستگاه را به همراه رویدادهای لمسی کامل و پورت نمای شبیه‌سازی شده دریافت کنید. شما می توانید از پیش تنظیم های خاص را امتحان کنید یا به راحتی می توانید این ویژگی ها را یکی یکی تغییر دهید.
برای دریافت اسناد کامل در مورد شبیه سازی موبایل با DevTools به devtools.chrome.com بروید
نسخه ی نمایشی
برای دریافت نسخه نمایشی کامل از همه این ویژگی‌ها ، گفتگوی 23 دقیقه‌ای من از Chrome Dev Summit را در DevTools برای تلفن همراه بررسی کنید: