يوفر هذا البرنامج التعليمي فرصة للتدرب من خلال إعداد مساحة عمل بحيث يمكنك استخدامها في مشروعاتك الخاصة. من خلال Workspace، يمكنك حفظ التغييرات التي تجريها ضمن "أدوات مطوري البرامج" إلى رمز المصدر المحفوظ على الكمبيوتر.
نظرة عامة
من خلال Workspace، يمكنك حفظ أي تغيير تجريه في "أدوات مطوري البرامج" إلى نسخة محلية من الملف نفسه على جهاز الكمبيوتر. على سبيل المثال:
- استخدام رمز المصدر لموقعك الإلكتروني على الكمبيوتر المكتبي
- تشغيل خادم ويب محلي من دليل رمز المصدر، بحيث يمكن الوصول إلى الموقع الإلكتروني
على
localhost:8080
. - لديك
localhost:8080
مفتوحًا في Google Chrome ويتم حاليًا استخدام "أدوات مطوري البرامج" لتغيير خدمة مقارنة الأسعار (CSS) الخاصة بالموقع الإلكتروني.
عند تفعيل Workspace، يتم حفظ تغييرات CSS التي تجريها ضمن "أدوات مطوّري البرامج" في رمز المصدر على الكمبيوتر المكتبي.
القيود
إذا كنت تستخدم إطار عمل حديثًا، فمن المحتمل أن يحوّل رمز المصدر من تنسيق يسهل عليك محافظته على تنسيق محسّن للتشغيل في أسرع وقت ممكن. في Google Workspace عادةً ما تتمكّن من ربط الرمز المحسَّن برمز المصدر الأصلي بمساعدة خرائط المصدر.
يعمل منتدى "أدوات مطوري البرامج" على دعم الإمكانات التي توفّرها خرائط المصدر على مجموعة متنوعة من أطر العمل والأدوات. إذا واجهت مشاكل أثناء استخدام مساحة عمل ضمن إطار العمل الذي تختاره أو إذا كنت تريد استخدامه بعد إجراء عملية ضبط مخصّصة، يمكنك بدء سلسلة محادثات في القائمة البريدية أو طرح سؤال على موقع 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
. قد يختلف رقم المنفذ الدقيق.
إعداد "أدوات مطوري البرامج"
افتح "أدوات مطوري البرامج" في صفحة العرض التوضيحي التي يستضيفها الجهاز.
انتقِل إلى المصادر > مساحة العمل واضبط مساحة عمل في المجلد
devtools-workspace-demo
الذي نسخته. ويمكنك القيام بذلك بعدة طرق:- اسحب المجلد وأفلِته في أداة التعديل في المصادر.
- انقر على رابط اختيار المجلد واختر المجلد.
- انقر على إضافة مجلد واختَر المجلد.
في الطلب الذي يظهر في أعلى الصفحة، انقر على سماح لمنح "أدوات مطوّري البرامج" الإذن بالقراءة والكتابة في الدليل.
في علامة التبويب مساحة العمل، تظهر الآن نقطة خضراء بجانب index.html
وscript.js
وstyles.css
. تشير هذه النقاط الخضراء إلى أنّ "أدوات مطوري البرامج" قد أنشأت عملية ربط بين موارد الشبكة في الصفحة والملفات في devtools-workspace-demo
.
الخطوة 2: حفظ تغيير CSS على القرص
افتح
/devtools-workspace-demo/styles.css
في محرِّر نصوص. لاحِظ كيفية ضبط السمةcolor
فيh1
علىfuchsia
.أغلِق محرِّر النصوص.
بالعودة إلى "أدوات مطوري البرامج"، انقر على علامة التبويب العناصر.
غيِّر قيمة السمة
color
في العنصر<h1>
إلى لونك المفضّل. ولإجراء ذلك، يُرجى اتّباع الخطوات التالية:- انقر على العنصر
<h1>
في شجرة DOM. - في جزء الأنماط، ابحث عن قاعدة
h1 { color: fuchsia }
في CSS وغيّر اللون إلى اللون المفضل لديك. في هذا المثال، يتم تعيين اللون على الأخضر.
تعني النقطة الخضراء بجوار
styles.css:1
في جزء الأنماط أنه يتم تعيين أي تغيير تجريه إلى/devtools-workspace-demo/styles.css
.- انقر على العنصر
افتح
/devtools-workspace-demo/styles.css
في محرِّر نصوص مرة أخرى. تم تغيير السمةcolor
إلى اللون المفضّل لديك.إعادة تحميل الصفحة لا يزال لون العنصر
<h1>
مضبوطًا على لونك المفضّل. يعمل ذلك لأنه عندما أجريت التغيير وحفظت "أدوات مطوري البرامج" التغيير على القرص. وبعد ذلك، عند إعادة تحميل الصفحة، عرض الخادم المحلي النسخة المعدلة من الملف من القرص.
الخطوة 3: حفظ تغيير HTML على القرص
جرِّب تغيير HTML من لوحة "العناصر"
- افتح علامة التبويب العناصر.
انقر مرّتين على المحتوى النصي للعنصر
h1
الذي يحمل اسمWorkspaces Demo
واستبدله بالمحتوىI ❤️ Cake
.افتح
/devtools-workspace-demo/index.html
في محرِّر نصوص. التغيير الذي أجريته للتو ليس موجودًا.إعادة تحميل الصفحة تعود الصفحة إلى عنوانها الأصلي.
اختياري: سبب لا يعمل
- إنّ شجرة العُقد التي تظهر لك على لوحة العناصر تمثّل نموذج كائن المستند (DOM) للصفحة.
- لعرض صفحة، يجلب المتصفّح رمز HTML عبر الشبكة ويحلّل ترميز HTML، ثم يحوّله إلى شجرة من عُقد DOM.
- إذا كانت الصفحة تحتوي على أي JavaScript، قد تضيف هذه JavaScript عُقد DOM أو تحذفها أو تغيِّرها. يمكن لـ CSS تغيير نموذج العناصر في المستند (DOM) أيضًا من خلال السمة
content
. - يستخدم المتصفح كائن DOM لتحديد المحتوى الذي يجب أن يعرضه لمستخدمي المتصفح.
- وبالتالي، قد تكون الحالة النهائية للصفحة التي يراها المستخدمون مختلفة جدًا عن رمز HTML الذي يجلبه المتصفّح.
- ويصعّب ذلك على "أدوات مطوري البرامج" تحديد المكان الذي يجب فيه حفظ التغيير الذي تم إجراؤه في لوحة العناصر، لأنّ نموذج العناصر في المستند (DOM) يتأثر بترميز HTML وJavaScript وCSS.
باختصار، شجرة DOM !==
.
تغيير 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. ولكن عليك أحيانًا الوصول إلى لوحات أخرى، مثل لوحة العناصر أو لوحة وحدة التحكم، أثناء إجراء تغييرات على موقعك. تتوفّر طريقة لفتح لوحة المصادر بجانب اللوحات الأخرى.
- افتح علامة التبويب العناصر.
- اضغط على Command+Shift+P (في نظام التشغيل Mac) أو Control+Shift+P (في أنظمة التشغيل Windows وLinux وChromeOS). تفتح قائمة الأوامر.
اكتب
QS
، ثمّ اختَر إظهار المصدر السريع. في أسفل نافذة "أدوات مطوري البرامج"، توجد الآن علامة التبويب مصدر سريع.تعرض علامة التبويب محتوى
index.html
، وهو آخر ملف عدّلته في لوحة المصادر. تقدّم لك علامة التبويب المصدر السريع المحرِّر من لوحة المصادر، وبالتالي يمكنك تعديل الملفات مع فتح لوحات أخرى.اضغط على 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.