تمت ترجمة هذه الصفحة بواسطة Cloud Translation API‏.

تعديل الملفات وحفظها في مساحة عمل

Kayce Basques

Sofia Emelianova

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

نظرة عامة

تتيح لك حزمة Workspace حفظ أي تغيير أجريته في "أدوات مطوري البرامج" على نسخة محلية من الملف نفسه على جهاز الكمبيوتر. على سبيل المثال، لنفترض:

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

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

القيود

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

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

ميزة ذات صلة: عمليات تجاوز محلية

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

الخطوة 1: الإعداد

أكمل هذا البرنامج التعليمي للحصول على خبرة عملية في مساحة عمل.

إعداد العرض التوضيحي

انسخ المستودع التجريبي هذا إلى دليل ما على الكمبيوتر. على سبيل المثال، إلى ~/Desktop.
بدء خادم ويب محلي في ~/Desktop/devtools-workspace-demo. في ما يلي بعض نماذج الرموز للبدء SimpleHTTPServer، ولكن يمكنك استخدام أي خادم تفضّله.
```
cd ~/Desktop/devtools-workspace-demo
# If your Python version is 3.X
# On Windows, try "python -m http.server" or "py -3 -m http.server"
python3 -m http.server
# If your Python version is 2.X
python -m SimpleHTTPServer
```
بالنسبة إلى باقي هذا البرنامج التعليمي، ستتم الإشارة إلى هذا الدليل باسم /devtools-workspace-demo.
افتح علامة تبويب في Google Chrome وانتقل إلى إصدار الموقع الإلكتروني المستضاف محليًا. ينبغي أن تكون قادرًا على الوصول إليه عبر عنوان URL مثل localhost:8000. قد يكون رقم المنفذ مختلفًا.

بدء إعداد أدوات مطوّري البرامج

افتح أدوات مطوري البرامج في صفحة العرض التوضيحي التي تتم استضافتها محليًا.
انتقل إلى المصادر > Workspace واضبط مساحة عمل في المجلد devtools-workspace-demo الذي استنسخته. ويمكنك إجراء ذلك بعدة طرق:
- اسحب المجلد وأفلِته في المحرِّر في المصادر.
- انقر على الرابط اختيار المجلد واختَر المجلد.
- انقر على إضافة مجلد واختَر المجلد.
في الطلب أعلى الصفحة، انقر على السماح لمنح "أدوات مطوّري البرامج" الإذن بقراءة الدليل والكتابة إليه.

في علامة التبويب مساحة العمل، تظهر الآن نقطة خضراء بجانب index.html وscript.js وstyles.css. تشير هذه النقاط الخضراء إلى أنّ "أدوات مطوري البرامج" قد وضعت عملية ربط بين موارد الشبكة في الصفحة والملفات في devtools-workspace-demo.

تعرض علامة التبويب "مساحة العمل" الآن عملية ربط بين الملفات على الجهاز وملفات الشبكة.

الخطوة 2: حفظ تغيير CSS على القرص

افتح "/devtools-workspace-demo/styles.css" في محرِّر نصوص. لاحِظ كيف أن السمة color في h1 العناصر على fuchsia.

$عرض style.css في محرر نصوص.$
أغلِق محرِّر النصوص.
في "أدوات مطوري البرامج"، انقر على علامة التبويب Elements.
غيِّر قيمة السمة color للعنصر <h1> إلى لونك المفضّل. ولإجراء ذلك، يُرجى اتّباع الخطوات التالية:
1. انقر على العنصر <h1> في شجرة نموذج العناصر في المستند (DOM).
2. في لوحة الأنماط، ابحث عن قاعدة h1 { color: fuchsia } في CSS وغيِّر اللون إلى اللون المفضّل لديك. في هذا المثال، يتم تعيين اللون على الأخضر.
النقطة الخضراء بجانب styles.css:1 في لوحة الأنماط تعني أنه سيتم ربط أي تغيير تجريه بـ /devtools-workspace-demo/styles.css.
افتح "/devtools-workspace-demo/styles.css" في محرِّر نصوص مرة أخرى. تم ضبط السمة color الآن على اللون المفضل.
يُرجى إعادة تحميل الصفحة. لا يزال لون العنصر <h1> مضبوطًا على لونك المفضّل. يعمل هذا الإجراء لأنه عندما أجريت التغيير وحفظت أدوات مطوري البرامج التغيير على القرص. وبعد ذلك، عند إعادة تحميل الصفحة، فقد عرض الخادم المحلي النسخة المعدلة من الملف من القرص.

