كيفية معاينة موقع الويب الخاص بك على أجهزة مختلفة باستخدام Google Chrome

عند إنشاء موقع ويب ، فأنت تريد أن يكون مستجيبًا ومتكيفًا مع أحجام الشاشات المختلفة. تتمثل إحدى طرق اختبار ذلك في استخدام أدوات المطور المضمنة في Google Chrome.

تتيح لك أداة DevTools من Chrome تصحيح أخطاء جوانب مختلفة من موقع الويب الخاص بك. يتضمن ذلك تغيير ومعاينة كود مصدر HTML و CSS. كما يسمح لك بتصحيح كود JavaScript من جانب العميل وعرض حركة مرور الشبكة.

لدى DevTools أيضًا خيار لمعاينة موقع الويب الخاص بك على أجهزة مختلفة. يتضمن ذلك أنواعًا مختلفة من الأجهزة المحمولة وأجهزة iPad والأجهزة اللوحية والمزيد.

لفتح شريط أدوات الجهاز على Google Chrome ، تحتاج إلى فتح ملف نافذة Chrome Developer Tools:

1. افتح موقعًا إلكترونيًا.
2. انقر بزر الماوس الأيمن فوق الصفحة وانقر فوق فحص.
3. سيتم فتح نافذة Chrome DevTools. قد يفتح على جانب المتصفح أو أسفله ، أو كنافذة جديدة.
4. في الجزء العلوي الأيسر من النافذة ، هناك رمزان. انقر فوق الرمز الذي يظهر أجهزة متعددة بأحجام مختلفة.
5. ستتغير الشاشة لتظهر لك الشكل الذي سيبدو عليه موقع الويب على جهاز محمول.

كيفية التبديل بين الأجهزة المختلفة

استخدم القائمة المنسدلة أعلى شريط أدوات الجهاز للتبديل بين الأجهزة المختلفة.

1. سيعرض الجزء العلوي من شريط الأدوات نوع الجهاز الذي تشاهده حاليًا على موقع الويب الخاص بك. انقر فوق القائمة المنسدلة لاختيار جهاز آخر من القائمة.
2. بدلاً من اختيار جهاز موجود ، يمكنك اختيار عرض موقع الويب في وضع الاستجابة. انقر فوق القائمة المنسدلة وحدد ملف متجاوب اختيار.
3. بجانب القائمة المنسدلة ، يمكنك أيضًا اختيار إدخال عرض وارتفاع مخصصين للجهاز.
4. بدلاً من كتابة العرض والارتفاع ، يمكنك أيضًا النقر فوق زوايا النافذة وسحبها لضبط الحجم.

كيفية إضافة جهاز مخصص

إذا كنت ترغب في حفظ عرض وارتفاع مخصصين ، يمكنك إضافة جهاز مخصص. سيعرض شريط أدوات الجهاز جهازك الجديد في القائمة المنسدلة للأجهزة.

1. انقر فوق القائمة المنسدلة التي تسرد جميع الأجهزة.
2. انقر فوق يحرر.
3. ضمن الشريط الجانبي "الإعدادات" ، تأكد من أن لديك ملف الأجهزة علامة التبويب المحددة. هنا ، يمكنك أيضًا عرض قائمة بالمزيد من الأجهزة التي يمكنك الاختيار من بينها.
4. انقر فوق إضافة جهاز مخصص.
5. أدخل اسمًا وعرضًا وارتفاعًا للجهاز. تأكد أيضًا من تحديد نوع الجهاز ، مثل ما إذا كان جهازًا محمولاً أو جهاز سطح مكتب. إذا قمت بتوسيع ملف عميل وكيل المستخدم تلميحات الخيار ، يمكنك إضافة تفاصيل أخرى مثل طراز الجهاز أو العلامة التجارية أو الإصدار.
6. انقر فوق يضيف.
7. ارجع إلى القائمة المنسدلة التي تسرد جميع الأجهزة. سترى جهازك المخصص الجديد في القائمة.
8. يمكنك تعديل هذه التفاصيل مرة أخرى لاحقًا بالرجوع إلى صفحة الجهاز المخصص. اضغط على تعديل بجوار اسم جهازك لبدء التحرير.

من المفيد جدًا أن تكون قادرًا على معاينة موقع الويب الخاص بك على أجهزة وأحجام شاشة مختلفة ، وذلك لعدة أسباب.

أولاً ، يمكنك اختبار أداء موقع الويب الخاص بك على أجهزة مختلفة. قد تحتوي بعض الهواتف المحمولة على سرعات شبكة أسرع أو اختناق وحدة المعالجة المركزية (CPU) من غيرها.

يتيح لك شريط أدوات الجهاز التبديل بين خيارات سرعة الشبكة المختلفة. يتيح لك ذلك اختبار سرعة أي مكالمات إلى الخادم ، أو اختبار تحميل البيانات وعرضها على موقع الويب الخاص بك.

بالإضافة إلى ذلك ، يمكنك أيضًا عرض شكل التصميم على جهاز معين ، من وجهة نظر واجهة المستخدم. إذا كنت تستخدم ملفات استعلامات وسائط CSS، يمكنك استخدام هذه الأداة للتحقق من أنها تعمل بالشكل الذي تتوقعه.

يمكنك استخدام نافذة DevTools في Google Chrome لاختبار كيفية تكيف موقع الويب الخاص بك مع أحجام الشاشات المختلفة ولضمان استجابة موقع الويب الخاص بك. يمكنك أيضًا استخدامه لاختبار أداء موقع الويب الخاص بك ، وما إذا كانت استعلامات الوسائط الخاصة بك تعمل كما هو متوقع.

يمكنك أيضًا استخدام DevTools من Google Chrome لأغراض أخرى. يمكنك استخدامه لتصحيح أي مشكلات في CSS عن طريق تغيير CSS ضمن علامة تبويب الأنماط في نافذة العناصر. يتيح لك ذلك عرض أي تغييرات في CSS على الفور ، مما قد يؤدي إلى تسريع سير عمل الترميز.

كيفية استخدام Google Chrome لتصحيح أخطاء CSS

اقرأ التالي