نظرة عامة على لوحة المصادر

Kayce Basques

Sofia Emelianova

استخدِم لوحة المصادر لعرض موارد موقعك الإلكتروني وتعديلها، مثل أوراق الأنماط وملفات JavaScript والصور.

ميزة "المساعدة المستندة إلى الذكاء الاصطناعي" للمصادر

نظرة عامة

تتيح لك لوحة المصادر إجراء ما يلي:

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

فتح لوحة "المصادر"

لفتح لوحة "المصادر"، اتّبِع الخطوات التالية:

افتح "أدوات مطوّري البرامج".
افتح قائمة الأوامر من خلال الضغط على:
- ‫macOS: Command+Shift+P
- ‫Windows وLinux وChromeOS: Control+Shift+P
ابدأ الكتابة sources، ثم انقر على عرض لوحة "المصادر"، واضغط على Enter.

بدلاً من ذلك، في أعلى يسار الصفحة، انقر على more_vert المزيد من الخيارات > المزيد من الأدوات > المصادر.

عرض الملفات

انقر على علامة التبويب الصفحة لعرض جميع الموارد التي حمّلتها الصفحة.

علامة التبويب "الصفحة"

طريقة تنظيم علامة التبويب الصفحة:

يمثّل المستوى الأعلى، مثل top في لقطة الشاشة أعلاه، إطار HTML. يمكنك العثور على top في كل صفحة تزورها. يمثّل top إطار المستند الرئيسي.
يمثّل المستوى الثاني، مثل developers.google.com في لقطة الشاشة أعلاه، مصدرًا.
تمثّل المستويات الثالث والرابع وما إلى ذلك الدلائل والموارد التي تم تحميلها من هذا المصدر. على سبيل المثال، في لقطة الشاشة أعلاه، المسار الكامل للمرجع devsite-googler-button هو developers.google.com/_static/19aa27122b/css/devsite-googler-button.

انقر على ملف في علامة التبويب الصفحة للاطّلاع على محتواه في علامة التبويب المحرّر. يمكنك عرض أي نوع من الملفات. بالنسبة إلى الصور، ستظهر لك معاينة للصورة.

عرض ملف في علامة التبويب "المحرّر"

تعديل CSS وJavaScript

انقر على علامة التبويب المحرّر لتعديل CSS وJavaScript. تعدّل "أدوات مطوّري البرامج" الصفحة لتنفيذ الرمز الجديد.

يساعدك المحرّر أيضًا في تصحيح الأخطاء. على سبيل المثال، يسطّر على الأخطاء ويعرض تلميحات الأدوات المضمّنة بجانب أخطاء البنية والمشاكل الأخرى، مثل عبارات CSS @import وurl() التي تعذّر تنفيذها، وسمات HTML href التي تتضمّن عناوين URL غير صالحة.

تلميح خطأ في البنية مضمّن

إذا عدّلت background-color أحد العناصر، ستلاحظ أنّ التغيير يسري على الفور.

تعديل CSS في علامة التبويب "المحرّر"

لكي تسري تغييرات JavaScript، اضغط على Command+S (في نظام التشغيل Mac) أو Control+S (في نظام التشغيل Windows أو Linux). لا تعيد "أدوات مطوّري البرامج" تشغيل نص برمجي، لذا فإنّ تغييرات JavaScript الوحيدة التي تدخل حيز التنفيذ هي تلك التي تجريها داخل الدوال. على سبيل المثال، لاحظ أنّ console.log('A') لا يتم تنفيذه، بينما يتم تنفيذ console.log('B').

تعديل JavaScript في علامة التبويب "المحرّر"

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

تمحو "أدوات مطوّري Chrome" تغييرات CSS وJavaScript عند إعادة تحميل الصفحة. يمكنك الاطّلاع على إعداد Workspace لمعرفة كيفية حفظ التغييرات في نظام الملفات.

إنشاء مقتطفات وحفظها وتشغيلها

المقتطفات هي نصوص برمجية يمكنك تشغيلها على أي صفحة. لنفترض أنّك تكتب الرمز التالي بشكل متكرّر في وحدة التحكّم لإدراج مكتبة jQuery في صفحة، وذلك كي تتمكّن من تنفيذ أوامر jQuery من وحدة التحكّم:

let script = document.createElement('script');
script.src = 'https://code.jquery.com/jquery-3.2.1.min.js';
script.crossOrigin = 'anonymous';
script.integrity = 'sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=';
document.head.appendChild(script);

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

مقتطف يُدرج مكتبة jQuery في صفحة.

لتنفيذ مقتطف، اتّبِع الخطوات التالية:

افتح الملف في علامة التبويب المقتطفات، ثم انقر على تشغيل في شريط الإجراءات في أسفل الشاشة.
افتح قائمة الأوامر، واحذف الحرف >، واكتب !، ثم اكتب اسم المقتطف، ثم اضغط على Enter.

يمكنك الاطّلاع على تشغيل مقتطفات من الرمز من أي صفحة لمعرفة المزيد.

تصحيح أخطاء JavaScript

بدلاً من استخدام console.log() لتحديد المشاكل في JavaScript، ننصحك باستخدام أدوات تصحيح الأخطاء في "أدوات مطوّري البرامج في Chrome". الفكرة العامة هي ضبط نقطة توقّف، وهي موضع توقّف مقصود في الرمز، ثم تتبُّع تنفيذ الرمز سطرًا واحدًا في كل مرة.

الإيقاف مؤقتًا عند نقطة توقّف

أثناء تتبُّع الرمز، يمكنك عرض قيم جميع السمات والمتغيّرات المحدّدة حاليًا وتغييرها، وتشغيل JavaScript في وحدة التحكّم وغير ذلك.

اطّلِع على بدء تصحيح أخطاء JavaScript للتعرّف على أساسيات تصحيح الأخطاء في "أدوات مطوّري البرامج".

التركيز على الرمز البرمجي فقط

تتيح لك "أدوات مطوّري البرامج في Chrome" التركيز فقط على الرمز الذي تكتبه من خلال فلترة الضوضاء الناتجة عن الأُطر وأدوات الإنشاء التي تستخدمها عند إنشاء تطبيقات الويب.

لتزويدك بتجربة تصحيح الأخطاء الحديثة على الويب، تنفّذ "أدوات مطوّري البرامج" ما يلي:

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

بالإضافة إلى ذلك، إذا كانت الأُطر تتيح ذلك، يعرض تسلسل استدعاء الدوال البرمجية في أداة تصحيح الأخطاء وعمليات تتبُّع تسلسُل استدعاء الدوال البرمجية في وحدة التحكّم السجلّ الكامل للعمليات غير المتزامنة.

لمزيد من المعلومات، يُرجى الاطّلاع على:

إعداد Workspace

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

راجِع مقالة تعديل الملفات باستخدام مساحات العمل للبدء.