كيفية استخدام أداة Inspect Element في متصفحك

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

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

دعونا نحفر!

كيفية الوصول إلى أداة فحص العنصر في المتصفحات الرئيسية

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

تقدم معظم المتصفحات الرئيسية - بما في ذلك Chrome و Firefox و Safari - مجموعة متنوعة من هذه الأداة. دعونا نلقي نظرة على كيفية الوصول إليها في كل منها.

الوصول إلى Inspect Element في Google Chrome

هناك ثلاث طرق للوصول إلى أداة Inspect Element في Chrome:

• انقر بزر الماوس الأيمن فوق عنصر في الصفحة واختر فحص .
• انقر على قائمة النقاط الثلاث في الزاوية اليمنى العليا من النافذة واختر المزيد من الأدوات> أدوات المطور.
• اضغط على Ctrl + Shift + C على لوحة المفاتيح ( Cmd + Option + C في نظام Mac).

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

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

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

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

أخيرًا ، يمكنك تغيير موقع هذه الأجزاء عن طريق النقر فوق قائمة النقاط الثلاث في الزاوية اليمنى العليا من جزء HTML وتحديد أحد خيارات الإرساء.

الوصول إلى Inspect Element في Mozilla Firefox

تتشابه أداة Inspect Element في Firefox إلى حد ما مع Chrome ويمكن الوصول إليها بطرق مماثلة:

• انقر بزر الماوس الأيمن فوق عنصر في الصفحة واختر فحص العنصر.
• انقر فوق قائمة الهامبرغر في الزاوية اليمنى العليا من نافذة Firefox وحدد Web Developer> Inspector .
• اضغط على Ctrl + Shift + C على لوحة المفاتيح ( Cmd + Option + C في نظام Mac).

يتم تعيين Firefox افتراضيًا على وضع أجزاء المعلومات أسفل الشاشة:

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

الوصول إلى Inspect Element في Safari

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

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

بمجرد التمكين ، يمكنك الوصول إلى ميزة Inspect Element كما هو الحال في المتصفحات الأخرى:

• انقر بزر الماوس الأيمن فوق عنصر واختر فحص العنصر .
• في شريط القائمة العلوي ، انتقل إلى Develop> Show Web Inspector.
• اضغط على Cmd + Option + I على لوحة المفاتيح.

يختلف التخطيط الأولي لأداة Safari قليلاً عن المتصفحات:

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

5 الاستخدامات الشائعة لأداة Inspect Element

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

1. ابحث عن فئات CSS على موقع ويب

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

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

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

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

إذا كان التمرير فوق العنصر لا يفعل شيئًا ، فتأكد من تمييز رمز المؤشر في جزء العارض باللون الأزرق:

إذا كنت تعرف فئة أو نمط CSS المحدد الذي تبحث عنه وترغب في رؤية كل عنصر يستخدمه ، يمكنك أيضًا استخدام وظيفة البحث. أثناء فتح المفتش ، اضغط على Ctrl + Shift + F على لوحة المفاتيح ( Cmd + Shift + F في نظام Mac). يفتح هذا مربع بحث حيث يمكنك البحث في كود الصفحة . سيتم تمييز النتائج ذات الصلة ، تمامًا كما لو كنت تبحث في مستند.

2. استكشاف أخطاء الموقع وإصلاحها

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

يمكنك أيضًا تحرير HTML للصفحة مباشرةً من أداة Inspect Element. ما عليك سوى النقر نقرًا مزدوجًا فوق الرمز الذي تريد تغييره لتعديله.

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

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

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

3. تحرير النص لمعاينة التغييرات

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

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

بعد ذلك ، ما عليك سوى النقر نقرًا مزدوجًا على الكود لجعله قابلاً للتعديل. على سبيل المثال ، قمنا هنا بتغيير عنوان مدونتنا:

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

يمكنك أيضًا تعديل الكود السداسي للون مباشرةً إذا كنت تعرف الرمز الذي تريد استخدامه.

4. معاينة تغييرات الصورة

يسهّل فحص العنصر أيضًا معاينة تغييرات الصورة. هذه طريقة ممتازة أيضًا لتجربة أحجام مختلفة للصور.

ما عليك سوى تحديد الصورة التي تريد تغييرها في جزء المعاينة ، ثم النقر نقرًا مزدوجًا فوق عنوان URL الخاص بها في جزء HTML:

يمكنك بعد ذلك لصق عنوان URL الخاص بصورة مختلفة لاختبارها. إذا كانت الصورة في مكتبة وسائط WordPress الخاصة بك ، فيمكنك العثور بسرعة على عنوان URL في تفاصيل المرفق:

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

5. اختبر موقعًا باستخدام محاكاة الجهاز

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

عند فتح المفتش ، انقر فوق الرمز الذي يشبه الهاتف والكمبيوتر اللوحي المكدسين:

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

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

استنتاج

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

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

هل لديك أي أسئلة حول استخدام Inspect Element؟ واسمحوا لنا أن نعرف في قسم التعليقات أدناه!

صورة مميزة عبر Kinjugraphics / shutterstock.com.