يمكنك استخدام لوحة المصادر في "أدوات مطوري البرامج في Chrome" لتنفيذ ما يلي:
- عرض الملفات:
- تعديل CSS وJavaScript:
- إنشاء وحفظ مقتطفات JavaScript، يمكنك تشغيلها على أي صفحة المقتطفات هي تشبه التطبيقات المختصرة.
- تصحيح أخطاء JavaScript:
- يجب إعداد مساحة عمل ليتم حفظ التغييرات التي تجريها في "أدوات مطوري البرامج" في الرمز الموجود في ملفك. .
عرض الملفات
يمكنك استخدام لوحة الصفحة لعرض جميع الموارد التي حمَّلتها الصفحة.
كيفية تنظيم لوحة الصفحة:
- يُمثل المستوى الأعلى، مثل
top
في لقطة الشاشة أعلاه، إطار HTML. ستجدtop
على كل صفحة تزورها. يمثّلtop
إطار المستند الرئيسي. - المستوى الثاني، مثل
developers.google.com
في لقطة الشاشة أعلاه، يمثّل مصدرًا. - يمثل المستوى الثالث والرابع وما إلى ذلك الأدلة والموارد التي تم تحميلها
من هذا المصدر. على سبيل المثال، في لقطة الشاشة أعلاه، يشير المسار الكامل إلى المورد
تم
developers.google.com/_static/19aa27122b/css/devsite-googler-button
ميزةdevsite-googler-button
.
انقر على ملف في لوحة الصفحة لعرض محتواه في لوحة المحرِّر. يمكنك عرض أي نوع من الملف. بالنسبة إلى الصور، يمكنك الاطّلاع على معاينة للصورة.
تعديل CSS وJavaScript
استخدِم لوحة المحرِّر لتعديل CSS وJavaScript. تعمل أدوات مطوّري البرامج على تعديل الصفحة لتشغيل الرمز الجديد.
وتساعدك أيضًا أداة التعديل في تصحيح الأخطاء. على سبيل المثال، يضع التسطير وعرض تلميحات الأخطاء المضمّنة بجانب الأخطاء في البنية والمشاكل الأخرى، مثل عبارتي CSS @import
وurl()
التي تعذّر استخدامها، وسمات HTML href
التي تحتوي على عناوين URL غير صالحة.
إذا عدّلت background-color
لعنصر، سيظهر لك أنّ هذا التغيير ساري المفعول.
فورًا.
لكي تسري تغييرات JavaScript، اضغط على Command+S (نظام التشغيل Mac) أو Control+S (نظام التشغيل Windows وLinux). لا تعيد "أدوات مطوّري البرامج" تشغيل نص برمجي، وبالتالي فإنّ تغييرات JavaScript الوحيدة التي يتم تطبيقها هي تلك التي تجريها داخل الدوال. على سبيل المثال، يمكنك الاطّلاع على طريقة تشغيل console.log('A')
بينما لا يتم تشغيل console.log('B')
.
إذا أعادت "أدوات مطوري البرامج" تشغيل النص البرمجي بالكامل بعد إجراء التغيير، سيتم تسجيل النص "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 في الصفحة.
لتشغيل مقتطف:
- افتح الملف في لوحة المقتطفات، وانقر على تشغيل
في شريط الإجراءات في أسفل الصفحة.
- افتح قائمة الأوامر واحذف الحرف
>
واكتب!
ثم اكتب اسم مقتطف، ثم اضغط على Enter.
يمكنك الاطّلاع على تشغيل مقتطفات الرمز من أي صفحة لمزيد من المعلومات.
تصحيح أخطاء JavaScript
بدلاً من استخدام console.log()
لاستنتاج الأخطاء التي تحدث في JavaScript، ننصحك باستخدام
بدلاً من ذلك، يمكنك استخدام أدوات تصحيح الأخطاء في "أدوات مطوري البرامج في Chrome". الفكرة العامة هي تحديد نقطة توقف، وهي
التوقف عن قصد في التعليمة البرمجية، ثم الانتقال خلال تنفيذ الرمز، سطرًا تلو الآخر
الوقت.
وأثناء تنقلك في التعليمات البرمجية، يمكنك عرض القيم لجميع القيم المحددة حاليًا وتغييرها ومتغيراته، يمكنك تشغيل JavaScript في وحدة التحكم وغير ذلك.
راجِع المقالة بدء استخدام تصحيح أخطاء JavaScript لتعلُّم أساسيات تصحيح الأخطاء في "أدوات مطوري البرامج".
التركيز على الرمز فقط
تتيح لك "أدوات مطوري البرامج في Chrome" التركيز فقط على الرمز البرمجي الذي تؤلفه من خلال فلترة الضجيج الناتج عن أطر العمل وإنشاء أدوات يمكنك الاستفادة منها عند إنشاء تطبيقات الويب.
لتزويدك بالتجربة الحديثة لتصحيح أخطاء الويب، تُجري "أدوات مطوري البرامج" ما يلي:
- يفصل بين الرموز البرمجية المكتوبة والمنشورة. لمساعدتك في العثور على الرمز بشكل أسرع، تفصل لوحة المصادر الرمز الذي تنشئه عن الرمز المجمّع والمحسّن.
- تتجاهل الرمز البرمجي المعروف التابع لجهة خارجية:
- تخفي لوحة المصادر هذه المصادر من العرض التدرّجي للملفات في جزء الصفحة.
- تخفي وحدة التحكّم هذه الإطارات من عمليات تتبُّع تسلسل استدعاء الدوال البرمجية.
- تعمل القائمة فتح ملف على إخفاء هذه الملفات من نتائج البحث.
بالإضافة إلى ذلك، إذا كانت إطارات العمل متوافقة، تعرض حزمة الاتصال في برنامج تصحيح الأخطاء وعمليات تتبُّع تسلسل استدعاء الدوال البرمجية في وحدة التحكّم السجلّ الكامل للعمليات غير المتزامنة.
لمزيد من المعلومات، يُرجى الاطّلاع على:
- تصحيح أخطاء الويب الحديث في "أدوات مطوري البرامج في Chrome"
- دراسة حالة: تحسين ميزة "تصحيح الأخطاء في Angular" باستخدام "أدوات مطوّري البرامج"
إعداد مساحة عمل
عند تعديل ملف في لوحة المصادر تلقائيًا، يتم فقدان هذه التغييرات عند إعادة التحميل. الصفحة. تتيح لك مساحات العمل حفظ التغييرات التي تجريها في "أدوات مطوري البرامج" في ملفك. . تتيح لك هذه الأداة استخدام أدوات مطوّري البرامج كمحرِّر للرموز البرمجية.
يُرجى الاطّلاع على تعديل الملفات باستخدام مساحات العمل للبدء.