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

ملحق Live Server في VSCode

ملحق Live Server هو إضافة شائعة في برنامج Visual Studio Code (VSCode) تتيح للمطورين تشغيل خادم محلي يشغّل صفحات الويب مباشرة من داخل بيئة التطوير. يساعد هذا الملحق في معاينة التعديلات الفورية على الصفحات HTML وCSS وJavaScript دون الحاجة إلى تحديث يدوي للمتصفح.

كيفية استخدام Live Server:

1. تثبيت الملحق:
   
   
   
   • افتح VSCode.
   
   
   • انتقل إلى قسم الملحقات (Extensions) من خلال النقر على الأيقونة المناسبة في الشريط الجانبي.
   
   
   • ابحث عن "Live Server" وثبّته.
   
   
   
   


2. تشغيل الخادم:
   
   
   
   • افتح المجلد الذي يحتوي على ملفات مشروعك.
   
   
   • انقر بزر الماوس الأيمن على ملف HTML واختر "Open with Live Server" من القائمة المنبثقة.
   
   
   
   


3. معاينة التعديلات:
   
   
   
   • بمجرد تشغيل الخادم، سيتم فتح المتصفح تلقائيًا لعرض الصفحة.
   
   
   • ستلاحظ أن التعديلات التي تجريها على الملفات ستظهر مباشرة في المتصفح دون الحاجة إلى إعادة تحميل الصفحة.
   
   
   
   

الفرق بين بروتوكول الملفات وHTTP

بروتوكول الملفات (File Protocol):

عندما تفتح ملفًا محليًا عبر متصفح الويب، يستخدم المتصفح بروتوكول الملفات (file://) للوصول إلى الملف مباشرة من النظام المحلي. يوفر هذا البروتوكول وصولًا مباشرًا إلى جميع المجلدات والملفات على جهاز الكمبيوتر.

• القدرة على الوصول: يمكن لبروتوكول الملفات الوصول إلى أي ملف على جهاز الكمبيوتر.


• الأمان: نظرًا لأن الملفات تُعرض مباشرة من النظام المحلي، فإن الأمان أقل مقارنة بالوصول عبر HTTP.


• الاستخدام: يستخدم بشكل أساسي للوصول إلى الملفات المحلية أثناء التطوير.

بروتوكول HTTP:

بروتوكول HTTP (Hypertext Transfer Protocol) هو البروتوكول المستخدم لنقل البيانات عبر الشبكة. عندما تستخدم Live Server، يقوم بإعداد خادم محلي يستخدم بروتوكول HTTP لتقديم الملفات من المجلد المفتوح في VSCode.

• القدرة على الوصول: يقتصر الوصول على الملفات داخل المجلد المفتوح في VSCode.


• الأمان: يوفر أمانًا أفضل من بروتوكول الملفات نظرًا لأنه يتم عبر شبكة محلية.


• الاستخدام: يستخدم للوصول إلى الملفات عبر خادم محلي، مما يحاكي بيئة الخادم الحية.

فتح مجلدات مختلفة في VSCode

عند فتح مجلد جديد في VSCode وتشغيل Live Server، ستلاحظ أن عنوان الخادم (127.0.0.1:5500) يعكس المجلد المفتوح حاليًا. هذا يعني أن Live Server سيقدم الملفات من هذا المجلد فقط.

الخطوات:

1. فتح مجلد جديد:
   
   
   
   • اذهب إلى قائمة "ملف" (File) في VSCode واختر "فتح مجلد" (Open Folder).
   
   
   • اختر المجلد الجديد الذي تريد العمل عليه.
   
   
   
   


2. تشغيل Live Server:
   
   
   
   • انقر بزر الماوس الأيمن على ملف HTML داخل المجلد الجديد.
   
   
   • اختر "Open with Live Server".
   
   
   
   


3. ملاحظة التغيير:
   
   
   
   • لاحظ أن عنوان الخادم قد يتغير ليعكس المجلد الجديد.
   
   
   
   

الوصول إلى المواقع الإلكترونية عبر المتصفح

لفهم كيفية وصول المتصفح إلى موقع مثل فيسبوك، سنفصل العملية كما يلي:

1. إرسال طلب إلى خوادم DNS:
   
   
   
   • عندما تدخل عنوان الموقع في المتصفح، يتم إرسال طلب إلى خوادم DNS (نظام أسماء النطاقات) لتحويل اسم النطاق إلى عنوان IP.
   
   
   
   


2. البحث عن عنوان IP:
   
   
   
   • تبحث خوادم DNS عن عنوان IP المرتبط باسم النطاق، مثل facebook.com.
   
   
   
   


3. إرسال طلب إلى عنوان IP:
   
   
   
   • يرسل المتصفح طلبًا إلى عنوان IP الذي تم العثور عليه من خوادم DNS.
   
   
   
   


4. استلام استجابة من الخادم:
   
   
   
   • يستجيب الخادم الذي يعمل على عنوان IP بالبيانات المطلوبة، مثل نصوص HTML أو ملفات محتوى أخرى، ويعرضها في المتصفح.
   
   
   
   

خاتمة

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