الخطوة 3: حفظ تغيير HTML على القرص

جرّب تغيير HTML من لوحة "العناصر"

افتح علامة التبويب Elements.
انقر مرّتين على المحتوى النصي للعنصر h1 بعنوان Workspaces Demo، واستبدِله. مع I ❤️ Cake.
افتح "/devtools-workspace-demo/index.html" في محرِّر نصوص. التغيير الذي أجريته للتو غير موجود.
يُرجى إعادة تحميل الصفحة. تعود الصفحة إلى عنوانها الأصلي.

اختياري: سبب عدم العمل

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

باختصار، شجرة DOM !== HTML.

تغيير HTML من لوحة المصادر

إذا كنت تريد حفظ تغيير في رمز HTML للصفحة، عليك إجراء ذلك في لوحة المصادر.

انتقل إلى المصادر > صفحة.
انقر على (فهرس). يتم فتح رمز HTML للصفحة.
استبدِل <h1>Workspaces Demo</h1> بـ <h1>I ❤️ Cake</h1>.
اضغط على Command+S (نظام التشغيل Mac) أو Control+S (لأنظمة التشغيل Windows وLinux وChromeOS) لحفظ التغيير.
يُرجى إعادة تحميل الصفحة. لا يزال العنصر <h1> يعرض النص الجديد.
فتح "/devtools-workspace-demo/index.html" يحتوي العنصر <h1> على النص الجديد.

الخطوة 4: حفظ تغيير JavaScript على القرص

يمكن إجراء تغييرات على JavaScript من خلال لوحة المصادر أيضًا. لكن في بعض الأحيان تحتاج إلى الوصول إلى اللوحات الأخرى، مثل لوحة Elements أو لوحة Elements، مع إجراء التغييرات إلى موقعك الإلكتروني تتوفّر طريقة لفتح لوحة المصادر بجانب اللوحات الأخرى.

افتح علامة التبويب Elements.
اضغط على Command+Shift+P (نظام التشغيل Mac) أو Control+Shift+P (أنظمة التشغيل Windows وLinux وChromeOS). قائمة الأوامر يفتح.
اكتب QS، ثم اختَر عرض المصدر السريع. في الجزء السفلي من نافذة "أدوات مطوري البرامج"، علامة تبويب المصدر السريع

تعرض علامة التبويب محتوى index.html، وهو المحتوى الأخير. ملف عدّلته في لوحة المصادر. تمنحك علامة التبويب Quick Source (المصدر السريع) المحرِّر من لوحة المصادر، بحيث يمكنك تعديل الملفات أثناء فتح اللوحات الأخرى.
اضغط على Command+P (نظام التشغيل Mac) أو Control+P (أنظمة التشغيل Windows وLinux وChromeOS) لفتح مربّع الحوار فتح ملف.
اكتب script، ثم اختَر devtools-workspace-demo/script.js.
لاحِظ رابط Edit and save files in a workspace في العرض التوضيحي. يجب تصميمه بانتظام.
أضِف الرمز التالي إلى أسفل script.js في علامة التبويب المصدر السريع.
```
document.querySelector('a').style = 'font-style:italic';
```
اضغط على Command+S (نظام التشغيل Mac) أو Control+S (لأنظمة التشغيل Windows وLinux وChromeOS) لحفظ التغيير.
يُرجى إعادة تحميل الصفحة. أصبح الرابط في الصفحة مائلاً الآن.

أصبح الرابط في الصفحة مائلاً الآن.

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

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

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