افزودن دستگاه های مختلف به Chrome Developer Tools

افزودن دستگاه های مختلف به Chrome Developer Tools

اگر شما هم از بخش Developer Tools مرورگر کروم برای تست رسپانسیو صفحات وب استفاده می کنید حتما نیاز است دستگاه های مورد نظر خود را به آن اضافه کنید.

در حالت کلی تعدادی دستگاه پیش فرض در این بخش وجود دارد اما معمولا دستگاه های مورد نظر شما ممکن است در آن نباشد.

برای انجام این کار آموزش زیر را دنبال کنید.

 

افزودن دستگاه های مختلف به Chrome Developer Tools

برای اینکار ابتدا وارد مخزن گیت هاب زیر شوید تا اطلاعات دستگاه های رایج و مرسومی که به صورت پیشفرض در Developer Tools مرورگر کروم ندارد را ببینید:

https://github.com/amirshnll/custom-device-emulation-chrome

نکته: مخزن بالا یک مخزن متن باز می باشد در نتیجه اگر موردی را دوست داشتید یا در لیست بالا نبود حتما به آن اضافه کنید.

سپس مراحل زیر را دنبال کنید:

  • مروگر کروم خود را باز کنید.
  • ابتدا کلیدهای ترکیبی Shift + CTRL + I و سپس کلیدهای ترکیبی Shift + CTRL + M را فشار دهید.
  • روی بخش “Dimentions” کلیک کنید و سپس روی “Edit” بزنید:
مرحله یک و دو - افزودن دستگاه های مختلف به Chrome Developer Tools
مرحله یک و دو – افزودن دستگاه های مختلف به Chrome Developer Tools
  • سپس روی کلید “add custom device” بزنید:
مرحله سه - افزودن دستگاه های مختلف به Chrome Developer Tools
مرحله سه – افزودن دستگاه های مختلف به Chrome Developer Tools
  • اطلاعات را با توجه به دستگاه مورد نظر خود طبق این فایل وارد کنید:
مرحله چهارم - افزودن دستگاه های مختلف به Chrome Developer Tools
مرحله چهارم – افزودن دستگاه های مختلف به Chrome Developer Tools
مرحله پنج - افزودن دستگاه های مختلف به Chrome Developer Tools
مرحله پنج – افزودن دستگاه های مختلف به Chrome Developer Tools
  • روی کلید “Add” بزنید.
مرحله نهایی - افزودن دستگاه های مختلف به Chrome Developer Tools
مرحله نهایی – افزودن دستگاه های مختلف به Chrome Developer Tools
  • حالا به سادگی می توانید از این دستگاه که به تازگی اضافه کرده اید استفاده کنید.
  • پایان.!

 

تمام مراحل بالا در ویدیوی یوتیوب زیر توضیح داده شده است:

اگر ویدیوی بالا برای شما پخش نشد روی این لینک کلیک کنید.

دیدگاهتان را بنویسید