يمكنك استخدام لوحة مصادر "أدوات مطوري البرامج في Chrome" لإجراء ما يلي:
- عرض الملفات
- تعديل CSS وJavaScript
- أنشئ مقتطفات من JavaScript واحفظها، ويمكنك تشغيلها على أي صفحة. تشبه المقتطفات التطبيقات المختصرة.
- تصحيح أخطاء JavaScript:
- إعداد Workspace، بحيث يتم حفظ التغييرات التي تجريها في "أدوات مطوري البرامج" في الرمز على نظام الملفات
عرض الملفات
استخدِم لوحة الصفحة للاطّلاع على جميع الموارد التي حمَّلتها الصفحة.
كيفية تنظيم لوحة الصفحة:
- يمثل المستوى الأعلى، مثل
top
على لقطة الشاشة أعلاه، إطار HTML. يمكنك العثور علىtop
في كل صفحة تزورها. يمثلtop
إطار المستند الرئيسي. - ويمثِّل المستوى الثاني، مثل
developers.google.com
في لقطة الشاشة أعلاه، مصدرًا. - المستوى الثالث والرابع وما إلى ذلك، يمثل الأدلة والموارد التي تم تحميلها من ذلك المصدر. على سبيل المثال، في لقطة الشاشة أعلاه، المسار الكامل للمصدر
devsite-googler-button
هوdevelopers.google.com/_static/19aa27122b/css/devsite-googler-button
.
انقر على ملف في لوحة الصفحة لعرض محتواه في لوحة المحرِّر. يمكنك عرض أي نوع من الملفات. بالنسبة إلى الصور، ستظهر لك معاينة للصورة.
تعديل CSS وJavaScript
استخدِم جزء Editor لتعديل 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"
- دراسة حالة: تصحيح الأخطاء بطريقة أفضل من خلال أدوات مطوّري البرامج
إعداد مساحة عمل
بشكل تلقائي، عند تعديل ملف في لوحة المصادر، يتم فقدان هذه التغييرات عند إعادة تحميل الصفحة. تتيح لك مساحات العمل حفظ التغييرات التي تجريها في "أدوات مطوري البرامج" على نظام الملفات. ويتيح لك ذلك بشكل أساسي استخدام "أدوات مطوري البرامج" كأداة لتعديل الرموز.
يُرجى الاطّلاع على مقالة تعديل الملفات باستخدام مساحات العمل للبدء.