كيفية فحص العناصر على أجهزة Mac و Windows و iPhone و iPad

يستخدم المطورون ومصممي واجهة المستخدم ميزة Inspect Element لتعديل مواقع الويب عبر الإنترنت دون تغيير التعليمات البرمجية المصدر. ولكن كيف تفحص العناصر دون الخوض في دورة تطوير الويب؟

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

يمكنك القيام بالعديد من الحيل السحرية مثل تغيير تخطيط موقع الويب ، وأخذ لقطات شاشة خالية من النص ، وتغيير الخطوط ، وتعديل الأرقام ، والمزيد.

اعثر أدناه على دليل موجز مفصل خطوة بخطوة لمعرفة كيفية فحص العناصر دون عناء.

ما هو فحص العنصر؟

يعد Inspect Element أداة تطوير ويب متوفرة في معظم متصفحات الويب. يمكنك استخدامه لتحرير الكود المصدري للواجهة الأمامية لأي موقع ويب تزوره.

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

فيما يلي بعض الطرق الإبداعية لاستخدامه:

• تحتاج إلى التقاط لقطة شاشة من موقع ويب ، والنصوص الموجودة على الصورة تزعجك. استخدم أداة Inspect Element لحذف تلك النصوص.
• تريد أن تخدع أصدقاءك من خلال إظهار اسمك لهم في New York Times أو Washington Post. فحص العنصر هو أفضل طريقة للقيام بذلك.
• اختبر رموز تصحيح الأخطاء على مواقع الويب من خلال تطبيقها في الوقت الفعلي باستخدام أداة Inspect Element. إذا كان يعمل ، يمكنك تغيير شفرة المصدر الخلفية.
• بصفتك مسوقًا رقميًا ، يمكنك الكشف عن الكلمات الرئيسية للمنافسين وعناوين تحسين محركات البحث والعلامات الوصفية وما إلى ذلك ، باستخدام أداة تطوير الويب القوية هذه.

كيفية فحص العناصر على Windows

يعد استخدام أداة Inspect Element على Windows أمرًا سهلاً للغاية. ابحث أدناه عن دليل تفصيلي لفحص العناصر باستخدام متصفحات الويب المختلفة على Windows:

أداة فحص جوجل كروم

كيفية فحص العناصر على مستعرض Windows Chrome

• عند استخدام Google Chrome ، انقر بزر الماوس الأيمن في أي مكان على موقع الويب.
• ستظهر قائمة سياق النقر بزر الماوس الأيمن.
• في الجزء السفلي ، سترى فحص .
• انقر فوق فحص لعرض أكواد HTML و CSS على اللوحة اليمنى .

كيف يمكنني فتح عنصر الفحص في Chrome دون النقر بزر الماوس الأيمن؟

هناك بعض الاختصارات المفيدة لفتح أداة Inspect Element على Google Chrome لنظام التشغيل Windows. مفاتيح الاختصار هذه على النحو التالي:

• Ctrl + Shift + C
• مفتاح الوظيفة F12

تعمل مفاتيح الاختصار المذكورة أعلاه أيضًا على متصفح Mozilla لنظام التشغيل Windows.

أداة Mozilla Inspector

كيفية فحص العناصر على متصفح Windows Mozilla

في متصفح Mozilla ، تكون العملية مماثلة لـ Google Chrome. ومع ذلك ، ستظهر نافذة المفتش في الجزء السفلي من المتصفح بدلاً من الجانب الأيمن ، كما هو الحال في Google Chrome.

أداة فحص Microsoft Edge

كيفية فحص العناصر على متصفح Windows Edge

من المثير للدهشة أن عنصر الفحص في Microsoft Edge يعمل بشكل مشابه لمتصفح Google Chrome. أداة الفحص متاحة عند النقر بزر الماوس الأيمن. أيضًا ، تظهر أكواد HTML و CSS على الجانب الأيمن ، على غرار Google Chrome.

كيفية فحص العناصر على نظام التشغيل Mac

هل تستخدم Google Chrome أو Mozilla Firefox أو Microsoft Edge على أجهزة كمبيوتر Mac من Apple؟ إذا كانت الإجابة بنعم ، فيمكنك نشر أداة Inspect Element باتباع الخطوات المذكورة أعلاه في قسم Windows.

ولكن ، إذا كنت تستخدم متصفح الويب الافتراضي لنظام macOS ، Safari ، فإن استخدام أداة Inspect Element يعد لعبة صعبة. افتراضيًا ، لا يُظهر Safari فحص العنصر على جهاز Mac. إليك ما عليك القيام به:

