يستخدم المطورون ومصممي واجهة المستخدم ميزة Inspect Element لتعديل مواقع الويب عبر الإنترنت دون تغيير التعليمات البرمجية المصدر. ولكن كيف تفحص العناصر دون الخوض في دورة تطوير الويب؟
يعد Inspect Element أداة مطور سهلة الاستخدام تخرج من منطقة الجزاء مع متصفحات الويب الشائعة. تحتاج فقط إلى معرفة كيفية نشر الأداة ببضع نقرات أثناء تصفح مواقع الويب.
يمكنك القيام بالعديد من الحيل السحرية مثل تغيير تخطيط موقع الويب ، وأخذ لقطات شاشة خالية من النص ، وتغيير الخطوط ، وتعديل الأرقام ، والمزيد.
اعثر أدناه على دليل موجز مفصل خطوة بخطوة لمعرفة كيفية فحص العناصر دون عناء.
ما هو فحص العنصر؟
يعد Inspect Element أداة تطوير ويب متوفرة في معظم متصفحات الويب. يمكنك استخدامه لتعديل شفرة المصدر الأمامية لأي موقع تزوره.
التغييرات التي تجريها تحدث في وضع الحماية داخل متصفح الويب الخاص بك. لذلك ، أنت لا تجري أي تغييرات على موقع الويب الفعلي. أيضًا ، تختفي التغييرات السطحية التي تجريها عند تحديث الصفحة.
فيما يلي بعض الطرق الإبداعية لاستخدامه:
- تحتاج إلى التقاط لقطة شاشة من موقع ويب ، والنصوص الموجودة على الصورة تزعجك. استخدم أداة Inspect Element لحذف تلك النصوص.
- تريد أن تخدع أصدقاءك من خلال إظهار اسمك لهم في New York Times أو Washington Post. فحص العنصر هو أفضل طريقة للقيام بذلك.
- اختبر رموز تصحيح الأخطاء على مواقع الويب من خلال تطبيقها في الوقت الفعلي باستخدام أداة Inspect Element. إذا كان يعمل ، يمكنك تغيير شفرة المصدر الخلفية.
- بصفتك مسوقًا رقميًا ، يمكنك الكشف عن الكلمات الرئيسية للمنافسين ، وعناوين تحسين محركات البحث ، والعلامات الوصفية ، وما إلى ذلك ، باستخدام أداة تطوير الويب القوية هذه.
كيفية فحص العناصر على Windows
يعد استخدام أداة Inspect Element على Windows أمرًا سهلاً للغاية. ابحث أدناه عن دليل تفصيلي لفحص العناصر باستخدام متصفحات الويب المختلفة على Windows:
أداة فحص جوجل كروم
- عند استخدام جوجل كروم, انقر على اليمين في أي مكان على موقع الويب.
- ستظهر قائمة سياق النقر بزر الماوس الأيمن.
- في الجزء السفلي ، سترى فحص.
- انقر فحص لعرض أكواد HTML و CSS في ملف اللوحة اليمنى.
كيف يمكنني فتح عنصر الفحص في Chrome دون النقر بزر الماوس الأيمن؟
هناك بعض الاختصارات المفيدة لفتح أداة Inspect Element على Google Chrome لنظام التشغيل Windows. مفاتيح الاختصار هذه على النحو التالي:
- كنترول + يحول + ج
- مفتاح الوظيفة F12
تعمل مفاتيح الاختصار المذكورة أعلاه أيضًا على متصفح Mozilla لنظام التشغيل Windows.
أداة Mozilla Inspector
في متصفح Mozilla ، تكون العملية مماثلة لـ Google Chrome. ومع ذلك ، فإن مفتش ستظهر النافذة في الجزء السفلي من المتصفح بدلاً من الجانب الأيمن ، كما هو الحال في Google Chrome.
أداة فحص Microsoft Edge
والمثير للدهشة أن عنصر الفحص في Microsoft Edge يعمل بشكل مشابه لمتصفح Google Chrome. أداة الفحص متاحة عند النقر بزر الماوس الأيمن. أيضًا ، تظهر أكواد HTML و CSS على الجانب الأيمن ، على غرار Google Chrome.
كيفية فحص العناصر على نظام التشغيل Mac
هل تستخدم Google Chrome أو Mozilla Firefox أو Microsoft Edge على أجهزة كمبيوتر Apple التي تعمل بنظام التشغيل Mac؟ إذا كانت الإجابة بنعم ، فيمكنك نشر أداة Inspect Element باتباع الخطوات المذكورة أعلاه في قسم Windows.
ولكن إذا كنت تستخدم متصفح الويب الافتراضي لنظام التشغيل macOS ، Safari ، فإن استخدام أداة Inspect Element يعد لعبة صعبة. افتراضيًا ، لا يُظهر Safari فحص العنصر على جهاز Mac. إليك ما عليك القيام به:
كيفية فتح Inspect Element على نظام Mac
أولاً ، تحتاج إلى تنشيط أدوات المطور على Safari على جهاز Mac. إليك الطريقة:
- يجري ال متصفح سفاري.
- قم بزيارة موقع ويب تريد فحص عناصر الويب فيه.
- يختار سفاري من شريط القائمة العلوي لمتصفح Safari.
- انقر التفضيلات من قائمة السياق التي تفتح.
- على ال شاشة التفضيلات، يختار متقدم.
- حدد ملف عرض تطوير القائمة في الجزء السفلي من التفضيلات المتقدمة شاشة.
لقد نجحت في تمكين أدوات المطورين على Safari لنظام التشغيل Mac. الآن ، اتبع هذه الخطوات لاستخدام Inspect Element:
- في أي عنصر من عناصر موقع الويب مثل نص أو صورة ، انقر على اليمين.
- ستظهر قائمة السياق. في الجزء السفلي ، سترى تدقيق العنصر.
- انقر فوق ذلك لفتح قسم تصحيح الأخطاء أسفل موقع الويب الذي يعرض HTML و CSS رموز.
ما هي مفاتيح فحص العنصر؟
قد تبحث عن اختصارات لـ Inspect Element على Mac. يمكنك استخدام ما يلي:
- يأمر + يحول + ج
- اضغط على يتحكم key ثم حدد أي عنصر.
- انقر فوق لوحة التعقب بإصبعين
كيفية فحص العناصر على أجهزة Chromebook
يستخدم Chromebook Google Chrome باعتباره المتصفح الافتراضي. ومن ثم ، بعد فتح أي موقع ويب ، ما عليك سوى النقر بزر الماوس الأيمن للعثور على خيار فحص العنصر في قائمة السياق التالية.
إذا كنت تستخدم جهاز Chromebook في العمل أو المدرسة ، فقد تطرح هذا السؤال:
لماذا لا يمكنني الفحص على My School Chromebook؟
يقوم معظم مديري المدارس والأعمال بتعطيل الميزات المتقدمة على Chromebook التي يوفرونها لك للعمل أو الدراسة. نظرًا لأن أدوات المطورين هي ميزات متقدمة ، فمن المحتمل ألا تعرض مدرستك أو عملك Chromebook أداة فحص العنصر.
كيفية فحص العناصر على iPad / iPhone
للأسف ، لا يمكنك استخدام أداة Inspect Element على جهاز iPhone أو iPad بدون جهاز Mac.
يحتوي iOS و iPadOS على Web Inspector لتطبيق Safari. ومع ذلك ، فإنه لا يعمل إلا إذا قمت بتوصيل الجهاز المحمول بجهاز Mac تم تنشيط أدوات المطور لـ Safari عليه بالفعل. فيما يلي الخطوات التي يمكنك تجربتها:
- افتح جهاز iPad / iPhone إعدادات برنامج.
- انقر سفاري في جزء التنقل الأيمن.
- بعد ذلك ، قم بالتمرير لأسفل على الجانب الأيمن للبحث والاختيار متقدم.
- قم بتنشيط التبديل لـ مفتش الويب.
- الآن ، قم بتوصيل الجهاز المحمول بجهاز Mac باستخدام USB.
- تخويل iPhone / iPad على Mac.
- افتح أي موقع ويب على جهاز محمول على Safari.
- الآن ، قم بتشغيل Safari على جهاز Mac وحدد يطور في شريط القوائم العلوي.
- في قائمة السياق التي تفتح ، ابحث عن اسم جهازك المحمول.
- قم بتمرير المؤشر فوق الجهاز المحمول لعرض جميع مواقع الويب المفتوحة.
- الآن ، حدد أي موقع ويب لعرض شفرة مصدر HTML و CSS على متصفح Safari في Mac.
خاتمة
لقد استكشفت جميع الطرق الممكنة لاستخدام أداة Inspect Element من أجل التحرير المؤقت لصفحة الويب. لقد تعلمت أيضًا كيفية فحص العناصر لمختلف الأجهزة مثل Mac و Windows و Chromebook و iPad و iPhone.
في المرة القادمة التي تحتاج فيها إلى تعديل صفحة ويب للمتعة أو للاحتياجات المهنية ، جرب هذه الطرق. ستحب بالتأكيد هذه الخطوات السهلة على الطرق المعقدة الأخرى الموضحة في مكان آخر.
لا تنسَ ترك التعليقات أدناه إذا ساعدتك الخطوات المذكورة أعلاه ، أو أي طريقة تجدها صعبة ، أو أي نصائح سرية حول أداة Inspect Element.
هل تحتاج إلى صفحة ويب كمرجع مطبوع؟ تعلم كيف حفظ صفحة الويب بسرعة كملف PDF الآن!