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

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

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

عرض الملفات

يمكنك استخدام لوحة الصفحة لعرض جميع الموارد التي حمَّلتها الصفحة.

جزء الصفحة.

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

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

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

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

تعديل 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" في وحدة التحكّم:

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

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

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

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

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

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

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