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

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

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

نظرة عامة

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

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

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

  1. افتح أدوات مطوري البرامج.
  2. افتح قائمة الأوامر بالضغط على:
    • نظام التشغيل macOS: Command+Shift+P
    • Windows وLinux وChromeOS: Control+Shift+P
  3. ابدأ الكتابة 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. تعدّل أدوات مطوّري البرامج الصفحة لتشغيل الرمز الجديد.

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

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

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

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

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

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

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

تمحو "أدوات مطوري البرامج" تغييرات CSS وJavaScript عند إعادة تحميل الصفحة. اطّلِع على مقالة إعداد مساحة عمل للتعرّف على كيفية حفظ التغييرات في نظام الملفات.

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

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

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

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

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

إعداد مساحة عمل

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

يُرجى الاطّلاع على تعديل الملفات باستخدام مساحات العمل للبدء.