كيفية استخدام فحص العنصر

روابط الجهاز

• ذكري المظهر
• Chromebook
• ماك
• شبابيك
• الجهاز مفقود؟

لا يدرك معظم الناس أن هناك كنزًا من أدوات المطورين تحت تصرفهم وأنه مخفي في متصفحهم المفضل.

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

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

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

باستخدام Inspect Element في Google Chrome

1. افتح موقع الويب الذي ترغب في فحصه.
   
2. انقر بزر الماوس الأيمن في أي مكان بالصفحة وحدد فحص .
   
   أو
3. انقر على النقاط الثلاث الرأسية في الزاوية اليمنى من شريط الأدوات.
   
4. انتقل إلى المزيد من الأدوات .
   
5. حدد أدوات المطور .
   
   أو
6. اضغط على مفتاح اختصار لوحة المفاتيح F12 على جهاز الكمبيوتر (أو CMD + Options + I على جهاز Mac.)
   

استخدام Inspect Element في Microsoft Edge

1. افتح موقعًا إلكترونيًا.
   
2. انقر على النقاط الثلاث الرأسية في الزاوية اليمنى العليا من شريط أدوات المتصفح.
   
3. قم بالتمرير لأسفل وانقر فوق المزيد من الأدوات .
   
4. انقر فوق أدوات المطور .
   
   أو
5. انقر بزر الماوس الأيمن في أي مكان على موقع الويب وانقر فوق فحص .
   
   أو
6. اضغط على Ctrl + Shift + I.
   

ستعطيك أي من هذه الطرق الثلاث نفس النتيجة.

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

سيتم فتح اللوحة في الجزء السفلي من الشاشة كإعداد افتراضي ، ولكن يمكنك دائمًا تغيير كيفية ظهورها. اتبع هذه الخطوات البسيطة لتغيير موضع لوحة Developer Tools:

1. انقر على النقاط الأفقية الثلاث في الزاوية العلوية من لوحة Developer Tools.
   
2. حدد جانب إرساء (يسار أو أسفل أو يمين) أو قم بفك الإرساء في نافذة منفصلة.
   

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

استخدام Inspect Element (خاص بنظام التشغيل)

على الرغم من أن الكثير من الخطوات المتضمنة قد تمت تغطيتها من خلال توضيح كيفية استخدام Inspect Element في المتصفح ، فسوف نوضح لك كيفية استخدام معظم أنظمة التشغيل على أي حال.

كيفية استخدام Inspect Element على جهاز Chromebook

المتصفح الافتراضي على Chromebook هو Google ، لذا اتبع تعليمات متصفح Chrome للوصول إلى Inspect Element . إليك دورة تنشيطية صغيرة لك:

1. افتح موقعًا إلكترونيًا.
   
2. انقر على النقاط الثلاث الرأسية في الزاوية اليمنى العليا من شريط الأدوات.
   
3. حدد المزيد من الأدوات .
   
4. انقر فوق أدوات المطور .
   

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

كيفية استخدام Inspect Element على جهاز Android

يختلف تشغيل Inspect Element على جهاز Android قليلاً. تحقق من كيفية الوصول إلى لوحة Inspect Element على نظام Android:

1. اضغط على مفتاح الوظيفة F12 .
   
2. اختر تبديل شريط الجهاز .
   
3. حدد جهاز Android من القائمة المنسدلة.
   

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

تعمل هذه الطريقة مع كل من متصفحي Chrome و Firefox لأن لديهم ميزة في أدوات المطور تسمى محاكاة الجهاز.

كما أنه يعمل بنفس الطريقة لأجهزة iPhone. تحتاج فقط إلى تحديد الخيار الصحيح في القائمة المنسدلة.

كيفية استخدام Inspect Element في Windows

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

إذا كنت تستخدم نظام التشغيل Windows ، فمن المحتمل أيضًا أن تستخدم متصفح Microsoft Edge. تحقق من كيفية الوصول إلى Inspect Element على MS Edge:

1. افتح موقع الويب الذي ترغب في فحصه.
   
2. اضغط على النقاط الثلاث الرأسية في زاوية نافذة المتصفح.
   
3. قم بالتمرير لأسفل وحدد المزيد من الأدوات .
   
4. انقر فوق أدوات المطور .
   

يمكنك أيضًا استخدام مفتاح الوظيفة F12 للوصول إلى "فحص العنصر" بشكل أسرع. أيضًا ، النقر بزر الماوس الأيمن على صفحة الويب واختيار فحص يعمل أيضًا.

كيفية استخدام Inspect Element على جهاز Mac

