فحص العنصر: كيفية تحرير أي صفحة ويب بشكل مؤقت
نشرت: 2021-09-14هناك أداة قوية تختبئ في متصفحك: فحص العنصر .
انقر بزر الماوس الأيمن فوق أي صفحة ويب ، وانقر فوق فحص ، وسترى الأجزاء الداخلية من هذا الموقع: كود المصدر الخاص به ، والصور و CSS التي تشكل تصميمه ، والخطوط والأيقونات التي يستخدمها ، وشفرة Javascript التي تدعم الرسوم المتحركة ، والمزيد . يمكنك معرفة المدة التي يستغرقها الموقع في التحميل ، ومقدار النطاق الترددي المستخدم للتنزيل ، واللون الدقيق في نصه.
أو يمكنك استخدامه لتغيير أي شيء تريده على الصفحة.
يعد Inspect Element طريقة مثالية لمعرفة ما الذي يجعل الويب محددًا ، ومعرفة ما هو معطل على مواقعك ، واستنباط الشكل الذي سيبدو عليه تغيير اللون والخط ، وتجنب الاضطرار إلى استخدام Photoshop لتفاصيل خاصة في لقطات الشاشة. إنها قوة خارقة لم تكن تعرف أن متصفحك يمتلكها.
دعنا نتعلم كيفية استخدام Google Chrome Inspect Element لمساعدتك في عملك ، سواء كنت مطورًا أو مسوقًا لم يكتب أبدًا سطرًا من التعليمات البرمجية. إذا كنت تقرأ هذا على هاتفك ، فقد حان الوقت للتبديل إلى الكمبيوتر المحمول ، وفتح Google Chrome ، والاستعداد لتعديل بعض التعليمات البرمجية.
تشتمل معظم متصفحات الويب - بما في ذلك Mozilla Firefox و Safari من Apple - على أداة Inspect Element ، بينما يشتمل مستعرض Microsoft Internet Explorer و Edge على مجموعة مماثلة من أدوات المطور. يركز هذا البرنامج التعليمي على أدوات فحص العنصر في Google Chrome ، ولكن معظم الميزات تعمل بنفس الطريقة في المتصفحات الأخرى.
انتظر ، لماذا يجب علي استخدام فحص العنصر؟
إذا لم تقم مطلقًا بإلقاء نظرة خاطفة على رمز موقع الويب بدافع الفضول ، فقد تتساءل عن سبب وجوب تعلم كيفية استخدام Inspect Element.
المصمم : هل تريد معاينة كيف سيبدو تصميم الموقع على الهاتف المحمول؟ أو تريد أن ترى كيف سيبدو الظل الأخضر المختلف على زر الاشتراك؟ يمكنك القيام بالأمرين في ثوانٍ باستخدام Inspect Element.
المسوق : هل أنت مهتم بالكلمات الرئيسية التي يستخدمها المنافسون في رؤوس مواقعهم ، أو ترغب في معرفة ما إذا كان تحميل موقعك بطيئًا جدًا لاختبار سرعة الصفحة من Google؟ يمكن أن يعرض "فحص العنصر" كليهما.
الكاتب : هل سئمت من إخفاء اسمك وبريدك الإلكتروني في لقطات الشاشة؟ باستخدام Inspect Element ، يمكنك تغيير أي نص في صفحة ويب في ثانية.
وكيل الدعم : هل تحتاج إلى طريقة أفضل لإخبار المطورين بما يحتاج إلى إصلاح في الموقع؟ يتيح لك Inspect Element إجراء تغيير سريع في مثال لإظهار ما تتحدث عنه.
بالنسبة إلى حالات الاستخدام هذه وعشرات حالات الاستخدام الأخرى ، يعد Inspect Element أداة سهلة الاستخدام للالتفاف حولها. إنه جزء من أدوات المطور في متصفحك ، والذي يتضمن عددًا من الميزات الإضافية: وحدة تحكم لتشغيل التعليمات البرمجية ، وصفحة عرض المصدر لرؤية الكود الأولي الموجود خلف الموقع فقط ، وصفحة المصادر مع قائمة بكل ملف تم تحميله في موقع ويب والمزيد. يمكنك استكشاف كل هذه الأشياء بنفسك ، ولكن في الوقت الحالي ، دعنا نرى كيفية استخدام علامة تبويب العناصر الرئيسية لتعديل صفحة ويب بمفردنا.
كيف تبدأ بفحص العنصر
هناك عدة طرق للوصول إلى Google Chrome Inspect Element. ما عليك سوى فتح موقع ويب تريد محاولة تحريره (لمتابعة هذا البرنامج التعليمي ، افتح Zapier.com) ، ثم افتح أدوات Inspect Element بإحدى الطرق الثلاث التالية:
انقر بزر الماوس الأيمن في أي مكان على صفحة الويب ، وفي أسفل القائمة المنبثقة ، سترى " فحص ". انقر فوق ذلك.
انقر فوق قائمة الهامبرغر (الرمز مع 3 نقاط مكدسة) في أقصى يمين شريط أدوات Google Chrome ، انقر فوق المزيد من الأدوات ، ثم حدد أدوات المطور . بالتناوب ، في قائمة الملف ، انقر فوق عرض -> المطور -> أدوات المطور.
هل تفضل اختصارات لوحة المفاتيح؟ اضغط على
CMD
+Option
+I
على جهاز Mac أوF12
على جهاز كمبيوتر لفتح عناصر الفحص دون النقر فوق أي شيء.
بشكل افتراضي ، تفتح أدوات المطور في جزء أسفل المستعرض الخاص بك وستظهر علامة التبويب العناصر - وهي أداة فحص العنصر الشهيرة التي كنا نبحث عنها.
لن يكون لديك مساحة كبيرة للعمل مع Inspect Element في الجزء السفلي من الشاشة ، لذا انقر على النقاط الرأسية الثلاث في أعلى الجانب الأيمن من جزء فحص العناصر بالقرب من علامة "X" (التي تنقر عليها لإغلاقها الجزء). الآن ، سترى خيارًا لنقل الجزء إلى الجانب الأيمن من المستعرض (عرض الإرساء الأيمن) أو لفتح الجزء في نافذة منفصلة تمامًا (عرض إلغاء الإرساء).
في هذا البرنامج التعليمي ، دعنا نرسي الجزء الموجود على الجانب الأيمن من نافذة المتصفح لمنحنا مساحة أكبر للعمل. يمكنك جعل لوحة Developer Tools أوسع أو أضيق من خلال التمرير فوق الحد الأيسر. مرة واحدة في يظهر المؤشر ، اسحب الجزء إلى اليسار لتوسيعه أو لتضييقه لليمين.
الآن بعد أن أصبحنا في Inspect Element ، هناك مجموعة من الأدوات المفيدة في متناول أيدينا والتي يمكننا استخدامها لجعل أي موقع يبدو بالضبط كما نريد. في هذا البرنامج التعليمي ، سنركز على علامات تبويب العناصر والمحاكاة والبحث.
بحث
تتيح لك علامة التبويب "بحث" البحث في صفحة ويب عن محتوى معين أو عنصر HTML. إنه مخفي بعض الشيء: ستحتاج إلى النقر فوق النقاط الثلاث ثم النقر فوق بحث في جميع الملفات للكشف عنها. ستتمكن بعد ذلك من البحث في كل ملف في صفحة الويب عن أي شيء تريده.
عناصر
"Inspect Element" هي الأداة التي سنستكشفها كثيرًا في هذا البرنامج التعليمي ، وهي ما يتم فتحه أولاً عند تشغيل أدوات المطور في معظم المتصفحات. أو انقر فوق علامة التبويب "العناصر" في أدوات المطور للرجوع إليها إذا كنت تستكشف في مكان آخر.
في علامة التبويب Explore ، يمكنك رؤية كل HTML و JavaScript و CSS التي أنشأت موقعًا على الويب. إنه يشبه تقريبًا مجرد عرض مصدر موقع ويب ، مع اختلاف واحد جوهري: يمكنك تغيير أي من التعليمات البرمجية ، ومشاهدة التغييرات في الوقت الفعلي على الموقع الذي فتحته. يمكنك تغيير أي شيء من النسخة إلى المحرف ، ثم لقطة شاشة للتصميم الجديد أو حفظ تغييراتك (اذهب فقط إلى عرض> مطور> عرض المصدر واحفظ الصفحة كملف HTML ، أو انسخ تغييرات التعليمات البرمجية إلى محرر النصوص الخاص بك). بمجرد إعادة تحميل الصفحة ، ستختفي جميع التغييرات إلى الأبد.
محاكاة
هل أردت يومًا معاينة صفحة ويب على هاتف دون إخراج هاتفك من جيبك؟ تتيح لك علامة التبويب "المحاكاة" عرض صفحة الويب كما تبدو على أي جهاز ، مع إعدادات مسبقة للأجهزة الشائعة أو خيار لضبط دقة الشاشة ونسبة العرض إلى الارتفاع. يمكنك حتى تعيين سرعة إنترنت تمت مضاهاتها ، لمعرفة مدى سرعة تحميل الموقع عبر الطلب الهاتفي.
إنه أيضًا مخفي قليلاً: ستحتاج إلى فتح Inspect Element والنقر فوق زر رمز الهاتف لبدء تشغيله. بعد ذلك ، سيكون لديك أداة مثالية لفهم كيفية تجربة الآخرين لصفحة الويب.
حان وقت الذهاب إلى العمل. سنستخدم البحث أولاً للعثور على أشياء على صفحة ويب ، ثم نستخدم العناصر لتحرير النص والمزيد على أحد المواقع ، وأخيرًا سنستخدم المحاكاة لمعرفة كيف سيبدو موقعنا على الهاتف من موقع معين.
ابحث عن أي شيء في موقع باستخدام فحص عنصر البحث
أتساءل ما الذي يذهب إلى المواقع المفضلة لديك؟ البحث هو أفضل أداة لديك لذلك ، بصرف النظر عن قراءة شفرة مصدر الموقع بالكامل. يمكنك فقط فتح طريقة عرض العناصر الافتراضية ، والضغط على CTRL
+ F
أو CMD
+ F
والبحث في التعليمات البرمجية المصدر ، ولكن أداة البحث الكاملة ستتيح لك البحث في كل ملف على الصفحة ، مما يساعدك في العثور على نص داخل ملفات CSS و JavaScript أو حدد موقع صورة الرمز الذي تحتاجه لمقال.
للبدء ، افتح Zapier.com في Chrome إذا لم تكن قد قمت بذلك بالفعل ، ثم افتح Inspect Element ، وانقر على النقاط الرأسية الثلاث في الزاوية العلوية اليمنى من جزء أدوات المطور (بالقرب من الإغلاق "X") ، وحدد " بحث في كل الملفات ". ستظهر علامة التبويب "بحث" في النصف السفلي من جزء "أدوات المطور".
تذكر كيفية فتح Inspect Element؟ ما عليك سوى النقر بزر الماوس الأيمن والنقر فوق Inspect Inspect Element ، أو الضغط على Command + Option + i على جهاز Mac أو F12 على جهاز الكمبيوتر الخاص بك.
في حقل البحث ، يمكنك كتابة أي شيء - أي شيء - تريد البحث عنه في صفحة الويب هذه ، وسيظهر في هذا الجزء. دعونا نرى كيف يمكننا استخدام هذا.
اكتب meta name
في حقل البحث ، واضغط على مفتاح Enter ، وسترى على الفور كل تكرار لـ "meta name" في الكود الموجود في هذه الصفحة. الآن ، يمكنك رؤية البيانات الوصفية لهذه الصفحة ، والكلمات الرئيسية لتحسين محركات البحث (SEO) التي تستهدفها ، وما إذا كانت قد تمت تهيئتها للسماح لـ Google بفهرستها للبحث أم لا. هذه طريقة سهلة لمعرفة ما يستهدفه منافسوك - وللتأكد من عدم العبث بأي شيء على موقعك.
لنجرب استعلامًا آخر. احذف meta name
، واكتب h2
في حقل البحث بدلاً من ذلك ، ثم اضغط على "دخول". سترى كل تكرارات لـ "h2" في ملفات JavaScript الخاصة بـ Zapier في الجزء العلوي ، ولكن بمجرد التمرير إلى أسفل ، يمكنك رؤية كل رأس "h2" في هذه الصفحة.
يعد البحث أداة فعالة للمصممين أيضًا حيث يمكنك البحث حسب اللون أيضًا. اكتب #ff4a00
في حقل البحث واضغط على "دخول" (وتأكد من تحديد المربع بجوار "تجاهل الحالة" لرؤية جميع النتائج). يجب أن تشاهد الآن في كل مرة اللون # ff4a00 ، ظل Zapier للبرتقالي ، في ملفات CSS و HTML الخاصة بهذا الموقع. ثم ، فقط انقر فوق السطر الذي يقرأ "color: # ff4a00؛" للانتقال إلى هذا السطر في HTML للموقع وتعديله بنفسك (شيء سنلقي نظرة عليه في القسم التالي).
هذه طريقة سهلة للمصممين للتأكد من أن الموقع يتبع دليل أسلوب علامتهم التجارية. باستخدام أداة "البحث" ، يمكن للمصممين التحقق بسهولة من CSS لصفحة الويب لمعرفة ما إذا تم تطبيق لون على العنصر الخطأ ، أو إذا تم استخدام مجموعة خطوط غير صحيحة على صفحة الويب ، أو إذا كنت لا تزال تستخدم لون قديم في مكان ما على موقعك.
أداة "البحث" هي أيضًا الطريقة المثلى للتواصل مع المطورين بشكل أفضل حيث يمكنك أن تبين لهم بالضبط أين وجدت خطأ أو بالضبط ما الذي يحتاج إلى التغيير. فقط أخبرهم برقم السطر الذي توجد به المشكلة ، وستحصل على الإصلاح بشكل أسرع.
أو يمكنك تغيير صفحة الويب بنفسك باستخدام العناصر ، وهي الجزء الأساسي من أدوات مطوري Chrome.
تغيير أي شيء مع العناصر
يستخدم مطورو الواجهة الأمامية أداة Inspect Element كل يوم لتعديل مظهر صفحة الويب وتجربة أفكار جديدة - ويمكنك ذلك أيضًا. يتيح لك Inspect Elements تعديل مظهر ومحتوى صفحة الويب ، عن طريق إضافة تعديلات مؤقتة إلى ملفات CSS و HTML الخاصة بالموقع.
بمجرد إغلاق الصفحة أو إعادة تحميلها ، ستختفي تغييراتك ؛ سترى فقط التغييرات على جهاز الكمبيوتر الخاص بك ولا تقوم بالفعل بتحرير موقع الويب الحقيقي نفسه. بهذه الطريقة ، لا تتردد في تجربة أي شيء وتغييره - ثم نسخ وحفظ أفضل التغييرات لاستخدامها مرة أخرى لاحقًا.
دعونا نرى ما يمكننا فعله به.
انقر فوق علامة التبويب "العناصر" في جزء أدوات المطور - وإذا كنت تريد مساحة أكبر ، فانقر على مفتاح "Esc" لإغلاق مربع البحث الذي فتحته من قبل. يجب أن تشاهد HTML لهذه الصفحة - الآن تعرف كيف يتم صنع النقانق.
في الزاوية العلوية اليسرى من جزء المطور ، سترى رمز الماوس أعلى مربع. انقر فوقه ، ثم يمكنك تحديد أي عنصر ترغب في تغييره على الصفحة. لذلك دعونا نغير بعض الأشياء!
تغيير النص في صفحة ويب
هل رغبت يومًا في تغيير النص على أحد المواقع - ربما لترى كيف سيبدو سطر الوصف الجديد على صفحتك الرئيسية ، أو لإزالة عنوان بريدك الإلكتروني من لقطة شاشة Gmail؟ الآن انت تستطيع.
انقر فوق رمز "الماوس أعلى المربع" ، ثم انقر فوق أي نص في الصفحة - ربما يكون سطر الوصف في صفحة Zapier الرئيسية. في جزء أدوات المطور ، سترى سطرًا نصيًا مميزًا باللون الأزرق يبدو كالتالي:
انقر نقرًا مزدوجًا فوق نص "Connect Your Apps" الذي تم تمييزه باللون الأزرق في جزء Developer Tools ، وسيتحول إلى حقل نصي قابل للتعديل.
اكتب أي شيء تريده في حقل النص هذا (يجب أن تعمل عبارة "Auri is a genius" بشكل جيد) ، ثم اضغط على Enter. هاهو! لقد قمت للتو بتغيير النص الموجود على صفحة الويب.
قم بتحديث الصفحة ، وسيعود كل شيء إلى طبيعته.
مرح؟ دعنا نغير بعض الأشياء في هذه الصفحة.
يتم إعادة تحميل جزء "أدوات المطور" بالصفحة ، ولكن دعنا نغلقها. اضغط على "X" في الزاوية العلوية اليمنى من الصفحة.

