كيفية فحص موقع الويب بشكل صحيح

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

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

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

لماذا يجب عليك فحص موقع على شبكة الإنترنت

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

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

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

بالإضافة إلى ذلك ، يمكن للمسوقين الرقميين استخدام أداة Inspect Element لمعرفة كيف ستؤثر تغييرات معينة على الشكل العام لصفحة الويب وأسلوبها. على سبيل المثال ، قد ترغب في تجربة زر Call To Action (CTA) الجديد أو نظام ألوان مختلف. يمكنك استخدام الأدوات لنسخ التحديثات دون إجراء أي تغييرات على موقعك المباشر.

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

أفضل الأدوات والإضافات لفحص موقع الويب

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

تدقيق العنصر

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

على الرغم من توفره كملحق في Google Chrome ، فإن أداة Inspect Element تأتي أيضًا مع جميع المتصفحات الرئيسية. هذه الميزة جزء من Chrome Developer Tools ، وهي مجموعة من البرامج التي تمكنك من فحص وتحرير كود HTML و CSS لصفحة الويب.

للوصول إلى أدوات مطوري Google Chrome ، ما عليك سوى الضغط على Ctrl + Shift + I (أو Cmd + Opt + I على جهاز Mac). يمكنك أيضًا الوصول إلى الأدوات عن طريق فتح قائمة Chrome وتحديد المزيد من الأدوات > أدوات المطور :

يمكنك الوصول إلى نفس أدوات المطور في المتصفحات الأخرى. على سبيل المثال ، تحتوي أدوات مطوري Firefox على ميزات مماثلة. للوصول إلى الأدوات ، ما عليك سوى الضغط على Ctrl + Shift + I (أو Cmd + Opt + I على جهاز Mac). يمكنك أيضًا العثور على الأدوات من خلال فتح قائمة Firefox وتحديد Web Developer > Inspector.

علاوة على ذلك ، تتيح لك أدوات المطور Safari فحص وتحرير كود HTML و CSS لصفحة الويب على أجهزة Mac. ما عليك سوى الضغط على Cmd + Opt + I. يمكنك أيضًا فتح قائمة Safari وتحديد التفضيلات > متقدم > إظهار قائمة التطوير في شريط القائمة .

BrowserStack

نظام أساسي آخر يمكنك استخدامه لاختبار مواقع الويب هو BrowserStack:

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

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

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

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

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

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

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

يمكنك أيضًا الوصول إلى الأداة بالضغط على Ctrl + Shift + I (أو Cmd + Opt + I على جهاز Mac) لفتح أدوات Developer . ثم انقر فوق علامة التبويب "العناصر" في الجزء العلوي من النافذة:

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

كيفية تغيير عنصر

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

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

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

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

كيفية إخفاء أو حذف عنصر

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

من هنا ، انقر بزر الماوس الأيمن فوق العنصر ، ثم حدد خيار حذف العنصر أو إخفاء العنصر :

يقوم الزر Delete بإزالة عنصر Document Object Model (DOM). سيخفي الزر إخفاء العنصر ، لكنه سيظل موجودًا في DOM.

كيفية فحص فئات CSS

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

لاحظ أن علامة التبويب هذه تظهر لك فقط الأنماط المضمنة التي يتم تطبيقها وليس تلك التي تأتي من ورقة أنماط.

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

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

ما الذي تبحث عنه عند فحص موقع على شبكة الإنترنت

أيًا كانت الطريقة التي تستخدمها للوصول إلى Inspect Element ، سترى نفس الواجهة. يتكون من جزأين: جزء HTML وجزء CSS.

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

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

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

عندما تقوم بفحص موقع ويب ، هناك بعض الأشياء التي يجب وضعها في الاعتبار:

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

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

خاتمة

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

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

هل تحتاج إلى مساعدة في إدارة موقع الويب الخاص بك أو تحسينه؟ تعرف على كيفية مساعدة WP Engine في كل شيء بدءًا من استضافة WordPress وحتى إدارة الموقع والعملاء!