كيفية تعديل صفحات الويب على Safari باستخدام Inspect Element

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

إليك دليل بسيط مُوجه للمبتدئين لشرح كيف يُمكنك البدء في استخدام Inspect Element في Safari والإستفادة من التجربة التي تُقدمها لتعديل نصوص وصور موقع الويب بأقل قدر من المعرفة بالبرمجة. تحقق من كيفية تحرير النص على موقع الويب باستخدام Google Chrome لتغيير مُحتواه.

كيفية تعديل صفحات الويب على Safari باستخدام Inspect Element - Mac

ما هي Inspect Element؟

Inspect Element هي أداة مُخصصة للمُطور. حيث إنها ليست مُتاحة فقط على Safari ، ولكن أيضًا على مُتصفحات الويب الأخرى مثل Chrome و Firefox و Edge. باستخدام Inspect Element ، يُمكنك إلقاء نظرة خاطفة على ما يوجد خلف ستار أحد مواقع الويب للكشف عن كود الواجهة الأمامية ، مثل HTML و CSS. ومع ذلك ، فإنها لا تمنحك رؤية الواجهة الخلفية ، مثل قواعد البيانات الخاصة بها.

لا يُمكنك رؤية هذا الكود البرمجي فحسب ، بل يُمكنك تعديله أيضًا. هذا يعني أنه يُمكنك تغيير مظهر موقع الويب. يُمكنك استبدال صورة ، وإعادة صياغة بعض النصوص ، واستخدام خط مُختلف ، وتبديل نظام الألوان المُستخدم  ، والمزيد. ومع ذلك ، فإنَّ هذه التعديلات محلية. لن تظهر لأي شخص آخر غيرك ؛ تختفي بمجرد تحديث الصفحة أو الابتعاد عنها.

  كيفية إلغاء تثبيت التطبيقات بالكامل على جهاز MacOS

لماذا يجب عليك استخدام Inspect Element؟

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

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

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

كيفية الوصول إلى Inspect Element على Safari

يُمكنك فتح Inspect Element على Safari باستخدام قائمة المطور:

  • افتح تطبيق Safari كيفية تعديل صفحات الويب على Safari باستخدام Inspect Element - Mac .
  • انقر فوق Safari في شريط القائمة العلوي.
  • من القائمة المنسدلة ، حدد التفضيلات.
  • حدد الخيار “مُتقدم”.
  • حدد المربع الذي يُشير إلى إظهار قائمة التطوير في شريط القائمة.

كيفية تعديل صفحات الويب على Safari باستخدام Inspect Element - Mac

بعد تحديد هذا الخيار ، يُمكنك النقر بزر الماوس الأيمن فوق إحدى صفحات الويب وتحديد Inspect Element. بدلاً من ذلك ، يُمكنك تحديد Develop في شريط القائمة ، ثم إظهار Web Inspector.

كيفية البحث عن عناصر الويب في Inspect Element

كيفية تعديل صفحات الويب على Safari باستخدام Inspect Element - Mac

لبدء تحرير عنصر ، انقر بزر الماوس الأيمن فوق ما تُريد تحريره وانقر فوق Inspect Element. سيؤدي هذا إلى فتح نافذة المُطور ، مع تمييز القسم ذي الصلة. قد تجد أنَّ العنصر المُحدد الذي ترغب في فحصه (الصورة أو النص ، على سبيل المثال) مخفي ؛ لتحديد مكانه ، استخدم الأسهم الموجودة على اليسار لتوسيع الأقسام المتداخلة.

  أفضل تطبيقات تحرير نصوص HTML لنظام التشغيل Mac

كيفية تعديل صفحات الويب على Safari باستخدام Inspect Element - Mac

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

كيفية تحرير نص موقع الويب باستخدام Inspect Element

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

إنَّ العملية حقًا بهذه البساطة! الأوقات الوحيدة التي لن ينجح فيها ذلك هي عندما يكون النص في الواقع جزءًا من صورة ، مثل الشعار.

كيفية تحرير صور موقع الويب باستخدام Inspect Element

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

كيفية تعديل صفحات الويب على Safari باستخدام Inspect Element - Mac

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

  الأدوات الأساسية والنصائح المميزة للعمل مع الشاشات المتعددة على Mac

التعمق في تصميم مواقع الويب باستخدام Safari

تُتيح لك أداة Inspect Element المُضمنة في Safari إمكانية العثور على الكود البرمجي المُقابل للنص والصور وتغييره بسهولة ، وهو أمر سهل مثل تبديل نص أو سلسلة عنوان URL. بمجرد الانتهاء من تحرير موقع ويب باستخدام Inspect Element ، ما عليك سوى تحديث الصفحة وسيعود كل شيء إلى طبيعته. يُمكنك الإطلاع الآن على كيفية استخدام Chrome DevTools لاستكشاف مشكلات موقع الويب وإصلاحها.

المصدر
Scroll to Top