كيفية فحص العنصر في Chrome وSafari وFirefox؟

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

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

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

سنوضح لك في هذه المقالة كيفية فحص عناصر موقع الويب في المتصفحات الشائعة وتقديم طرق مختصرة لاستخدامها مباشرة.

كيفية فحص عناصر موقع الويب على أي متصفح؟

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

1. فحص اختصارات العناصر لمتصفح Google Chrome

يمكنك الوصول إلى عناصر موقع الويب عن طريق تشغيل أدوات التطوير أو أدوات Inspect Elements بمجرد الضغط على مجموعة المفاتيح Ctrl+Shift+I على لوحة المفاتيح.

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

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

2. فحص اختصارات العناصر لمتصفح Firefox

إذا كنت من مستخدمي متصفح Firefox، فيمكنك تجربة مجموعة من مفاتيح الاختصار Ctrl+Shift+C للاستفادة من أدوات التطوير المستخدمة في تحليل عناصر موقع الويب. أو يمكنك أيضًا النقر بزر الماوس الأيمن على منطقة فارغة من موقع الويب أو أي عنصر، ثم تحديد "فحص".

3. فحص اختصارات العناصر لمتصفح Opera

بالنسبة لمستخدمي Opera، اضغط على Ctrl+Shift+I على لوحة المفاتيح للوصول مباشرة إلى أدوات التطوير لفحص عناصر موقع الويب. وبالمثل، مثل المتصفحات الأخرى، يمكنك أيضًا النقر بزر الماوس الأيمن مباشرةً على منطقة فارغة من موقع الويب أو أي عنصر، وتحديد "فحص".

4. فحص اختصارات العناصر لمتصفح Edge

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

5. فحص العناصر في متصفح Safari

لا يحتوي متصفح Safari على أي طريقة اختصار لفحص عناصر موقع الويب، ولكن عليك اتباع الخطوات الموضحة أدناه:

لاستخدام Inspect Element في Safari، تحتاج إلى تمكين أدوات المطورين أولاً. إليك الطريقة:

• انقر على "Safari" في القائمة العلوية وحدد "الإعدادات".

• انتقل إلى علامة التبويب "خيارات متقدمة" وحدد المربع الذي يقول "إظهار قائمة التطوير في شريط القائمة".

• أغلق نافذة التفضيلات.

الآن، يمكنك النقر بزر الماوس الأيمن في أي مكان على صفحة الويب وتحديد "فحص العنصر" لفتح جزء العناصر.

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

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

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

ربما تتساءل الآن عما يجب فعله بعد فتح الجزء أو ما هي العناصر الرئيسية التي يمكنك الاطلاع عليها حول موقع الويب.

حسنًا، لهذا الغرض، قم بمراجعة الأقسام أدناه.

الأشياء التي يمكنك القيام بها باستخدام أدوات Inspect Website Elements Dev

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

سنستخدم Chrome لأغراض العرض التوضيحي لراحتك، ولكن جميع الميزات والإعدادات والخيارات والتعليمات ستكون هي نفسها عبر جميع المتصفحات.

1. ابحث عن أي شيء على موقع ما بمساعدة أداة Inspect Element Search

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

للاستفادة منه، افتح جزء العناصر الافتراضي واضغط على Ctrl + F أو Command + F للبحث في التعليمات البرمجية المصدر. ستظهر علامة التبويب "بحث" على الفور أسفل جزء DevTools.

في حقل البحث، يمكنك البحث عن أي شيء، سواء ملفات CSS أو JavaScript أو عناصر محددة داخل الكود المصدري.

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

وبالمثل، إذا كنت مصمم ويب، فيمكنك البحث عن الألوان عن طريق إدخال رمز اللون السداسي، مثل #98fb98db، في حقل البحث والضغط على Enter. سيُظهر هذا كل مثيل لهذا اللون في ملفات CSS وHTML الخاصة بالموقع.

الاتصالات والإصلاحات:

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

2. حدد وفحص العناصر الفردية/المحددة لصفحة الويب

يمكنك أيضًا عرض كود HTML لعنصر معين في الصفحة من خلال النقر مباشرة على أيقونة المؤشر في الزاوية العلوية اليسرى من الجزء.

يمكنك الآن النقر فوق أي عنصر في الصفحة للكشف عن كود المصدر الخاص به في لوحة الفحص.

3. قم بتحرير أو تعديل أي شيء باستخدام العناصر

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

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

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

إذا وجدت التغييرات جذابة في وقت ما، فيمكنك ببساطة نسخها وحفظها في مكان آخر لاستخدامها لاحقًا.

دعونا نرى بعض الأمثلة كمرجع.

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

أنت الآن جاهز مع كود المصدر الكامل الذي يظهر على شاشتك.

• في الزاوية العلوية اليسرى من جزء المطور، انقر فوق أيقونة الماوس الموجودة أعلى المربع.
• حدد أي عنصر في الصفحة لتغييره.

تغيير النص على صفحة ويب:

• انقر على أيقونة مؤشر الفأرة/المربع.
• انقر فوق أي نص في الصفحة.
• في جزء أدوات المطور، انقر نقرًا مزدوجًا فوق النص المميز لجعله قابلاً للتحرير.

• اكتب النص الجديد مثل "Fastest" بدلاً من "Premium" كما هو موضح في الصورة أدناه ثم اضغط على Enter .
• يعد تغيير النص مؤقتًا وسيعود عند تحديث الصفحة.

