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

Kayce Basques

Sofia Emelianova

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

تنبيه: قبل بدء هذا الدليل التوجيهي، عليك معرفة كيفية تنفيذ ما يلي:

• استخدام HTML وCSS وJavaScript لإنشاء صفحة ويب
• استخدام "أدوات مطوري البرامج" لإجراء تغييرات أساسية على CSS
• تشغيل خادم ويب HTTP محلي

نظرة عامة

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

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

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

القيود

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

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

ميزة ذات صلة: عمليات الإلغاء المحلية

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

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

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

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

1. استنسِخ هذا المستودع التجريبي إلى دليل معيّن على جهاز الكمبيوتر. على سبيل المثال، لـ ~/Desktop.

2. ابدأ تشغيل خادم ويب محلي في ~/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.

3. افتح علامة تبويب في Google Chrome وانتقِل إلى نسخة الموقع الإلكتروني التي تستضيفها محليًا. من المفترض أن يكون بإمكانك الوصول إليه عبر عنوان URL مثل localhost:8000. قد يختلف رقم المنفذ الدقيق.

   

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

1. افتح "أدوات مطوري البرامج" في صفحة العرض التوضيحي التي يستضيفها الجهاز.

2. انتقِل إلى المصادر > مساحة العمل واضبط مساحة عمل في المجلد devtools-workspace-demo الذي نسخته. ويمكنك القيام بذلك بعدة طرق:

   • اسحب المجلد وأفلِته في أداة التعديل في المصادر.
   • انقر على رابط اختيار المجلد واختر المجلد.
   • انقر على إضافة مجلد واختَر المجلد.

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

   

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

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

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

   

2. أغلِق محرِّر النصوص.

3. بالعودة إلى "أدوات مطوري البرامج"، انقر على علامة التبويب العناصر.

4. غيِّر قيمة السمة color في العنصر <h1> إلى لونك المفضّل. ولإجراء ذلك، يُرجى اتّباع الخطوات التالية:

   1. انقر على العنصر <h1> في شجرة DOM.
   2. في جزء الأنماط، ابحث عن قاعدة h1 { color: fuchsia } في CSS وغيّر اللون إلى اللون المفضل لديك. في هذا المثال، يتم تعيين اللون على الأخضر.

   

   تعني النقطة الخضراء بجوار styles.css:1 في جزء الأنماط أنه يتم تعيين أي تغيير تجريه إلى /devtools-workspace-demo/styles.css.

5. افتح /devtools-workspace-demo/styles.css في محرِّر نصوص مرة أخرى. تم تغيير السمة color إلى اللون المفضّل لديك.

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

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

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

تحذير: سير العمل الذي توشك على تجربته لا يعمل. أنت تجرب هذه الميزة الآن لكي لا تضيع الوقت لاحقًا في محاولة معرفة سبب عدم نجاحها.

1. افتح علامة التبويب العناصر.

2. انقر مرّتين على المحتوى النصي للعنصر h1 الذي يحمل اسم Workspaces Demo واستبدله بالمحتوى I ❤️ Cake.

   

3. افتح /devtools-workspace-demo/index.html في محرِّر نصوص. التغيير الذي أجريته للتو ليس موجودًا.

4. إعادة تحميل الصفحة تعود الصفحة إلى عنوانها الأصلي.

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

ملاحظة: يوضِّح هذا القسم سبب تعذُّر سير العمل من جرِّب تغيير HTML من لوحة "العناصر". يمكنك تخطّي هذا القسم إذا كنت لا تريد معرفة السبب.

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

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

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

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

1. انتقِل إلى المصادر > الصفحة.
2. انقر على (الفهرس). يتم فتح HTML للصفحة.
3. يمكنك استبدال <h1>Workspaces Demo</h1> بـ <h1>I ❤️ Cake</h1>.
4. اضغط على Command+S (في نظام التشغيل Mac) أو Control+S (في أنظمة التشغيل Windows وLinux وChromeOS) لحفظ التغيير.

5. إعادة تحميل الصفحة لا يزال العنصر <h1> يعرض النص الجديد.

   

6. فتح "/devtools-workspace-demo/index.html" يحتوي العنصر <h1> على النص الجديد.

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

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

1. افتح علامة التبويب العناصر.
2. اضغط على Command+Shift+P (في نظام التشغيل Mac) أو Control+Shift+P (في أنظمة التشغيل Windows وLinux وChromeOS). تفتح قائمة الأوامر.

3. اكتب QS، ثمّ اختَر إظهار المصدر السريع. في أسفل نافذة "أدوات مطوري البرامج"، توجد الآن علامة التبويب مصدر سريع.

   

   تعرض علامة التبويب محتوى index.html، وهو آخر ملف عدّلته في لوحة المصادر. تقدّم لك علامة التبويب المصدر السريع المحرِّر من لوحة المصادر، وبالتالي يمكنك تعديل الملفات مع فتح لوحات أخرى.

4. اضغط على Command+P (نظام التشغيل Mac) أو Control+P (في أنظمة التشغيل Windows وLinux وChromeOS) لفتح مربّع الحوار فتح ملف.

5. اكتب script، ثم اختَر devtools-workspace-demo/script.js.

   

6. لاحِظ رابط Edit and save files in a workspace في العرض التوضيحي. تصميمه بانتظام.

7. أضِف الرمز التالي إلى أسفل script.js في علامة التبويب المصدر السريع.

   document.querySelector('a').style = 'font-style:italic';
   

8. اضغط على Command+S (في نظام التشغيل Mac) أو Control+S (في أنظمة التشغيل Windows وLinux وChromeOS) لحفظ التغيير.

9. إعادة تحميل الصفحة أصبح الرابط على الصفحة الآن مائلاً.

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

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

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

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