إذا كنت تستخدم جهاز Mac ، فمن المحتمل أن يكون المتصفح الذي تختاره هو Safari. يختلف فتح Inspect Elements على Safari قليلاً عنه في Chrome و Firefox. لكن الأمر بهذه البساطة مع هذه الخطوات:

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

يؤدي اتباع هذه الخطوات إلى تمكين ميزة Inspect Element في متصفحك. إذا لم تقم بتمكين Inspect Element أولاً ، فلن ترى الخيار عند فتح موقع ويب.

بعد إكمال هذه الخطوة ، ما عليك سوى النقر بزر الماوس الأيمن فوق أي صفحة ويب مفتوحة وتحديد فحص. يمكنك أيضًا استخدام أمر المفاتيح السريعة: CMD + Option + I (فحص).

كيفية استخدام Inspect Element على iOS

هل تريد استخدام ميزة Inspect Elements لمعرفة كيفية ظهور نسخة محمولة من صفحة الويب على جهاز iPhone؟ يمكنك القيام بذلك وأكثر من خلال بضع خطوات بسيطة. ولكن قبل النظر إلى عنصر ما ، فأنت بحاجة إلى تمكين Web Inspector لجهاز iOS الخاص بك:

1. اذهب إلى الإعدادات .
   
2. الآن ، حدد Safari .
   
3. قم بالتمرير إلى أسفل واضغط على القائمة المتقدمة .
   
4. الآن ، انقر فوق مفتاح التبديل لتشغيل Web Inspector .
   

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

بعد تمكين كل من أجهزة iOS المحمولة وأجهزة Mac ، سترى قائمة التطوير في الشريط العلوي على جهاز Mac. انقر عليها لترى iPhone المتصل وصفحة الويب النشطة على الجهاز. يؤدي تحديد صفحة الويب أيضًا إلى فتح نافذة Web Inspector لنفس الصفحة على شاشة Mac.

ومع ذلك ، ضع في اعتبارك أن هذه الاتجاهات تعمل فقط مع Safari الذي يعمل بنظام Mac ، وليس Safari على Windows.

كيفية استخدام فحص العنصر عند حظره

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

الطريقة الأولى - إيقاف تشغيل Javascript

1. انتقل إلى الإعدادات .
   
2. ابحث في JavaScript .
   
3. قم بإيقاف تشغيل JavaScript .
   

الطريقة الثانية - الوصول إلى أدوات المطور الطريق الطويل

بدلاً من النقر بزر الماوس الأيمن على زر الفحص ، قم بما يلي:

1. انتقل إلى الإعدادات في متصفحك.
   
2. حدد المزيد من الأدوات .
   
3. قم بالتمرير لأسفل وانقر فوق أدوات المطور .
   

الطريقة الثالثة - استخدام مفتاح الوظيفة

يمكنك أيضًا محاولة استخدام مفتاح الوظيفة F12 على صفحات الويب التي تحظر النقر بزر الماوس الأيمن لـ Inspect.

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

كيفية استخدام Inspect Element على School Chromebook

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

1. انقر بزر الماوس الأيمن أو انقر بإصبعين على صفحة الويب وحدد فحص .
   
2. اضغط على Ctrl + Shift + I.
   
3. جرب واستخدم طريقة العرض: [url] ، مثل مصدر العرض: https: //www.wikipedia.com .
   
   

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

كيفية استخدام فحص العنصر للعثور على إجابات

يمكنك استخدام "فحص العنصر" للعثور على إجابات لمجموعة متنوعة من الأشياء مثل:

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

عند تشغيل لوحة Inspect Element ، سترى كل الترميز الخاص بالموقع. يتضمن ذلك جميع ترميز JavaScript و CSS و HTML المضمنة فيه. يشبه الأمر رؤية مصدر الترميز لصفحة ويب ، باستثناء أنه يمكنك إجراء تغييرات على الكود. بالإضافة إلى ذلك ، يمكنك رؤية أي تغييرات تم تنفيذها في الوقت الفعلي.

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

أسئلة وأجوبة إضافية

إذا لم تكن خبيرًا في Inspect Element بعد القراءة أعلاه ، فهناك المزيد من الإجابات هنا.

كيف يمكنني استخدام أمر فحص العنصر للعثور على إجابات؟

الطريقة الوحيدة للعثور على إجابات باستخدام ميزة Inspect Element هي إذا كشفها موقع الويب على الفور بعد الإرسال. في هذه الحالة ، الإجابات موجودة في الترميز.

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

هل فحص العنصر غير قانوني؟

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

هل من الممكن تعطيل فحص العنصر في المستعرض؟

الجواب القصير هو لا.

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

تعرف على العناصر الداخلية لصفحة الويب

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

ما الذي تستخدمه في فحص العنصر؟ أخبرنا عن ذلك في قسم التعليقات أدناه.