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