رائع. سنقوم الآن بفتحه احتياطيًا - عند النص الذي نريد تعديله مباشرةً. كل ما عليك فعله هو النقر بزر الماوس الأيمن على جزء الصفحة الذي تريد تغييره ، ثم النقر على رابط فحص أو فحص العنصر الذي يظهر أسفل قائمة النقر بزر الماوس الأيمن.
عندما يفتح جزء أدوات المطور ، يجب أن يبرز هذه الجملة تلقائيًا. أنيق جدا ، أليس كذلك؟ إنها الأشياء الصغيرة التي تهم.
الآن بعد أن حددنا سطر الوصف على موقع Zapier ، فلنغير شكله.
تغيير لون وخط العناصر
إلى يمين هذه الجملة في جزء أدوات المطور ، سترى جزءًا فرعيًا به 3 علامات تبويب إضافية: الأنماط والمحسوبة ومستمعات الأحداث. يسمح لك كل منها بتغيير شكل هذه الجملة على الصفحة. لنبدأ في علامة التبويب "الأنماط".
قد تلاحظ أنه تم شطب بعض الأشياء في علامة التبويب "الأنماط". هذا يعني أن هذه الأنماط غير نشطة للعنصر الذي حددناه ، لذلك لن يكون لتغيير هذه القيم أي تأثير. يمكننا تجاهل هذه لأغراضنا.
دعنا نحاول تغيير شيء ما. انقر فوق رمز السهم في الجزء العلوي من "فحص العنصر" مرة أخرى ، وحدد النص الموجود أسفل الزر "تسجيل" في الصفحة. ابحث عن "محاذاة النص" في علامة التبويب "أنماط" (قد تحتاج إلى التمرير قليلاً للعثور على هذا).
الآن ، تم تعيينه على "المركز" ، ولكن انقر نقرًا مزدوجًا فوق "الوسط" واكتب left
. هذا يجعل النص بمحاذاة إلى اليسار في الصفحة.
الآن دعونا نلعب مع اللون. استخدم رمز الماوس في "فحص العنصر" لتحديد الزر هذه المرة ، ثم في علامة التبويب "الأنماط" ، ابحث عن هذا السطر:
وانقر نقرًا مزدوجًا على "# ff4a00". اكتب #4199ad
(لا تنسى #) واضغط على "دخول".
لقد قمنا للتو بتغيير لون الزر من البرتقالي إلى الأزرق! الآن دعونا نجرب شيئًا رائعًا حقًا.
تغيير حالات العنصر
هل تريد أن ترى كيف سيبدو زر أو ارتباط بمجرد أن يحوم شخص ما فوقه أو ينقر عليه؟ يمكن أن يُظهر Chrome Inspect Element ذلك أيضًا باستخدام أدوات حالة عنصر القوة. يمكنك أن ترى كيف سيبدو العنصر بمجرد تمرير الزائر فوق العنصر (حالة التمرير) ، وتحديد العنصر (حالة التركيز) ، و / أو النقر على هذا الرابط (الحالة التي تمت زيارتها).
لنجرب هذا. تأكد من تحديد زر التسجيل في صفحة Zapier الرئيسية. ثم ، انقر بزر الماوس الأيمن فوق هذا الرمز في علامة التبويب "العناصر" ، وحدد :active:
في تلك القائمة.
سيؤدي ذلك إلى تغيير الزر إلى اللون الرمادي ، والذي يظهره موقع Zapier عند النقر فوق الزر.
الآن قم بتغيير قيمة لون الخلفية إلى #FF4A00
، وسترى على الفور تغير لون الزر.
جرب التجربة - قم بتغيير :hover:
color ، ثم إلغاء :hover:
في قائمة النقر بزر الماوس الأيمن واسحب الماوس فوق الزر لرؤية لون الزر الجديد.
تغيير الصور
يمكنك بسهولة تغيير الصور على صفحة الويب باستخدام Inspect Element أيضًا. دعنا نتبادل خلفية Superhero على موقع Zapier بهذه الصورة الدرامية لتوهج شمسي من وكالة ناسا.
أولاً ، انسخ والصق هذا الرابط للصورة:
https://c1.staticflickr.com/9/8314/7931831962_7652860bae_b.jpg
الآن ، افتح Inspect Element على خلفية صفحة Zapier الرئيسية ، وتأكد من تحديد سطر signup-hero
في الكود. انقر نقرًا مزدوجًا فوق رابط عنوان URL للخلفية في جزء "الأنماط" ، والصق الرابط الذي نسخته أعلاه.
اضغط على "دخول" وشاهد الفرق على الفور.
ملاحظة: يمكنك أيضًا تغيير صورة إلى ملف GIF أو فيديو - كل ما تحتاجه هو رابط للملف ، ويمكنك إضافته.
يعد تحرير النص أمرًا في متناول اليد ، ومبادلة الصور أمر ممتع ، وقد يساعدك تغيير الألوان والأنماط على إجراء التغييرات التي تريدها على موقعك بسرعة. ولكن كيف سيبدو الشعار الجديد وتصميم الأزرار على الهاتف المحمول؟
وهنا يأتي دور المحاكاة - حيث يمكن تطبيق كل شيء قمنا بمراجعته حتى الآن بشكل أكبر. دعونا نرى كيف.
اختبار موقع على أي جهاز مع المحاكاة
كل شيء يجب أن يكون متجاوبًا اليوم. لم تعد مواقع الويب تُعرض على أجهزة الكمبيوتر فحسب - بل إنها أكثر عرضة من أي وقت مضى لمشاهدتها على الهاتف أو الجهاز اللوحي أو التلفزيون أو أي نوع آخر من الشاشات. يجب دائمًا وضع ذلك في الاعتبار عند إنشاء محتوى وتصميمات جديدة.
تعد المحاكاة أداة رائعة لتقريب كيفية ظهور مواقع الويب للمستخدمين عبر مختلف الأجهزة والمتصفحات وحتى المواقع. على الرغم من أن هذا لا يحل محل الاختبار الفعلي على مجموعة متنوعة من الأجهزة والمتصفحات ، إلا أنها بداية رائعة.
في جزء أدوات المطور ، ستلاحظ رمز هاتف صغيرًا في الزاوية العلوية اليسرى. انقر فوقه. يجب أن يغير هذا الصفحة إلى صفحة صغيرة على غرار الهاتف مع قائمة في الأعلى لتغيير الحجم.
قم بتغيير حجم المتصفح الصغير لترى كيف تبدو الأشياء إذا كنت تتصفح على جهاز لوحي أو هاتف أو حتى شاشة أصغر. أو ، انقر فوق القائمة في الجزء العلوي لتحديد أحجام الأجهزة الافتراضية مثل iPad Pro
أو iPhone 8 Plus
وحدد الأخير.
يجب أن تتقلص شاشة صفحة الويب إلى حجم iPhone 8 Plus ، ويمكنك التكبير قليلاً عن طريق النقر فوق الرمز + بجوار الرقم الموجود في أعلى يمين الشبكة - وهذا ما سيبدو عليه الموقع إذا قام شخص ما بالتكبير التليفون المحمول.
المضي قدمًا قم بتكبير العرض عن طريق سحب الحافة اليمنى لمحاكاة صفحة الويب إلى اليمين. انظر ماذا سيحدث؟ لم نعد في عرض iPhone 8 Plus. يتيح لك سحب الشاشة على طول الشبكة رؤية كيف ستتغير صفحة الويب مع تغير حجم الشاشة ، لكن العرض الخاص بك لن يعكس طراز الجهاز الذي اخترته سابقًا.
دعنا نعود إلى عرض iPhone 8 Plus عن طريق تحديد هذا في القائمة المنسدلة للطراز مرة أخرى. بجانب القائمة المنسدلة توجد كلمة "عمودي". كما قد تكون خمنت ، يسمح لك هذا بالتبديل بين المنظر الأفقي والأفقي.
الآن ، يمكننا أن نرى كيف سيبدو هذا المنشور إذا كنت تقرأه على iPhone 8 Plus. لا تتردد في اللعب مع الأجهزة الأخرى لترى كيف تتغير صفحة الويب هذه ودقة الشاشة. ستتفاعل جميع أدوات المطورين الأخرى التي قمنا بها حتى الآن مع عرض الجهاز. على سبيل المثال ، حدد نص شعار Zapier مرة أخرى.
في عرض iPhone 8 Plus ، يمكننا أن نرى أن هذا النص هو 2em ، بينما في العرض الافتراضي على جهاز الكمبيوتر ، يكون 3em.
"em" هي وحدة حجم الخط التي تتيح لك تغيير حجم النص تلقائيًا بالنسبة للنص المحيط. على سبيل المثال ، لنفترض أن لدينا مستخدمًا لديه إعدادات خط مخصصة كبيرة على متصفحه. إذا قمت بتعيين حجم خط الفقرة على 14 بكسل ، فسيكون الخط دائمًا 14 بكسل لهذا المستخدم بغض النظر عن السبب. ومع ذلك ، إذا قمت بتعيين حجم خط الفقرة الخاص بك على 1em ، فسيستخدم متصفح المستخدم هذه الوحدة لتوسيع نطاق النص الخاص بك إلى إعدادات المستخدم الكبيرة. تقوم الهواتف والأجهزة اللوحية بذلك لتكبير النص بشكل جيد.
الآن دعنا ننتقل إلى عرض Apple iPad وحدد رأس "الاختبار عبر الأجهزة" أعلاه. هذه المرة ، حجم الخط هو 3em. تم تغيير حجم الخط بناءً على عرض الجهاز ، والعودة إلى الحجم الافتراضي الذي سيستخدمه على جهاز الكمبيوتر ، وذلك بفضل شاشة الجهاز اللوحي الأكبر حجمًا.
محاكاة مستشعرات الجهاز المحمول
ربما لاحظت أن الماوس يظهر الآن كدائرة صغيرة على صفحة الويب. يتيح لك هذا التفاعل مع الصفحة كما لو كنت على جهازك المحمول. إذا نقرت أثناء سحب الصفحة لأسفل ، فلن يؤدي ذلك إلى تمييز النص كما هو الحال في المستعرض الخاص بك - فهو يسحب الشاشة لأسفل كما لو كنت على جهاز بشاشة تعمل باللمس. باستخدام طريقة العرض هذه ، يمكنك مشاهدة مدى اتساع مناطق اللمس على صفحة الويب. هذا يعني أنه يمكنك معرفة الأزرار أو الرموز أو الروابط أو العناصر الأخرى التي يمكن لمسها بإصبعك بسهولة.
يمكنك حتى جعل متصفحك يتصرف مثل الهاتف. اضغط على مفتاح "Esc" لفتح جزء البحث في Inspect Element مرة أخرى ، وهذه المرة انقر فوق قائمة النقاط الثلاث على الجانب الأيسر للحصول على قائمة من الخيارات. حدد أجهزة الاستشعار للحصول على ثلاث أدوات جديدة: تحديد الموقع الجغرافي والتوجيه واللمس.
يتيح لك Touch تشغيل أو إيقاف تشغيل محدد الدائرة الافتراضي الذي يعمل كإصبع أكثر من كونه مؤشر الماوس العادي. يتيح لك الاتجاه التفاعل مع مواقع الويب الحساسة للحركة مثل الألعاب عبر الإنترنت التي تتيح لك نقل الأشياء عن طريق تحريك هاتفك. ويتيح لك تحديد الموقع الجغرافي التظاهر بأنك في موقع مختلف.
دعنا نحاول مشاهدة هذا الموقع من مقر Google الرئيسي في ماونتن فيو ، كاليفورنيا.
حدد المربع بجوار "محاكاة إحداثيات الموقع الجغرافي" ، وأدخل القيمة 37
في Lat = حقل النص و 122
في Lon = حقل النص. اضغط على Enter بلوحة المفاتيح.
لا شيء يتغير ، أليس كذلك؟
هذا لأنه لا يوجد محتوى في هذه الصفحة يتغير بناءً على موقعك. إذا قمت بتغيير الإحداثيات على موقع مثل Groupon.com
الذي يستخدم موقعك لعرض محتوى مترجم ، فستحصل على نتائج مختلفة. انتقل إلى موقع Google.com
في موقع مختلف ، وربما ترى شعار Google جديدًا لقضاء عطلة في بلد آخر ، أو على الأقل ستحصل على النتائج بلغة مختلفة.
المحاكاة هي طريقة رائعة لتضع نفسك في مكان المستخدم الخاص بك وتفكر فيما قد يراه المستخدم على صفحتك على الويب - وهي طريقة ممتعة لاستكشاف الويب الدولي.
محاكاة شبكات المحمول
يمكنك أيضًا معرفة ما يشبه تصفح موقع على شبكات مختلفة ، ربما لمعرفة ما إذا كان سيتم تحميل موقعك حتى لو كان المستخدمون لديك على شبكة 3G أبطأ.
لتجربتها ، انقر على زر الدوائر الثلاث في يسار علامة تبويب بحث "فحص العنصر" مرة أخرى ، وحدد "شروط الشبكة". هناك ، يمكنك الاختيار من بين شبكة 3G السريعة أو البطيئة ، أو غير متصل لترى كيف تعمل الصفحة بدون الإنترنت. أو انقر فوق إضافة ... لتضمين الاختبار الخاص بك (ربما أضف 56 كيلوبت في الثانية لاختبار الإنترنت عبر الطلب الهاتفي). الآن ، أعد تحميل الصفحة ، وسترى المدة التي سيستغرقها الموقع ليتم تحميله باتصال بطيء - وكيف يبدو الموقع أثناء التحميل. سيوضح ذلك سبب وجوب تحسين موقعك ليتم تحميله بشكل أسرع على الاتصالات البطيئة.
يمكنك أيضًا تغيير وكيل المستخدم الخاص بك - قم بإلغاء تحديد "التحديد تلقائيًا" بجوار "وكيل المستخدم" وحدد "Internet Explorer 7" ربما لمعرفة ما إذا كان الموقع يغير طريقة عرضه للمتصفحات الأقدم. يعد هذا أيضًا اختراقًا مفيدًا لتحميل صفحات الويب حتى لو ادعوا أنها تعمل فقط في متصفح مختلف مثل Internet Explorer.
التحديات
لننتهي ببعض التحديات. اذهب وأظهر لنا ما تعلمته!
قم بتغيير العناوين الرئيسية على CNN.com وقم بتغريدنا بلقطة شاشة لعنوان مقالتك الشائعة.
قم بتكرار موقع الويب المفضل لديك باستخدام "عرض المصدر" ، والعبث مع HTML لجعله خاصًا بك.
شاهد كيف يتم عرض موقع الويب الخاص بك على جهاز محمول ، وأظهر لمطورك ما يمكن فعله بشكل أفضل من خلال إصلاحه بنفسك!
يعتمد فريق التسويق في Zapier على Inspect Element لتعديل المعلومات الخاصة من لقطات الشاشة في مراجعات التطبيق لدينا ، بينما يستخدمها فريق التصميم لدينا لنموذج التغييرات ومعرفة كيف ستبدو الأشياء على الشاشات المختلفة.
كيف تستخدم فحص العنصر؟ نود أن نسمع قصصك في التعليقات أدناه!
هل تستمتع بمهاراتك الجديدة في القرصنة؟ خذها إلى أبعد من ذلك في دليلنا حول كيفية إنشاء موقع ويب بدون أي تشفير - والدليل المصاحب له حول كيفية عمل رسومات رائعة بدون أي تشفير.
تم نشر هذا البرنامج التعليمي في الأصل في 5 كانون الثاني (يناير) 2015 ، ثم تم تحديثه وإعادة نشره في 6 حزيران (يونيو) 2017 و 25 كانون الثاني (يناير) 2018 مع لقطات شاشة وخطوات من أحدث إصدار من Google Chrome.