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

Kayce Basques

Sofia Emelianova

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

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

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

نظرة عامة

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

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

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

القيود

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

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

الميزة ذات الصلة: إجراءات التجاوز المحلية

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

الخطوة 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. في DevTools، انقر على علامة التبويب العناصر.

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، قد تؤدي هذه اللغة إلى إضافة عقد 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.