ابزارهای توسعه کروم برای نمایندگان به نماینده شما اجازه میدهد تا طرحبندیهای واکنشگرا را تأیید کند، APIهای آگاه از موقعیت مکانی را آزمایش کند و سرعتهای مختلف CPU یا شبکه را شبیهسازی کند. از این ابزارها برای شناسایی موارد حاشیهای و خودکارسازی حسابرسیهای عملکرد به طور مؤثرتر استفاده کنید.
این ویژگیهای شبیهسازی با ابزارهای دیگری کار میکنند که به عامل شما امکان تعامل با سایت شما را میدهند، مانند کلیک کردن روی عناصر، پر کردن فرمها و پیمایش صفحات.
مواردی که میتوانید از آنها تقلید کنید عبارتند از:
- Viewport و user agent : اندازههای خاص صفحه نمایش و شناسههای دستگاه را شبیهسازی میکنند.
- موقعیت جغرافیایی: مختصات مکانی را برای آزمایش APIهای آگاه از موقعیت مکانی جعل میکند.
- شبکه و پردازنده: شرایط شبکه و سرعت پردازنده را برای شبیهسازی محدودیتهای عملکرد در دنیای واقعی تنظیم کنید.
- طرح رنگ: بین حالتهای روشن و تیره جابهجا شوید.
هنگام استفاده از شبیهساز، نکات زیر را در نظر داشته باشید:
- پشتیبانی دستگاه: عامل شما میتواند هر دستگاهی را در لیست
KnownDevicesمربوط به Puppeteer شبیهسازی کند. این شامل شبیهسازی رویدادهای لمسی برای نمایشگرهای موبایل نیز میشود. - رفتار موتور مرورگر : اگرچه این ابزار ویژگیهای دستگاه را شبیهسازی میکند، اما موتورهای مرورگر غیر کرومیوم یا سیستم عاملهای مختلف را شبیهسازی نمیکند. عامل شما همیشه در کروم سیستم عامل فعلی شما اجرا میشود.
موارد استفاده برای شبیهسازی کاربر
به نماینده خود دستور دهید که محیطها را شبیهسازی کرده و رابط کاربری را برای شما تأیید کند، نه اینکه بعد از هر تغییر کد، مرورگرها را به صورت دستی تغییر اندازه دهد، IPها را جعل کند یا شبکهها را مسدود کند.
با استفاده از این گردشهای کاری، شبیهسازی را در فرآیند توسعه خود ادغام کنید.
تکرار طراحی واکنشگرا
الگوهای ناوبری اغلب بین فرمفاکتورهای موبایل و دسکتاپ به طور چشمگیری تغییر میکنند. همانطور که برنامه خود را میسازید، میتوانید به عامل خود دستور دهید تا تأیید کند که اجزایی که تازه نوشته شده است به درستی رندر میشوند و محتوای یکسانی را در بین دستگاهها ارائه میدهند.
مثال:
Go to developer.chrome.com. Click the burger menu on mobile, check the top level
items and ensure the same items are available for a desktop device.
اجرای نمونهای از عامل: عامل شما یک پنجره کروم باز میکند، به صفحه میرود، شبیهسازی را شروع میکند و موارد را در هر دو نما مقایسه میکند. این تأیید میکند که نمای موبایل (منوی برگر) و نمای دسکتاپ (هدر) حاوی لینکهای مورد انتظار هستند.
اعتبارسنجی تعاملات بین نماهای مختلف
طرحبندیها در طول تعاملات دچار مشکل میشوند، نه فقط در CSS. اسکرینشاتهای استاتیک اغلب اشکالاتی را که هنگام لمس رابط کاربری توسط کاربران رخ میدهد، از دست میدهند. میتوانید به عامل خود وظیفه دهید تا جریانهای تعاملی خاص را در چندین نما آزمایش کند تا اشکالات عملکردی پنهان را پیدا کند.
مثال:
Go to https://developer.chrome.com/ on mobile, tablet and desktop device, type
in a search query but don't submit it and wait for the type-ahead suggestions.
Ensure the Sign in button is visible all the time. Let me know if that's not the
case.
نمونه اجرای عامل: عامل شما یک عبارت جستجو تایپ میکند و اندازه صفحه را به هر سه اندازه تغییر میدهد. در این مثال، عامل شما متوجه میشود که در تبلت و موبایل، نوار جستجو گسترش مییابد تا کل عرض هدر را پر کند و لینک ورود را پنهان کند.
ویژگیهای آگاه از موقعیت مکانی نمونه اولیه
تست APIهایی که به موقعیت فیزیکی کاربر متکی هستند (مانند جستجوهای «نزدیک من» یا مکانیابهای فروشگاه) معمولاً مستلزم آن است که شما حسگرها را به صورت دستی لغو کنید. اکنون، میتوانید به عامل خود دستور دهید تا موقعیتهای جغرافیایی خاصی را جعل کند تا منطق فرانتاند و بکاند شما بدون مشکل تأیید شود.
مثال:
Go to chrome.dev/devtools-store-locator. Search for Berlin, and confirm there's
a store showing. Confirm there's no store for Washington. Finally, simulate
Paris as location and verify there are stores listed.
اجرای نمونهای از عامل: عامل شما به سایت میرود، برلین را جستجو میکند و سپس به صورت پویا مختصات طول و عرض جغرافیایی خاصی را برای شبیهسازی پاریس تزریق میکند، قبل از اینکه با ویژگی « از موقعیت مکانی من استفاده کن» تعامل داشته باشد تا از پر شدن فروشگاههای صحیح اطمینان حاصل کند.