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

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

يمكنك استخدام لوحة مصادر "أدوات مطوري البرامج في Chrome" لإجراء ما يلي:

عرض الملفات

استخدِم لوحة الصفحة للاطّلاع على جميع الموارد التي حمَّلتها الصفحة.

جزء الصفحة.

كيفية تنظيم لوحة الصفحة:

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

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

عرض ملف في جزء "Editor" (المحرر).

تعديل CSS وJavaScript

استخدِم جزء Editor لتعديل CSS وJavaScript. تعدِّل "أدوات مطوري البرامج" الصفحة لتنفيذ الرمز الجديد.

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

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

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

تعديل CSS في جزء "Editor" (المحرر).

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

تعديل JavaScript في جزء "Editor" (المحرر).

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

تمحو "أدوات مطوري البرامج" التغييرات التي أجريتها على 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 في إحدى الصفحات.

لتشغيل مقتطف:

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

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

تصحيح أخطاء JavaScript

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

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

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

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

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

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

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

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

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

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

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

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