Physical Address
304 North Cardinal St.
Dorchester Center, MA 02124
يحتاج مصممين ومبرمجين الويب بشكل دائم لمعاينة التغييرات التي قاموا بها على الكود أثناء برمجتهم أو تصميمهم لصفحة الويب، لذا أحببنا أن نقدم إليكم طريقة معاينة تغييرات الكود بشكل حي 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
بذلك سيتم حفظ الكود بشكل تلقائي دائمًا وستعمل الإضافة بأفضل شكل لها.
إذا كنت تواجه مشكلة في تطبيق المطلوب يمكنك مشاهدة هذا الفيديو أو إضافة تعليق بمشكلتك ليمكننا مساعدتك.
فيديو الشرح كامل
نتمنى أن يكون مقال اليوم قد نال إعجابكم .. أطيب أمنياتنا للجميع بالتوفيق