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

Kayce Basques

Sofia Emelianova

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

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

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

نظرة عامة

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

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

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

القيود

إذا كنت تستخدم إطار عمل حديثًا، من المحتمل أن يحوّل رمز المصدر من تنسيق يسهل عليك الاحتفاظ به إلى تنسيق محسَّن للتشغيل في أسرع وقت ممكن. يمكن لخدمة 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. في الطلب الذي يظهر في أعلى الصفحة، انقر على السماح لمنح "أدوات مطوّري البرامج في Chrome" الإذن بالقراءة والكتابة في الدليل.

   

في علامة التبويب مساحة العمل، تظهر الآن نقطة خضراء بجانب 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. في لوحة الأنماط، ابحث عن قاعدة CSS‏ h1 { color: fuchsia } وغيِّر اللون إلى اللون المفضّل لديك. في هذا المثال، تم ضبط اللون على الأخضر.

   

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

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

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

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

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

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

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

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

   

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

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

اختياري: سبب عدم نجاح الإجراء

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

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

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

تغيير 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.