أدوات الفحص في متصفح Google Chrome ليست مخصصة فقط للمبرمجين أو مطوري المواقع. يمكنك استخدامها بسهولة لاكتشاف محتوى الصفحات، تعديل العناصر مؤقتًا، تحليل تصميم أي موقع، وحتى تحميل الصور أو تعديل النصوص الظاهرة دون لمس الكود الحقيقي. إذا كنت تظن أن هذه الأدوات معقدة أو مخصصة للمحترفين فقط، فكر مرة أخرى. في هذا المقال ستتعرف على طرق بسيطة ومفيدة للاستفادة من أدوات الفحص، حتى لو لم تكن لديك أي خلفية تقنية.
إذا نظرت إلى أداة فحص كروم دون أي معرفة بكيفية عملها، فكل ما ستراه هو مجموعة من الأكواد البرمجية واللوحات المُربكة. ربما تعتقد أنها أكثر منطقية للمبرمج، وأنت محق إلى حد ما. لكنني هنا لأخبرك كيف يُمكن لهذه الأداة أن تُفيدك، حتى لو لم تكتب سطرًا واحدًا من الأكواد البرمجية في حياتك.
البحث عن الروابط والوسائط والموارد الأخرى
هل ترغب في العثور على الروابط والصور وملفات الصوت المخفية على مواقع الويب؟ يُمكن لأداة فحص كروم مساعدتك. إنها مفيدة عندما تريد تنزيل صور أو مقاطع فيديو لا يُمكنك النقر عليها بزر الماوس الأيمن أو العثور على مصدر المحتوى المُضمّن. عادةً ما تُوضع الروابط داخل وسوم تحتوي على حرف “a”، والصور داخل وسوم “img”، ومقاطع الفيديو داخل وسوم “video”، ويمكنك رؤيتها جميعًا في لوحة العناصر.
ملاحظة
لا يشترط أن تكون مبرمجًا لاستخدام أداة فحص كروم، ولكن معرفة أساسيات HTML تُفيد. HTML لغة بسيطة تُنشئ صفحات الويب باستخدام الوسوم. تعلّم الأساسيات لا يستغرق سوى بضع دقائق.
لاستخدام الأداة، انقر بزر الماوس الأيمن على أي عنصر في صفحة الويب، مثل النصوص أو الصور أو الروابط، ثم اختر “فحص” من القائمة.
يمكنك أيضًا الضغط على Ctrl+Shift+C (في نظام ويندوز) أو Cmd+Shift+C (في نظام ماك) لفتح الأداة. ثم اضغط على Ctrl+F (في نظام ويندوز) أو Cmd+F (في نظام ماك) للبحث عن عناصر محددة.
تخصيص مظهر موقع الويب
يمكنك أيضًا تخصيص مظهر موقع الويب مؤقتًا باستخدام أداة فحص كروم. ستكون التغييرات التي تُجريها مؤقتة لأن أداة الفحص بيئة معزولة (تُعرف عادةً باسم صندوق الحماية). لن يؤثر ما تفعله على الموقع الرئيسي، مما يعني أنك لست مضطرًا للقلق بشأن أي أعطال.
هناك العديد من الاستخدامات هنا حيث يُمكن للتعديلات البسيطة تحسين تجربة المستخدم. على سبيل المثال، إذا كان الخط صغيرًا جدًا، يُمكنك تغييره. يُمكنك حتى تغيير لون الخلفية إلى لون أغمق في ظروف الإضاءة المنخفضة. إذا كانت إحدى اللافتات تُشتت انتباهك، يُمكنك تعطيلها.
ملاحظة
في هذا القسم، ستحتاج إلى معرفة أساسيات CSS (أوراق الأنماط المتتالية)، وهي لغة بسيطة أخرى تصف كيفية ظهور عناصر صفحة الويب. مرة أخرى، لستَ بحاجة إلى أن تكون مبرمجًا. هذه المقدمة المفيدة لـ CSS من موزيلا ستُمكّنك من فهم مفاهيمها الأساسية في 15 دقيقة.
لنلقِ نظرة على مشكلة اللافتة المُشتتة. إذا أردتُ التخلص منها، يُمكنك فحص العنصر في صفحة الويب ووضع سطر التعليمات البرمجية التالي في لوحة “الأنماط”:
display: none;
نظرًا لأن أداة التفتيش تظهر على الجانب الأيمن من نافذة المتصفح بشكل افتراضي، فستكون لوحة “الأنماط” عادةً أسفلها.
إنه بديهي للغاية، ولا يتطلب خبرة في البرمجة، ويمكنك بسهولة استخدام ورقة غش CSS أو الذكاء الاصطناعي لإجراء التغييرات اللازمة. علاوة على ذلك، يوفر تمييزًا للقواعد النحوية وإكمالًا تلقائيًا لضمان كتابة شيفرة برمجية سليمة.
اكتشف المحتوى المخفي
كما يمكنك إخفاء محتوى على موقع ويب، يمكنك أيضًا إظهاره عند إخفائه. قد يكون هذا روابط أو وسائط أو محتوى آخر. يُعد القيام بذلك مفيدًا، على سبيل المثال، إذا كنت ترغب في رؤية مقتطف مقال مخفيًا خلف جدار حماية، أو تفعيل ميزات مخفية مثل الأزرار وحقول النماذج لمعرفة وظيفتها.
إليك أمثلة على شيفرة برمجية يمكنك البحث عنها وإزالتها في لوحة الأنماط لرؤية المحتوى المخفي:
display: none;
visibility: hidden;
opacity: 0;قد يكون بعض المحتوى مخفيًا باستخدام جافا سكريبت، مما يصعب تعديله قليلًا إذا لم تكن مبرمجًا. لكن هذا نقاشٌ لوقتٍ لاحق.
تشخيص مشاكل الموقع
إذا كان الموقع بطيئًا، فقد يصعب أحيانًا تشخيص المشكلة. يمكنك استخدام أداة فحص كروم لمعرفة ما إذا كانت المشكلة في الموقع أم في شبكتك.
للقيام بذلك، افتح أداة فحص كروم واختر علامة تبويب “الشبكة”. قد ترغب في توسيع اللوحة إذا لم تكن مرئية لرؤية علامات التبويب الأخرى. هنا، سترى كل ما تُحمّله الصفحة، بما في ذلك HTML وCSS والبرامج النصية والوسائط.
ابحث عن أي عناصر مُظللة باللون الأحمر، وتحقق من عمود “الحالة” الخاص بها بحثًا عن رمز خطأ (مثل 404 أو 500). يمكنك بعد ذلك التواصل مع مسؤول الموقع والإبلاغ عن الخطأ والعناصر المتأثرة.
أو يمكنك استخراج سجل الشبكة بالنقر على أيقونة التنزيل في القائمة أسفل علامات التبويب. بعد ذلك، يمكنك إرساله إلى المسؤول ليتمكن من استكشاف المشكلة وإصلاحها، وليعمل الموقع بشكل صحيح.
إذا اتضح أن شبكتك هي المشكلة، فعليك استكشافها وإصلاحها. إذا كانت بطيئة، يمكنك اتخاذ خطوات لتسريع اتصالك بالإنترنت.
تعلم تطوير الويب
إذا كنت في طريقك لتصبح مطور ويب، فإن أداة فحص كروم تُعد أداة ممتازة للتعلم. والأهم من ذلك، أنها تُعلمك كيفية هيكلة مواقع الويب.
على سبيل المثال، تُظهر علامة تبويب “العناصر” هيكل HTML الخاص بموقع الويب. كما يُمكنها إظهار كيفية استخدام الوسوم الشائعة مثل “div” و”p” و”a”، بالإضافة إلى CSS، لإنشاء تخطيطات رائعة.
كما ذكرنا سابقًا، تتيح لك أداة الفحص إجراء تغييرات مؤقتة على HTML وCSS وتخطيط موقع الويب. يوفر هذا بيئة تدريب جيدة، خاصةً على المواقع الكبيرة ذات الأكواد المعقدة. تُعد التجربة في هذه البيئة طريقة جيدة لمعرفة كيفية عمل تعديلاتك في الوقت الفعلي وتعزيز ما تعلمته.
قد تكون أداة فحص كروم مُرهقة، خاصةً لمن لا يجيدون البرمجة. لكن ليس بالضرورة أن تكون مبرمجًا خبيرًا لاستخدامه. وإذا كنت مستعدًا لبذل القليل من الجهد لفهم أساسيات HTML وCSS، فقد يصبح أداة قيّمة لتحسين تجربة تصفحك.
لا تحتاج إلى أن تكون مبرمجًا لتستفيد من أدوات الفحص في Chrome. ببضع نقرات فقط، يمكنك تعديل النصوص، تحليل التصاميم، وحتى تجربة تغييرات على المواقع قبل تنفيذها فعليًا. تتيح لك هذه الأدوات فهمًا أعمق لأي صفحة تزورها، وتعزز تجربتك على الإنترنت بشكل ملحوظ. جرّب النصائح التي استعرضناها، وستجد نفسك تستخدم أدوات الفحص في مواقف لم تكن تتوقعها من قبل.