كيفية فتح Inspect Element على نظام Mac

أولاً ، تحتاج إلى تنشيط أدوات المطور على Safari على جهاز Mac. إليك الطريقة:

• قم بتشغيل متصفح Safari .
• قم بزيارة موقع ويب تريد فحص عناصر الويب فيه.
• حدد Safari من شريط القائمة العلوي لمتصفح Safari.
• انقر فوق التفضيلات من قائمة السياق التي تفتح.
• في شاشة التفضيلات ، حدد متقدم .
• حدد قائمة "إظهار التطوير" في الجزء السفلي من شاشة "التفضيلات المتقدمة" .

لقد نجحت في تمكين أدوات المطور على Safari لنظام التشغيل Mac. الآن ، اتبع هذه الخطوات لاستخدام Inspect Element:

• انقر بزر الماوس الأيمن فوق أي عنصر من عناصر موقع الويب مثل نص أو صورة .
• ستظهر قائمة السياق. في الجزء السفلي ، سترى فحص العنصر .
• انقر فوق ذلك لفتح قسم تصحيح الأخطاء أسفل موقع الويب الذي يعرض رموز HTML و CSS .

What Are the Keys for Inspect Element?

قد تبحث عن اختصارات لـ Inspect Element على Mac. يمكنك استخدام ما يلي:

• Command + Shift + C
• اضغط على مفتاح التحكم ثم حدد أي عنصر.
• انقر فوق لوحة التعقب بإصبعين

كيفية فحص العناصر على أجهزة Chromebook

يستخدم Chromebook Google Chrome باعتباره المتصفح الافتراضي. ومن ثم ، بعد فتح أي موقع ويب ، ما عليك سوى النقر بزر الماوس الأيمن للعثور على خيار فحص العنصر في قائمة السياق التالية.

إذا كنت تستخدم جهاز Chromebook في العمل أو المدرسة ، فقد تطرح هذا السؤال:

Why Can’t I Inspect on My School Chromebook?

يقوم معظم مديري المدارس والأعمال بتعطيل الميزات المتقدمة على Chromebook التي يوفرونها لك للعمل أو الدراسة. نظرًا لأن أدوات المطورين هي ميزات متقدمة ، فمن المحتمل ألا تعرض مدرستك أو عملك Chromebook أداة Inspect Element.

كيفية فحص العناصر على iPad / iPhone

لسوء الحظ ، لا يمكنك استخدام أداة Inspect Element على جهاز iPhone أو iPad بدون جهاز Mac.

يحتوي iOS و iPadOS على Web Inspector لتطبيق Safari. ومع ذلك ، فهو لا يعمل إلا إذا قمت بتوصيل الجهاز المحمول بجهاز Mac الذي قمت بالفعل بتنشيط أدوات المطور لـ Safari. فيما يلي الخطوات التي يمكنك تجربتها:

• افتح تطبيق إعدادات iPad / iPhone .
• انقر فوق Safari في جزء التنقل الأيسر.

فتح إعدادات Safari على iPad أو iPhone

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

تنشيط Web Inspector على iPad و iPhone

• قم بتنشيط التبديل لـ Web Inspector .
• الآن ، قم بتوصيل الجهاز المحمول بجهاز Mac باستخدام USB .
• تخويل iPhone / iPad على Mac.
• افتح أي موقع ويب على جهاز محمول على Safari.
• الآن ، قم بتشغيل Safari على جهاز Mac وحدد Develop في شريط القائمة العلوي.
• في قائمة السياق التي تفتح ، ابحث عن اسم جهازك المحمول.
• قم بتمرير المؤشر فوق الجهاز المحمول لعرض جميع مواقع الويب المفتوحة.
• الآن ، حدد أي موقع ويب لعرض كود مصدر HTML و CSS على متصفح Safari الخاص بنظام Mac.

خاتمة

لقد قمت باستكشاف جميع الطرق الممكنة لاستخدام أداة Inspect Element لتحرير صفحة الويب المؤقتة. لقد تعلمت أيضًا كيفية فحص العناصر لمختلف الأجهزة مثل Mac و Windows و Chromebook و iPad و iPhone.

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

لا تنس ترك التعليقات أدناه إذا ساعدتك الخطوات المذكورة أعلاه ، أو أي طريقة تجدها صعبة ، أو أي نصائح سرية حول أداة Inspect Element.

هل تحتاج إلى صفحة ويب كمرجع مطبوع؟ تعرف على كيفية حفظ صفحة الويب بسرعة كملف PDF الآن!