عناصر التحرير:

• أغلق جزء المطور، وقم بتمييز أي جزء من صفحة الويب، وانقر بزر الماوس الأيمن، ثم حدد فحص .
• سيقوم جزء أدوات المطور بتمييز الجملة المحددة.

تغيير لون وحجم الخط للعناصر:

• في جزء أدوات المطور، انتقل إلى علامة التبويب الأنماط .

• انقر فوق الحقل "حجم الخط" وقم بتغيير القيمة إلى 22 بكسل.

• قم بالتمرير إلى "اللون" وقم بتغييره إلى #ff0000.

• اضبط "عائلة الخطوط" على "Arial".

الآن كانت الخطوط تبدو هكذا قبل التغييرات التي أجريناها:

وبعد التغييرات يظهر بالشكل التالي:

تغيير حالات العنصر:

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

• انقر فوق رمز مؤشر الماوس/المربع وحدد العنصر.
• في جزء أدوات المطور، انقر بزر الماوس الأيمن على الكود، ثم قم بالتمرير فوق حالة القوة ، ثم انقر فوق :active:
• كرر ثم اضغط :hover:

• قم بتغيير قيمة "لون الخلفية" إلى #003b59 لرؤية لون التحويم الجديد.

تغيير صور الخلفية:

• ما عليك سوى نسخ رابط عنوان الصورة، أي (المكان الذي تمت استضافة الصورة فيه.)

• افتح عنصر الفحص الموجود على زر "تشغيل الأتمتة باستخدام الذكاء الاصطناعي".
• ابحث عن رمز "لون الخلفية" واستبدل اللون بـ url("image-link") .

تجربة مع المزيد من التغييرات:

• يمكنك تغيير النص، وتبديل الصور، وتغيير الألوان والأنماط.
• جرب تغييرات مختلفة لترى كيف يمكن أن يبدو موقعك.

4. اختبر الموقع على أي حجم شاشة أو جهاز

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

لذلك، أصبح من الضروري لمسؤولي الويب أن يجعلوا مواقعهم الإلكترونية سريعة الاستجابة ومتوافقة مع الجوّال أثناء إنشائها.

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

هذا لا يعني أنه يجب عليك تخطي الاختبار الفعلي على أجهزة مختلفة، ولكنه يمكن أن يمنحك فكرة جيدة.

هذه هي الطريقة التي يمكنك القيام بها:

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

• انقر فوق القائمة الموجودة بالأعلى لتحديد أحجام الأجهزة الافتراضية، مثل Surface Duo أو iPhone 12 Pro.
• سيتم ضبط صفحة الويب وفقًا لحجم الجهاز المحدد. استخدم القائمة المنسدلة للنسبة المئوية بجوار الأبعاد للتكبير.
• حدد "مستجيب" في الإعداد المسبق للجهاز لضبط العرض عن طريق سحب الحافة اليمنى لصفحة الويب.
• قم بالتبديل بين العرض الرأسي والأفقي من خلال النقر على أيقونة التدوير في نهاية القائمة العلوية.
• استكشف الأجهزة المختلفة لترى كيف تتغير صفحة الويب ودقة الشاشة.
• سوف تتفاعل جميع أدوات المطورين الأخرى أيضًا مع عرض الجهاز.

5. اختبار أداء صفحة الويب على شبكات الهاتف المحمول التي تمت محاكاتها

وبصرف النظر عن جميع الاختبارات المرئية، يمكنك أيضًا معرفة كيفية أداء موقع الويب الخاص بك على شبكات الهاتف المحمول المختلفة مثل 5G أو 4G أو 3G أو الشبكات الأبطأ.

ولإثبات ذلك،

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

ظروف الشبكة:

• اختر أيًا من ظروف الشبكة مثل 4G السريع أو 4G البطيء أو غير متصل بالإنترنت لترى كيف تعمل الصفحة بدون الإنترنت.

• انقر فوق "إضافة..." لتضمين سرعة الاختبار (على سبيل المثال، 56 كيلوبت في الثانية لاختبار الاتصال بالإنترنت عبر الطلب الهاتفي).
• أعد تحميل الصفحة لمعرفة المدة التي يستغرقها التحميل على اتصال بطيء وكيف تبدو أثناء التحميل.
• يساعدك هذا على فهم أهمية تحسين وقت تحميل موقعك للاتصالات البطيئة.

تغيير وكيل المستخدم:

• في حقل وكيل المستخدم، قم بإلغاء تحديد استخدام المتصفح الافتراضي .
• حدد وكيل مستخدم مختلفًا (مثل Firefox وMac) لمعرفة ما إذا كان الموقع يغير عرضه للمتصفحات الأخرى.
• تتيح لك هذه الميزة معرفة كيفية استخدام الويب تحميل الصفحات حتى لو ادعوا أنهم يعملون فقط في متصفح مختلف.

خاتمة

بعد حصولك على الكثير من المعلومات المتعمقة حول أدوات التطوير أو Inspect Elements، لا بد أنك أدركت أن هناك الكثير من المعلومات المتاحة حول أي من مواقع الويب المفضلة لديك في النطاق العام.

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

يمكنك الآن تحليل وعرض أنماط CSS المستخدمة، والمنطق الكامن وراء الوظائف المعقدة، وكيفية تحسين محرك البحث على مستوى التعليمات البرمجية، وغير ذلك الكثير.

راهول

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