إذا نظرت إلى أداة فحص Chrome دون أي معرفة بكيفية عملها ، فكل ما تراه هو مجموعة من الكود واللوحات المربكة. ربما تعتقد أنه من المنطقي أكثر لمبرمج ، وأنت على حق في حد ما. لكنني هنا لأخبرك كيف يمكن أن تفيدك هذه الأداة ، حتى لو لم تكن قد كتبت سطرًا من التعليمات البرمجية في حياتك.
هل تريد العثور على روابط مخفية وصور وملفات صوتية على مواقع الويب؟ يمكن أن تساعدك أداة فحص Chrome. من المفيد عندما ترغب في تنزيل الصور أو مقاطع الفيديو التي لا يمكنك النقر بزر الماوس الأيمن أو العثور على مصدر المحتوى المدمج. عادة ما يتم وضع الروابط داخل العلامات التي تحتوي على صور “A” ، داخل “IMG” ، ومقاطع الفيديو داخل علامات “الفيديو” ، ويمكنك رؤيتها جميعًا في جزء العناصر.
لا تحتاج إلى أن تكون مبرمجًا لاستخدام أداة فحص Chrome ، ولكن معرفة HTML الأساسية يساعد. HTML هي لغة بسيطة تبني صفحات الويب باستخدام العلامات. تعلم الأساسيات يستغرق بضع دقائق فقط.
لاستخدام الأداة ، انقر بزر الماوس الأيمن على أي عنصر صفحة ويب ، مثل النص أو الصور أو الروابط ، وحدد “فحص” في القائمة.
يمكنك أيضًا الضغط على CTRL+Shift+C (Windows) أو CMD+Shift+C (MAC) لفتح الأداة. ثم اضغط على CTRL+F (Windows) أو CMD+F (MAC) للبحث عن عناصر محددة.
تخصيص مظهر موقع الويب
يمكنك أيضًا تخصيص مظهر موقع ويب مؤقتًا باستخدام أداة فحص Chrome. ستكون التغييرات التي تجريها مؤقتة لأن المفتش هو بيئة معزولة (المعروفة باسم صندوق الرمل). ما تفعله لن يؤثر على الموقع الرئيسي ، مما يعني أنه لا داعي للقلق بشأن كسر أي شيء.
هناك العديد من حالات الاستخدام هنا حيث يمكن للقرص الصغيرة تحسين تجربة المستخدم الخاصة بك. على سبيل المثال ، إذا كان الخط صغيرًا جدًا ، فيمكنك تغييره. يمكنك حتى تغيير لون الخلفية إلى شيء أغمق في ظروف الإضاءة المنخفضة. إذا كانت لافتة تصرف انتباهك ، فيمكنك تعطيلها.
بالنسبة لهذا القسم ، ستحتاج إلى معرفة CSS الأساسية (أوراق نمط متتالية) ، وهي لغة أخرى بسيطة تصف كيف يجب أن تبدو عناصر صفحة الويب. مرة أخرى ، لا تحتاج إلى أن تكون مبرمجًا. هذا مفيد مقدمة إلى CSS بواسطة Mozilla يمكن أن تجعلك تعرف على مفاهيمها الأساسية في 15 دقيقة.
دعونا نلقي نظرة على مشكلة الانتباه. إذا أردت أن تختفي ، يمكنك فحص العنصر على صفحة الويب ووضع السطر التالي من التعليمات البرمجية في جزء “الأنماط”:
display: none;
نظرًا لأن أداة التفتيش تظهر على الجانب الأيمن من نافذة المتصفح افتراضيًا ، فإن جزء “الأنماط” عادة ما يكون أسفله.
إنه بديهي للغاية ، ولا يتطلب أي خبرة في الترميز ، ويمكنك بسهولة استخدام ورقة غش CSS أو AI لإجراء التغييرات التي تحتاجها. علاوة على ذلك ، فإنه يوفر تسليط الضوء على بناء الجملة والإكمال التلقائي لضمان كتابة رمز العمل.
متعلق ب
11 نصائح للبدء مع CSS الحديثة
نصائح النمط التي لن تخرج عن الموضة.
اكتشف المحتوى المخفي
تمامًا مثلما يمكنك إخفاء المحتوى على موقع ويب ، يمكنك أيضًا الكشف عنه عندما يكون مخفيًا. يمكن أن يكون هذا روابط أو وسائط أو محتوى آخر. يعد القيام بذلك مفيدًا ، على سبيل المثال ، تريد أن ترى مقتطفًا مقالًا مخفيًا خلف جدار paywall أو تمكين الميزات المخفية مثل الأزرار وحقول النماذج لمعرفة ما يفعلونه.
فيما يلي أمثلة على التعليمات البرمجية التي يمكنك البحث عنها وإزالتها في لوحة الأنماط لرؤية المحتوى المخفي:
display: none;visibility: hidden;
opacity: 0;
قد يتم إخفاء بعض المحتوى باستخدام JavaScript ، وهو أمر يصعب تعديله إذا لم تكن مبرمجًا. لكن هذا مناقشة ليوم آخر.
تشخيص مشكلات الموقع
إذا كان موقع الويب بطيئًا ، فقد يكون من الصعب في بعض الأحيان تشخيص المشكلة. يمكنك استخدام أداة فحص Chrome لمعرفة ما إذا كان الموقع أو شبكتك.
للقيام بذلك ، افتح أداة فحص Chrome وحدد علامة التبويب “الشبكة”. قد ترغب في توسيع الجزء إذا لم يكن مرئيًا لرؤية علامات التبويب الأخرى. هنا ، سترى كل شيء يتم تحميل الصفحة ، بما في ذلك HTML و CSS والبرامج النصية والوسائط.
ابحث عن أي عناصر يتم تمييزها باللون الأحمر وتحقق من عمود الحالة للحصول على رمز خطأ (على سبيل المثال ، 404 أو 500). يمكنك بعد ذلك الاتصال بمسؤول موقع الويب والإبلاغ عن الخطأ والعناصر المتأثرة.
بدلاً من ذلك ، يمكنك استخراج سجل الشبكة بالنقر فوق أيقونة التنزيل في القائمة أسفل علامات التبويب. بعد ذلك ، يمكنك إرسالها إلى المسؤول حتى يتمكنوا من استكشاف المشكلة وإصلاحها في العمل بشكل صحيح من أجلك.
إذا اتضح أن شبكتك هي المشكلة ، فأنت بحاجة إلى استكشاف ذلك. إذا كان الأمر بطيئًا ، فيمكنك اتخاذ خطوات لتسريع اتصال الإنترنت الخاص بك.
تعلم تطوير الويب
إذا كنت في رحلتك لتصبح مطور ويب ، فإن أداة فحص Chrome هي أداة ممتازة للتعلم. الأهم من ذلك ، يمكن أن يعلمك كيف يتم تنظيم مواقع الويب.
على سبيل المثال ، تكشف علامة تبويب “العناصر” عن بنية HTML للموقع. يمكن أن يوضح كيف يتم استخدام العلامات الشائعة مثل “div” و “p” أو “a” ، وكذلك CSS ، لبناء تخطيطات مذهلة.
أيضًا ، كما ذكرنا سابقًا ، تتيح لك أداة التفتيش إجراء تغييرات مؤقتة على HTML و CSS و CSS لموقع الويب. يوفر هذا بيئة ممارسة جيدة ، وخاصة على مواقع الويب الكبيرة التي تحتوي على رمز معقد. تعتبر التجربة في هذه البيئة طريقة جيدة لمعرفة كيفية عمل تعديلاتك في الوقت الفعلي وتعزيز ما تعلمته.
متعلق ب
7 يجب أن يعرف مطورو الويب المبتدئون في المواقع المفيدة
التخطيط لتعلم تطوير الويب؟ يجب أن تكون هذه المواقع السبعة في قائمة الموارد الخاصة بك.
يمكن أن تكون أداة فحص Chrome مخيفة ، خاصة بالنسبة لأولئك الذين لا يستطيعون الترميز. لكن ليس عليك أن تكون مبرمجًا خبيرًا لاستخدامه. وإذا كنت على استعداد لبذل القليل من الجهد لفهم HTML و CSS الأساسيين ، فقد تصبح أداة لا تقدر بثمن لتحسين تجربة التصفح الخاصة بك.
(tagstotranslate) الويب (T) Google Chrome (T) Google