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

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

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

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

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

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

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

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