یکی از مهم ترین اصول طراحی صفحات وب یا رابط های کاربری هماهنگ سازی آن ها با دستگاه های مختلف از قبیل سیستم های خانگی ، لپ تاپ ها ، تبلت ها و گوشی های هوشمند است. همانطور که در بحث پیاده سازی این صفحات نیاز به استفاده از تکنولوژی ها و کتابخانه های مختلف CSS است ، علاوه بر آن باید ابزارهایی را برای آنالیز و تست ریسپانسیو این صفحات در اختیار داشته باشیم . در این مقاله از وب دنج قصد داریم ابزاری را جهت بررسی و تست ریسپانسیو صفحات وب معرفی کنیم ، با ما همراه باشید.
افزونه Responsive design tester برای مرورگر کروم :
یکی از بهترین افزونه ها ( اکستنشن ) برای تست ریسپانسیو صفحات وب و رابط های کاربری افزونه Responsive design tester است . به کمک این افزونه می توانید به راحتی تمامی صفحات مورد نظر خود را بررسی کرده و در اندازه های مختلف تست کنید. این افزونه بیش از ۴۰۰۰ بار توسط کاربران نصب شده و امتیاز خوب ۸ از ۱۰ را گرفته است.
ویژگی های افزونه Responsive design tester:
- محیط تست در یک تب جدید مرورگر باز می شود ( برای بررسی کدهای صفحه و استفاده از ابزار inspector مرورگر کاملا مناسب است.)
- دسته بندی های متنوع نمایشگرها ( این افزونه دارای ۳ دسته بندی اصلی موبایل ، فبلت و تبلت است)
- نمایشگرهای پر کاربرد ( در هر دسته بندی تعدادی دستگاه پیشنهاد می شود که می توانید برای بررسی صفحات از آن ها استفاده کنید.)
- انتخاب اندازه دلخواه ( ویژگی دیگر این افزونه امکان انتخاب اندازه دلخواه برای بررسی بیشتر حتی بر روی دستگاه هایی که کاربرد کمتری دارند است.)
- سرعت پردازش بالا ( سرعت لود صفحات در این افزونه به نسبت افزونه های مشابه بالاتر خواهد بود و منابع کمتری را مصرف می کند.)
روش دانلود و نصب افزونه برای مرورگر کروم :
- ابتدا روی این لینک کلیک کنید.
- پس از ورود به صفحه افزونه روی دکمه Add to chrome کلیک کنید.
- سپس بر روی دکمه Add extension کلیک کنید.
- نصب آغاز شده و افزونه بر روی مرورگر شما نصب می شود.
این نکته در در نظر داشته باشید افزونه معرفی شده صرفا برای مرورگر کروم است . البته افزونه هایی برای مروگر فایرفاکس و مرورگرهای دیگر نیز وجود دارد که در مقالات بعدی به آن ها خواهیم پرداخت.
در صورتی که اطلاعاتی از بحث ریسپانسیو سازی یا واکنشگرایی صفحات وب و رابط های کاربری ندارید پیشنهاد می کنیم ابتدا با مفاهیم فرانت اند و بک اند در مقاله توسعه وب سایت فرانت اند و بک اند چیست؟ آشنا شوید.