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

Kayce Basques

Sofia Emelianova

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

نظرة عامة

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

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

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

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

إنشاء بيانات وصفية لعملية ربط

للسماح لأدوات مطوّري البرامج باكتشاف مجلد مساحة العمل تلقائيًا، أنشِئ معرّف 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 أيضًا.

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

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

ملاحظة: تستخدم هذه الخطوة والخطوات التالية النسخة التجريبية من ميزة "مجلدات Workspace التلقائية" لعرض الميزة.

لربط مجلد، اتّبِع الخطوات التالية:

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

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

   

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

   

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

   

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

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

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

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

ملاحظة: من خلال مجلد مساحة عمل مرتبط، يمكن للوحة المساعدة المستنِدة إلى الذكاء الاصطناعي حفظ تغييرات CSS تلقائيًا في مصادرك.

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

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

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

   ملاحظة: يتم تطبيق التغيير على الصفحة المنشورة ولكن ليس على المصدر بعد.

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

   ملاحظة: ليس عليك إعادة تحميل الصفحة لتطبيق تغييرات CSS وحفظها.

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

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

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

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

2. أجرِ تغييرًا على رمز HTML.

   ملاحظة: لا ينطبق التغيير على الصفحة المنشورة أو المصدر بعد.

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

4. يُرجى إعادة تحميل الصفحة لتطبيق التغيير.

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

ملاحظة: يمكنك تطبيق تغيير في HTML وحفظه من لوحة المصادر، ولكن ليس من لوحة العناصر.

لماذا لا يمكنك تغيير HTML من لوحة العناصر؟

• تمثّل شجرة العُقد التي تظهر في لوحة العناصر نموذج DOM للصفحة.
• لعرض صفحة، يجلب المتصفّح رمز HTML عبر الشبكة، ويحلّله، ثم يحوّله إلى شجرة من عُقد DOM.
• إذا كانت الصفحة تحتوي على أي رمز JavaScript، قد يضيف هذا الرمز عُقد DOM أو يحذفها أو يغيّرها. يمكن لخدمة CSS تغيير نموذج DOM أيضًا باستخدام السمة content.
• يستخدم المتصفّح في النهاية نموذج DOM لتحديد المحتوى الذي يجب عرضه لمستخدمي المتصفّح.
• وبالتالي، قد تختلف الحالة النهائية للصفحة التي يراها المستخدمون كثيرًا عن رمز HTML الذي جلبه المتصفّح.
• ويجعل ذلك من الصعب على "أدوات مطوري البرامج" تحديد المكان الذي يجب أن يتم فيه حفظ التغيير الذي تم إجراؤه في لوحة العناصر، لأنّ نموذج العناصر في المستند (DOM) يتأثر بلغات HTML وJavaScript وCSS.

باختصار، شجرة نموذج العناصر في المستند !== HTML.

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

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

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

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

   ملاحظة: لا ينطبق التغيير على الصفحة المنشورة أو المصدر بعد.

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

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

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

ملاحظة: عند تغيير JavaScript، قد تحتاج أحيانًا إلى الوصول إلى لوحات أخرى، مثل لوحة العناصر أو وحدة التحكّم. لإجراء ذلك، يمكنك استخدام الدرج وإعادة ترتيب اللوحات.

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

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

ملاحظة: يؤدي تغيير معرّف UUID الخاص بالمجلد أو حذفه في ملف JSON للبيانات الوصفية إلى إلغاء ربط المجلد أيضًا.

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

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

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

   

   ملاحظة: يمكنك أيضًا سحب المجلد إلى لوحة المصادر.

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

القيود

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

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

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

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

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

انظر أيضًا

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