كيفية تحرير صفحة الويب في المتصفح الخاص بك

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

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

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

تحرير أي صفحة ويب في المتصفح الخاص بك

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

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

أستخدم Firefox لذا سأريك كيفية استخدام ذلك. كروم هو نفسه على الرغم من ذلك بكثير.

1. افتح صفحة ويب تريد تجربتها في متصفحك.
2. انقر بزر الماوس الأيمن في أي مكان على الصفحة وحدد فحص.

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

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

• إذا كنت ترغب في الالتفاف حول كيفية ظهور الصفحة ، فحاول محرر الأنماط.
• إذا كنت تريد الالتفاف حول كيفية عمل الصفحة ، فجرّب Console أو Accessibility.
• إذا كنت ترغب في سحق الأخطاء أو حل مشكلة ، استخدم Console أو Debugger

الأداء مفيد لكبار المسئولين الاقتصاديين في الموقع ولكن لا يتم استخدام الذاكرة والشبكة والتخزين بشكل كبير.

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

إجراء تغييرات على الصفحة

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

1. انقر بزر الماوس الأيمن فوق العنصر المحدد الذي تريد تغييره وحدد فحص.
2. قم بتمييز السطر "إما" أو "H1" حتى يتم تمييز النص في الجزء العلوي.
3. انتقل إلى الجزءين الأيسر والعثور على لون الخط.
4. قم بتغيير القيمة إلى شيء مختلف أو حدد نقطة اللون لاستخدام محدد.

سيظهر التغيير الخاص بك بشكل حيوي عند الانتهاء من التغيير. يمكنك تغيير اللون والحجم والخط والخلفية وكل شيء عن الخط. لا يمكنك حفظ العمل ولكن ستظل التغييرات الخاصة بك لتلك الجلسة.

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

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