معاينة صفحة الويب أثناء كتابة الكود Live ببرنامج VSCode

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

لنبدأ على بركة الله

معاينة الموقع أثناء كتابة الكود VSCode

ليمكنك معاينة تغيير الكود وتأثيره على تصميم صفحتك بشكل مباشر ستحتاج لهذه التحضيرا

الأدوات المستخدمة

ما ستحتاجه لتطبيق المطلوب هو:

متصفح إنترنت (يفضل جوجل كروم)

برنامج VSCode

تنصيب إضافة Live Server على VSCode

شرح طريقة معاينة التصميم لايف أثناء الكود

أولًا: إضافة Live Server

يمكنك فتح مشروعك الخاص مباشرًة بإستخدام VSCode أو قم بإنشاء فولدر جديد وفتحه بإستخدام برنامج VSCode

بداخل نافذة برنامج Visual Studio Code قم من القائمة الجانبية بالضغط على تبويب الإضافات Extentions ومنها قم بالبحث عن إضافة Live Server وتنصيبها بالضغط من أمامها على Install

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

ولكن إذا حاولت عمل تغييرات في الكود وبرغم أن الإضافة منصبة بالفعل فإنك لن ترى هذه التغييرات، السبب يعود في إنك تحتاج لعمل حفظ أولًا Save.

ولكن لذلك حل أيضًا.

ثانيًا: تفعيل الحفظ التلقائي Auto Save

قم من القائمة العلوية ببرنامج VSCode بفتح قائمة File ومنها قم بالضغط على خيار Auto Save

بذلك سيتم حفظ الكود بشكل تلقائي دائمًا وستعمل الإضافة بأفضل شكل لها.

إذا كنت تواجه مشكلة في تطبيق المطلوب يمكنك مشاهدة هذا الفيديو أو إضافة تعليق بمشكلتك ليمكننا مساعدتك.

فيديو الشرح كامل

معاينة صفحة الويب أثناء تعديل الكود Live

نتمنى أن يكون مقال اليوم قد نال إعجابكم .. أطيب أمنياتنا للجميع بالتوفيق

Mohamed

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

This Post Has One Comment

  1. sklep internetowy

    Wow, wonderful weblog structure! How long have you
    been running a blog for? you make running a blog
    glance easy. The overall glance of your site is great,
    let alone the content material! You can see similar:
    najlepszy sklep and here najlepszy sklep

Comments are closed.