هناك العديد من موارد تطوير الويب القيمة ، سواء كانت كتبًا أو مقاطع فيديو أو دورات عبر الإنترنت والمزيد. يعد تعلم كيفية استخدام أداة Inspect Element في المتصفح أحد هذه القدرات القوية. إنها أداة تعليمية لا تقدر بثمن – أداة تحت أطراف أصابعك ويمكن الوصول إليها دائمًا.
باستخدام ميزة Inspect Element ، يمكنك الاطلاع على الأعمال الداخلية لموقع الويب. على الرغم من أنه لا يمكنك رؤية سوى ترميز الواجهة الأمامية مثل HTML و CSS وأحيانًا JavaScript ، إلا أنه يمنحك طريقة لمعرفة كيفية إنشاء المطورين لموقع الويب بدقة.
في هذا المنشور ، سنوضح لك كيفية استخدام أداة Inspect Element وبعض التقنيات والميزات والوظائف ذات الصلة التي ستصادفك. أولاً ، دعنا نقدم لك مقدمة رسمية لأداة Inspect Element نفسها.
تقديم أداة Inspect Element
في الأيام الأولى للويب ، كانت هناك طريقة واحدة فقط لإلقاء نظرة على رمز موقع الويب – ميزة عرض المصدر .
صفحة مصدر عرض Kinsta
صفحة “عرض المصدر” الخاصة بـ Kinsta.com.
كان سائدا هذا الوضع في الأيام التي سبقت كان لدينا أوراق الأنماط المتتالية (CSS) و جافا سكريبت في وفرة. استخدم مطورو الويب لغة HTML لجميع عناصر الموقع ، بما في ذلك المحتوى والتصميم و … حسنًا ، كل شيء.
بمجرد أن بدأ الويب في التطور ، وازدادت قوة التقنيات الأساسية ، كان من الضروري تطوير أدوات أفضل. كان Firefox’s Firebug حلاً مبكرًا لاكتشاف كيفية أداء موقع الويب وعمله تحت الغطاء:
بعد فترة ، وجدت هذه الوظيفة طريقها إلى جميع المتصفحات تقريبًا. اليوم ، نعرف هذه الميزة كأداة Inspect Element:
إنها طريقة قوية لمعرفة التكنولوجيا الأساسية ورمز موقع الويب. على هذا النحو ، يمكنك العثور عليه في عدة أماكن مختلفة – غالبًا من خلال قائمة شريط الأدوات ، أو النقر بزر الماوس الأيمن على إحدى الصفحات وتحديد الخيار ، أو باستخدام اختصار لوحة المفاتيح.
بينما ينصب التركيز الأساسي لأداة Inspect Element على HTML و CSS للصفحة ، فهناك المزيد الذي يمكنك القيام به باستخدامه.
تعد أداة Inspect Element أكثر من مجرد طريقة لعرض التعليمات البرمجية. غالبًا ما توجد عدة لوحات للوصول إليها:
المفتش – يسمى هذا العناصر في بعض المتصفحات. إنها الشاشة الرئيسية في أداة Inspect Element وتعرض لك رمز الصفحة ، إلى جانب CSS الخاص بالعنصر. ستجد أيضًا مزيدًا من التفاصيل حول “نظام الشبكة” للموقع والجوانب الأخرى.
وحدة التحكم – هذا سجل تحذير للواجهة الأمامية لأحد المواقع ، وهو مكان يمكنك أيضًا إدخال مقتطفات التعليمات البرمجية لإجراء اختبار سريع لفكرة ما.
الشبكة – هنا ، سترى الطلبات التي تم إجراؤها من وإلى الخادم ، مثل جميع طلبات POST و GET.
الأداء – بالطبع ، يجب أن يكون الموقع فائق الأداء . على هذا النحو ، هناك أداة مخصصة لمساعدتك في قياس بعض مقاييس الموقع الأساسية. تعمل بعض المتصفحات بشكل أفضل من غيرها هنا.
الذاكرة – تتيح لك هذه اللوحة معرفة كيفية استخدام الموقع للذاكرة ، ومرة أخرى ، تقدم بعض المتصفحات مقاييس شاملة.
التطبيق – ضمن هذه اللوحة ، يمكنك رؤية مجموعة كاملة من المعلومات حول ذاكرة التخزين المؤقت للموقع وخدمات الخلفية والمزيد.
علاوة على ذلك ، هناك المزيد من اللوحات التي يمكنك إضافتها:
وهناك لوحات بسيطة، مثل وسائل الإعلام ، وأكثر منها تعقيدا مثل جافا سكريبت التعريف و مراقبة الأداء . باختصار ، يؤدي اسم أداة Inspect Element إلى الإضرار بجميع الوظائف الموجودة تحت الغطاء. لديها قوة هائلة ويجب أن تكون مركزية لسير عمل أي مطور ويب.
تعتبر أداة Inspect Element هي الحل الوحيد “المثبت” الذي ستحتاجه إلى جانبك أثناء التطوير. سوف ندخل في التفاصيل الفنية حول السبب في بقية المقال. أولاً ، على الرغم من ذلك ، يجدر التحدث عن دافعك لاستخدام Inspect Element.
هناك عدة أسباب وراء رغبتك في استخدام الأداة:
يمكنك تصفح مواقع الويب الأخرى للحصول على أفكار ملهمة حول كيفية العمل على موقعك.
ستتعرف على كيفية تحقيق المواقع أو المطورين الآخرين لتقنيات معينة.
يمنحك ترخيصًا للتجربة على موقعك دون عواقب.
في معظم أدوات Inspect Element ، تحصل على فرصة لتصحيح أخطاء المواقع.
من الجيد معرفة المزيد عن موقع الويب المعني.
باختصار ، يتضمن التعلم عن تطوير الويب النظر في أمثلة جيدة لمواقع الويب ومعرفة ما يجعلها علامة.
تتيح لك أداة Inspect Element إمكانية التحقق من HTML و CSS بالضبط المستخدم في الموقع ، مما يمنحك فرصة رائعة لتنفيذ تلك الجوانب والتقنيات في عملك.
الخبر السار هو أن العثور على أداة Inspect Element أمر سهل. في معظم الحالات ، ستنقر بزر الماوس الأيمن على صفحة وحدد فحص أو فحص العنصر :
بشكل افتراضي ، ستفتح الأداة في نافذة مقسمة. غالبًا ما يتم تعيينه افتراضيًا على الجانب الأيمن. ولكن يمكنك تخصيص هذا حسب رغبتك وحتى إخراج الأداة من نافذتها:
أداة Inspect Element في النافذة الخاصة بها.
أداة Inspect Element في نافذتها.
بالطبع ، يمكنك أيضًا الوصول إلى Inspect Element من شريط أدوات المتصفح أو من خلال اختصار لوحة المفاتيح. سيختلف الموقع الدقيق اعتمادًا على المتصفح. على سبيل المثال ، في Firefox ، ستجد Web Developer Tools في قائمة Tools> Browser Tools . في المقابل ، فإن Brave (والمتصفحات الأخرى المستندة إلى Chromium) لديها خيار Developer Tools في قائمة View> Developer :
غالبًا ما تكون اختصارات لوحة المفاتيح متشابهة عبر المتصفح: Command + Shift + C ( Control + Shift + C لنظام التشغيل Windows). يسهّل هذا الاختصار عرض الأدوات التي تحتاجها للعمل على الفور.
إذا لم تفتح أداة Inspect Element من قبل ، فغالبًا ما يتم عرضها على الجانب الأيمن من قائمتك ، كما ذكرنا سابقًا. لتغيير هذا ، انقر فوق قائمة إشارة المرور في شريط أدوات فحص العنصر. هنا ، يمكنك تبديل الجانب الذي يظهر فيه “الإرساء”:
خيار Dock side في أداة Inspect Element.
خيارات “Dock side” في أداة Inspect Element.
لاحظ أن Firefox يستخدم أيضًا طريقة عرض “ثلاثية الأجزاء” بشكل افتراضي ، مما يساعدك في الحصول على أكبر قدر ممكن من المعلومات في أداة فحص العنصر:
عرض الجزء الثلاثي لفايرفوكس.
عرض “الجزء الثلاثي” في Firefox.
الآن بعد أن أصبحت الأداة مفتوحة ، من الجيد معرفة ما يمكنك فعله بها. سنتحدث عن هذا بعد ذلك.
لقد تطرقنا إلى بعض الطرق التي ستستخدم بها أداة Inspect Element ، ولكن يمكننا الذهاب إلى أبعد من ذلك لتقديم بعض حالات الاستخدام. دعونا نناقش هذه باختصار.
يتمثل الهدف الأساسي لأداة Inspect Element في اسمها – فحص عناصر موقع الويب. للقيام بذلك ، ستتوجه إلى صفحة الويب المطلوبة ثم تختار طريقتك في فتح أدوات التطوير .
بمجرد فتح اللوحة ، ستقوم بالنقر فوق السهم الذي يعمل كمحدد للعنصر الذي تريده:
من هنا ، يمكنك التمرير فوق أي عنصر في الصفحة ، وسوف تراه مميزًا في نافذة المفتش / العناصر :
إنها عملية بسيطة – أحد الأسباب التي تجعل أداة Inspect Element ذات قيمة كبيرة وشائعة لدى مطوري الويب.
يعمل Inspect Element أيضًا كمحاكي للأجهزة. بمعنى آخر ، يمكنك رؤية كيف يبدو موقع الويب على جهاز معين. الخيارات عديدة:
سيكون هذا المحاكي رائعًا للحكم على ما إذا كانت إستراتيجيتك للجوّال أو التصميم سريع الاستجابة دقيقة وفعالة. إنه لا يقدر بثمن كما أنه أكثر فعالية من حيث التكلفة من وجود 200 جهاز تطفو حول مكتبك.
ستصل غالبًا إلى محاكاة الجهاز من رمز صغير في مكان ما في لوحة Inspect Element:
سيؤدي النقر فوق هذا الرمز إلى عرض موقعك بالشكل الذي يظهر به على الجهاز الذي حددته:
سنبحث في هذا بمزيد من التفصيل لاحقًا ، لكنها طريقة صلبة لجعل تصميماتك متسقة عبر الأجهزة.
يمكن أن تساعدك أداة Inspect Element في الحكم على سرعة موقع الويب وأدائه من خلال لوحة الأداء :
تعمل هذه الميزة عن طريق “تسجيل” أوقات تحميل عناصر ونصوص محددة. تعمل المتصفحات القائمة على Chromium ببراعة في تقديم هذه المعلومات. ستقوم بتسجيل الصفحة أثناء تحميلها ، ثم عرض النتائج بتنسيق مخطط زمني.
إنها طريقة ممتازة للتحقق مما إذا كانت الصفحة ذات أداء على المستوى العام. من هناك ، ستحتاج إلى استخدام أداة مثل Google PageSpeed Insights أو Lighthouse للعمل بشكل أكبر على أداء موقعك. ستحتوي المتصفحات التي تستند إلى Chromium على مُنشئ تقرير Lighthouse مدمج:
يمكنك أيضًا مشاهدة ملخص لاختبار الأداء في بضع علامات تبويب أخرى. على سبيل المثال ، يمكنك عرض Call Tree والملخص العام وسجل الأحداث :
من المتصور أنك لن تحتاج إلى أي أداة أخرى للحكم على كيفية أداء أو عمل موقع الويب الخاص بك. تعلم كيف يعمل في الممارسة هو شيء سنناقشه بعد ذلك.
لقد تحدثنا بالفعل عن مدى قوة أداة Inspect Element أكثر مما قد تبدو للوهلة الأولى. دعنا نلقي نظرة على بعض الحيل والنصائح للحصول على أقصى استفادة من مجموعة الميزات ، بدءًا من الأساسيات.
حتى الآن ، تطرقنا فقط إلى مفهوم استخدام أداة Inspect Element لإجراء تغييرات مؤقتة على الموقع. دعونا نناقش كيفية القيام بذلك بمزيد من التفصيل.
الخطوات واضحة ومباشرة. أولاً ، استخدم رمز السهم لتحديد العنصر الذي اخترته. سترى تراكبًا يبرز المكونات المختلفة وأنت تحوم فوقها:
بمجرد وصولك إلى العنصر الذي تريده ، يمكنك النقر نقرًا مزدوجًا في أي مكان تقريبًا ترى فيه علامة داخل لوحة Elements وكتابة تغيير. على سبيل المثال ، نريد تغيير نص البطل الأصلي على صفحة Kinsta الرئيسية إلى شيء مختلف:
يمكنك أيضًا العمل مع CSS بنفس طريقة HTML. على سبيل المثال ، استخدم أزرار الحث على اتخاذ إجراء (CTA) في صفحة Kinsta الرئيسية:
إذا قمت بتحديد الزر باستخدام المؤشر ، يمكنك رؤية CSS المرتبط به في لوحة Styles اليمنى :
كما هو الحال مع عناصر HTML ، يمكنك تغيير القيم وإضافة CSS أيضًا:
بالطبع ، بالنسبة لعناصر مثل الأزرار ، قد ترغب في العمل مع حالاتها المختلفة. في هذه الحالة ، فإن حالة : hover تستحق التغيير أيضًا. للقيام بذلك ، انقر فوق الرابط : hov في لوحة Style. سيؤدي اختيار هذا إلى إظهار قائمة بحالات العناصر ، ويمكنك تحديد تلك التي تريد أن ترى CSS لحالة التمرير من أجل:
ستظهر صفحة الويب كيف تبدو الدولة دون الحاجة إلى التصرف. هنا ، قمنا بتغيير ألوان التمرير لتمييزها عن حالة الزر الافتراضية:
يمكنك حتى أخذ عناوين URL للصور واستبدالها بالآخرين. في صفحة Kinsta الرئيسية ، نعرض لقطة شاشة للوحة معلومات MyKinsta :
من خلال تحديد موقع العنصر وتغيير عنوان URL المصدر للصورة ، يمكنك اختبار الصور الأخرى في مكانها:
تغيير صورة على صفحة Kinsta الرئيسية.
في هذه الحالة ، تم تفعيل التغيير في غضون دقائق (مصدر الصورة: Pixabay ).
كما تتوقع ، هذه التغييرات ليست دائمة ، ومع التحديث السريع للصفحة ، يمكنك إعادة الأمور إلى طبيعتها. كبديل ، يمكنك أيضًا نسخ HTML و CSS إلى المحرر الخاص بك وتضمينهما في التعليمات البرمجية الخاصة بك لجعل هذه التغييرات دائمة.
قد يكون الأمر قبل أن تتمكن من تغيير عنصر ما ، فأنت بحاجة إلى العثور عليه. تتميز أداة Inspect Element بوظيفة بحث مباشرة يمكن أن تساعدك في العثور على أي جانب من جوانب صفحة الويب.
ومع ذلك ، من الصعب العثور على ما إذا كنت لا تعرف مكان البحث. تتمثل الطريقة “الرسمية” في المتصفحات القائمة على Chromium في التوجه إلى قائمة “إشارات المرور” على الجانب الأيمن من الصفحة وتحديد خيار البحث :
سيؤدي استخدام هذا إلى فتح لوحة وحدة التحكم ، إلى جانب علامة تبويب البحث . من هنا ، اكتب العلامة التي تريدها في مربع النص ، وسترى قائمة بالعناصر المرتبطة على الصفحة:
هل تحتاج إلى استضافة استثنائية وسريعة وآمنة لموقعك الجديد؟ يوفر Kinsta خوادم سريعة البرق ودعمًا عالميًا على مدار الساعة طوال أيام الأسبوع من خبراء الويب. تحقق من خططنا
لاحظ أنه في المتصفحات الأخرى ، قد تجد الوظيفة في مكان آخر. على سبيل المثال ، يحتوي Firefox على مربع بحث أعلى لوحة المفتش الخاصة به :
إليك نصيحة سريعة أخرى: يمكنك تنفيذ توسيع متكرر للعقد والعناصر المختلفة عن طريق النقر بزر الماوس الأيمن داخل جزء العناصر واختيار توسيع بشكل متكرر :
إذا ألقيت نظرة على لوحة Styles ، فستجد أيضًا مربع نص Filter . يتيح لك هذا الحقل التصفية حسب خصائص CSS ، مما يجعله رفيقًا رائعًا لوظيفة البحث العالمية:
على العموم ، لا ينبغي أن يكون من الصعب العثور على ما تحتاجه مع اثنين من أدوات التصفية والبحث المخصصة.
إحدى أفضل الطرق التي يمكن أن تساعدك بها أداة Inspect Element في معرفة المزيد حول كيفية عمل خصائص CSS على العناصر هي لوحة “نموذج الصندوق” المرئية.
تمنحك هذه النظرة العامة تمثيلاً لكيفية ظهور مربع معين (مثل “عنصر” أو “div”) على الشاشة. بمعنى آخر ، إنها نظرة عامة حول كيفية دمج الهوامش ، والحشو ، والحد ، والمحتوى لتصبح القسم الذي تراه على الشاشة.
إن شرح نموذج مربع CSS الكامل وكيف يتفاعل مع HTML لصفحة ويب هو خارج نطاق هذه المقالة ، على الرغم من أن Mozilla لديها دليل رائع لخصائص وعموميات المفهوم.
ستجد غالبًا لوحة Box Model داخل أقسام Layout أو Computed من الجزء الأيمن من أداة Inspect Element:
كما هو الحال مع أي عناصر وخصائص ، يمكنك أيضًا تغيير القيم والإعدادات لمربع معين. ستكون هناك أيضًا قائمة بالخصائص الأخرى لمساعدتك في تحديد موضع المربع ، وتعيين فهرس z ، وتطبيق إعدادات تعويم وعرض ، وغير ذلك الكثير.
أثناء العمل مع نموذج الصندوق ، قد تستفيد أيضًا من رؤية نظام الشبكة قيد التشغيل على الصفحة. للقيام بذلك ، ألق نظرة على لوحة Layout – ستكون الخيارات التي تحتاجها ضمن قائمة Grid :
سيؤدي النقر فوق إعدادات العرض المطلوبة ثم اختيار التراكب ذي الصلة إلى إظهاره على الشاشة ، مما يتيح لك اتخاذ قرارات أكثر دقة باستخدام نموذج الصندوق لمعالجة عناصر الموقع.
لقد تحولوا من الكلمات الطنانة إلى مصطلحات معجمية متكاملة ، لكن “سريع الاستجابة” و “متوافق مع الجوّال” هما عاملان أساسيان في تطوير الويب. على هذا النحو ، تتعامل أداة Inspect Element مع هذا الوجه من خلال ميزتين.
في معظم المتصفحات ، ستحتوي أداة Inspect Element على رمز جهاز محمول بطول شريط الأدوات العلوي:
Safari ، مع ذلك ، مختلف. بدلاً من ذلك ، هناك مفتاح تبديل وضع التصميم المتجاوب الدخول / الخروج في قائمة التطوير :
بغض النظر عن كيفية الوصول إلى هناك ، بمجرد تحديد الخيار ، ستظهر صفحة الويب كما لو كنت تشاهدها على جهاز أصغر:
بينما يمنحك Safari فقط إمكانية اختيار أجهزة Apple المختلفة ، إلا أن المتصفحات الأخرى تحفر لتزودك بالأدوات التي تحتاجها للتصميم باستخدام مبادئ الجوال أولاً. على سبيل المثال ، يمكنك اختيار اتجاه منفذ العرض ، وكذلك الجهاز الذي ترغب في محاكاته:
هناك ميزتان أخريان مثيرتان للاهتمام هنا. أولاً ، يمكنك اختيار سرعة شبكة تمت مضاهاتها. لا يتضمن Safari أي خيارات لذلك ، وتقدم المتصفحات القائمة على Chromium خيارًا عامًا صغيرًا من تقييد الشبكة:
يقوم Firefox بأفضل ما يكون هنا ، مع مجموعة جيدة من خيارات الشبكة للاختيار من بينها:
لتقريب الأشياء ، يمكنك محاكاة ردود الفعل اللمسية والتعرف على المستشعر أيضًا. إنه الإعداد الافتراضي في المتصفحات المستندة إلى Chromium ، وفي Firefox ، يجب عليك تشغيله:
يقع Firefox في الخلف هنا ، حيث يظهر Chrome و Brave وغيرهما المؤشر الخاص بك على أنه تراكب صغير “يشبه أطراف الأصابع”. الوظيفة ليست مثالية لأي متصفح ، على الرغم من أنها طريقة موثوقة لتحديد كيفية عمل موقعك على الأجهزة الأخرى.
غالبًا ما يقع هذا النوع من الاختبارات على جانب الطريق للعديد من مطوري الويب. ومع ذلك ، لا يوجد أي عذر الآن عندما تقدم المتصفحات حلولًا شاملة مثل هذه.
غالبًا ما تكون معظم اختصارات لوحة مفاتيح المتصفح هي نفسها عبر المتصفحات. هذه أخبار جيدة إذا كنت تتنقل بين الأدوات المختلفة لاختبار مواقعك.
فيما يلي قائمة سريعة ببعض الاختصارات الأكثر شيوعًا (وقيمة):
افتح أداة Inspect Element Command + Shift + C لنظام التشغيل Mac ، Control + Shift + C لنظام التشغيل Windows
التنقل بين العقد حتى و أسفل السهام
قم بتوسيع العقدة المحددة السهم الأيمن
تصغير العقدة المحددة سهم لليسار
بشكل متكرر توسيع العقد وطيها Option + النقر لنظام التشغيل Mac ، Alt + النقر لنظام التشغيل Windows
تحرك داخل عقدة للعمل مع السمات أدخل أو رجوع
خطوة للأمام من خلال سمات العقدة فاتورة غير مدفوعة
خطوة للخلف من خلال سمات العقدة Shift + Tab
إخفاء أو إظهار العقدة المحددة ح
تحرير وإيقاف تحرير عقدة بتنسيق HTML F2
عند تحديد خاصية CSS ، قم بزيادة القيمة بمقدار واحد سهم لأعلى
عند تحديد خاصية CSS ، قم بإنقاص القيمة بمقدار واحد سهم لأسفل
عند تحديد خاصية CSS ، قم بزيادة القيمة بمقدار عشرة Shift + سهم لأعلى
عند تحديد خاصية CSS ، قم بإنقاص القيمة بمقدار واحد Shift + سهم لأسفل
عند تحديد خاصية CSS ، قم بزيادة القيمة بمقدار 0.1 Option + سهم لأعلى لنظام التشغيل Mac ، و Alt + سهم لأعلى لنظام التشغيل Windows
عند تحديد خاصية CSS ، قم بإنقاص القيمة بمقدار 0.1 Option + سهم لأسفل لنظام التشغيل Mac ، و Alt + سهم لأسفل لنظام التشغيل Windows
بالطبع ، هناك العديد من الاختصارات المتاحة. لدى Mozilla وثائق استثنائية لمتصفح Firefox ، بينما يشارك Chrome و Brave و Edge وغيرهم الاختصارات . Apple أقل فائدة مع اختصارات مطوري Safari ، حيث لا توجد قائمة محددة في صفحات المساعدة الخاصة بهم. بدلاً من ذلك ، نقترح قراءة الوثائق الرسمية لأدوات مطور Safari.
لم يعد تطوير الويب مجرد HTML. هناك العديد من التقنيات المعنية. حتى التمسك بالثالوث المقدس لـ HTML و CSS و JavaScript ، ستظل بحاجة إلى معرفة كيف يجمع موقع الويب كل هذه المكونات معًا.
تعد أداة Inspect Element الخاصة بالمستعرض واحدة من أفضل الطرق للبحث تحت غطاء موقع الويب ومعرفة كيفية عمله بالتفصيل الواضح. على الرغم من أنها رائعة كوسيلة مساعدة للتعلم ، إلا أنها يمكن أن تساعدك أيضًا في اختبار التغييرات على موقعك ومعرفة كيفية عمله على الأجهزة المختلفة وشبكات الجوال.
