كيفية فتح ملف index.html في المتصفح مع تطبيق التغييرات تلقائيًا على الصفحة

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

يمكنك استخدام إضافة اسمها Live Server لعرض التغييرات تلقائيا في المتصفح بدون الحاجة لإعادة التحميل، في VS Code اضغط على رمز الإضافات على اليسار و اكتب في البحث: Live Server، و اختر أول نتيجة واضغط على Install.

بعد تثبيت الإضافة، افتح ملف index.html واضغط كليك يمين داخل الملف، ثم اختر "Open with Live Server"، و سيتم فتح الملف في المتصفح، وكل مرة تحفظ فيها سيتم تحديث الصفحة تلقائيا.

يجب وجود خادم لكي يتم من خلاله اكتشاف التحديثات الجديدة ويتم تحديث الصفحة بشكل تلقائي لعرضها، لذا ستحتاج إلى تثبيت إضافة Live server بالضغط على أيقونة الإضافات في المحرر ثم البحث عن live server أو تستطيع الضغط على الرابط التالي مباشرًة للتوجه لصفحة الإضافة ثم اضغط على install وسيتم فتحها مباشرًة في محرر vscode فاضغط على install للتثبيت:

• Live Server

الآن قم بفتح مجلد المشروع في vscode بالضغط على file ثم open folder واختر مجلد المشروع.

ثم افتح ملف index.html وهو الملف الرئيسي للمشروع، ثم ستجد بالأسفل زر باسم go live اضغط عليه وسيتم تشغيل الخادم في المتصفح وأي تغييرات تجريها ثم تحفظها بالضغط على CTRL + S ستظهر في المتصفح مباشرًة: