إعداد مساحات عمل لحفظ التغييرات في الملفات المصدر

bookmark_border تنظيم صفحاتك في مجموعات يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.

Kayce Basques

Sofia Emelianova

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

نظرة عامة

يتيح لك الاتصال التلقائي (أو اليدوي) بمجلد مساحة عمل حفظ التغيير الذي أجريته في DevTools في نسخة محلية من الملف نفسه على جهاز الكمبيوتر. على سبيل المثال، لنفترض ما يلي:

• لديك رمز المصدر لموقعك الإلكتروني على جهاز الكمبيوتر المكتبي.
• يتم تشغيل خادم ويب محلي من دليل الرموز المصدر، بحيث يمكن الوصول إلى الموقع الإلكتروني على العنوان localhost:PORT، ويعرض أيضًا ملف JSON بسيطًا يحتوي على بيانات وصفية (يتم وصفها لاحقًا).
• إذا كان موقعك الإلكتروني localhost:PORT مفتوحًا في Google Chrome، وكنت تستخدم أدوات المطوّرين لتغيير ملف CSS للموقع الإلكتروني

عند ربط مجلد مساحة عمل، يتم حفظ التغييرات التي تجريها في لوحة المصادر على ملفات CSS وHTML وJavaScript في الرمز المصدر على جهاز الكمبيوتر. ومع ذلك، لا تحفظ "أدوات مطوّري البرامج في Chrome" التغييرات التي تجريها على DOM في لوحة العناصر.

بالإضافة إلى ذلك، يمكن لأداة DevTools عادةً ربط الرمز المحسَّن برمز المصدر الأصلي بمساعدة خرائط المصدر.

إنشاء بيانات وصفية لاتصال

للسماح لأدوات المطوّرين باكتشاف مجلد مساحة العمل تلقائيًا، أنشئ رقم تعريف UUID عشوائيًا من الإصدار 4 وضعه في ملف JSON التالي:

{
  "workspace": {
    "uuid": "UUID",
    "root": "path/to/project/root/folder"
  }
}

بعد ذلك، ضَع ملف JSON في path/to/project/root/folder/.well-known/appspecific/com.chrome.devtools.json.

أخيرًا، شغِّل خادم HTTP المحلي وتأكَّد من عرض ملف JSON أيضًا.

بدلاً من ذلك، يمكنك تخطّي هذه الخطوة وإعداد اتصال مجلد يدويًا.

ربط مجلّد مساحة عمل

لربط مجلد:

1. في Chrome، انتقِل إلى صفحتك المستضافة محليًا (في هذا المثال، على العنوان localhost:8000) وافتح "أدوات مطوّري البرامج".

2. في المصادر > مساحة العمل، انقر على ربط بجانب المجلد.

   

3. انقر على تعديل الملفات عندما يُطلب منك ذلك للسماح لـ "أدوات مطوّري البرامج" بالوصول إلى مجلّدك.

   

4. بعد الربط، يمكنك فتح المجلد في علامة التبويب مساحات العمل.

   

تعرض علامة التبويب مساحة العمل نقطة خضراء بجانب ملفات HTML وCSS وJavaScript. تشير هذه النقاط الخضراء إلى أنّ "أدوات مطوّري البرامج" قد أنشأت ربطًا بين موارد الشبكة للصفحة والملفات في المجلد.

حفظ تغيير في المجلد المصدر

يمكنك حفظ التغييرات على أي ملفات CSS وHTML وJavaScript في مجلد مساحة العمل المرتبطة.

حفظ التغييرات في ملف CSS

لحفظ التغييرات في CSS:

1. افتح ملف CSS من مجلد مساحة العمل المرتبطة في المصادر > مساحات العمل.

2. أدخِل تغييرًا على CSS.

3. احفظ التغيير، على سبيل المثال، من خلال الضغط على Ctrl / Cmd + S، وراجِع التغيير الذي تم تطبيقه في الملف المصدر. تعرض لك لوحة المصادر نقطة خضراء بجانب اسم الملف.

للاطّلاع على سير العمل، شاهِد الفيديو التالي:

حفظ التغييرات في ملف HTML

لحفظ التغييرات في ملف HTML:

1. افتح ملف HTML من مجلّد مساحة العمل المرتبطة في المصادر > مساحات العمل.

2. أدخِل تغييرًا على ملف HTML.

3. احفظ التغيير، على سبيل المثال، من خلال الضغط على Ctrl / Cmd + S، وراجِع التغيير الذي تم تطبيقه في الملف المصدر. تعرض لك لوحة المصادر نقطة خضراء بجانب اسم الملف.

4. يُرجى إعادة تحميل الصفحة لمعرفة ما إذا كان التغيير ساريًا.

للاطّلاع على سير العمل، شاهِد الفيديو التالي:

حفظ التغييرات في JavaScript

لحفظ التغييرات في JavaScript:

1. افتح ملف JavaScript من مجلد مساحة العمل المرتبطة في المصادر > مساحات العمل.

2. أدخِل تغييرًا على JavaScript.

3. احفظ التغيير، على سبيل المثال، من خلال الضغط على Ctrl / Cmd + S، وراجِع التغيير الذي تم تطبيقه في الملف المصدر. تعرض لك لوحة المصادر نقطة خضراء بجانب اسم الملف.

4. إذا كان خادم HTTP المحلي يستمع إلى التغييرات في ملف المصدر المباشر ويعيد تحميل الصفحة تلقائيًا، ستظهر لك التغييرات المطبَّقة بعد حفظها في "أدوات المطوّر". وإلا، أعِد نشر الخادم المحلي.

للاطّلاع على سير العمل، شاهِد الفيديو التالي:

إزالة ربط مجلّد مساحة عمل

لإزالة ربط مجلد مساحة عمل، انقر بزر الماوس الأيمن على المجلد، واختَر إزالة من مساحة العمل من القائمة المنسدلة، ثم انقر على إزالة في المصادر > مساحة العمل.

ربط مجلد مساحة عمل يدويًا

1. افتح "أدوات مطوّري البرامج" على صفحتك المستضافة محليًا.

2. في المصادر > مساحة العمل، انقر على إضافة مجلد يدويًا. بعد ذلك، اختَر مجلدًا يحتوي على ملفاتك المصدر.

   

3. بعد ذلك، اتّبِع الخطوة 3 والخطوة 4 في ربط مجلد مساحة عمل.

القيود

إذا كنت تستخدِم إطار عمل حديثًا، من المرجّح أن يحوّل الإطار رمزك المصدر من تنسيق سهل التعديل إلى تنسيق محسّن للتشغيل بأسرع وقت ممكن. يمكن عادةً لربط مجلد مساحة العمل ربط الرمز المحسَّن مرة أخرى برمز المصدر الأصلي باستخدام خرائط المصدر.

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

الخطوات التالية

يمكنك إدارة جميع المجلدات التي تم إعدادها من قبل ضمن الإعدادات > مساحة العمل.

بعد ذلك، تعرَّف على كيفية استخدام "أدوات المطوّرين" لتغيير CSS وتصحيح أخطاء JavaScript.

انظر أيضًا

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