بدأت الفترة الماضية بتحضير سلسلة تعليمية لأدوات مطوري الويب على متصفح كروم على يوتيوب، أركز في هذه السلسلة على بعض المميزات التي يوفرها متصفح كروم للمطورين من خلال أدوات المطورين الخاص به وكيف يمكن للمطورين استغلال هذه الأدوات في “سرعة” تطوير تطبيقاته الخاصة على الويب. أي تحديث أو فيديوهات قادمة سأضعها في هذه التدوينة كمرجع للمطورين.
محتوى التدوينة:
– كيفية الوصول لأدوات المطورين على كروم.
– الفيديو الأول: ما هي القصاصات البرمجية وكيف تسهّل عملك كمبرمج ومصمم ويب؟
– الفيديو الثاني: كيف تقوم بحفظ تعديلاتك على صفحة ويب تلقائياً من كروم إلى ملفات المشروع؟
– الفيديو الثالث: كيف تعالج وتتبع الأخطاء البرمجية في موقعك أو تطبيق الويب؟
كيفية الوصول لأدوات المطورين على كروم:
– بالضغط على زر القائمة ومن ثم الذهاب الى أدوات أخرى أو More Tools ومن ثم الذهاب الى أدوات المطورين أو Developer Tools.
– أو بالضغط على زر F12
– أو بالضغط على Ctrl/Command + Shift + I
– أو بالزر الأيمن على أي صفحة ويب ومن ثم Inspect Element.
يمكنك زيارة هذه الصفحة من جوجل للمزيد من المعلومات حول أدوات مطوري الويب على كروم.
الفيديو الأول: ما هي القصاصات البرمجية وكيف تسهّل عملك كمبرمج ومصمم ويب؟
بدأت السلسلة بإحدى المميزات المتوفرة على متصفحي كروم وفايرفوكس وهي القصاصات البرمجية أو Snippets، يمكنك من خلال هذا الميزة تخزين أجزاء من أكواد برمجية أو تنفيذ هذه الأجزاء من خلال الضغط بالزر الأيمن على القصاصة ومن ثم تشغيل أو Run. سيتم تنفيذ القصاصة الحالية على الصفحة المفتوحة حالياً.
وهذا مقطع فيديو آخر أبيّن فيه كيف يمكنني أن أحصل على بيانات صورة Data URL من خلال القصاصة اللازمة لذلك:
الفيديو الثاني: كيف تقوم بحفظ تعديلاتك على صفحة ويب تلقائياً من كروم إلى ملفات المشروع؟
سيناريو مؤلم أن أغلب وقت مصممي صفحات الويب يقومون فيه بالتنقل ما بين المحررة الخارجية لكتابة التعديلات على المظهر الى المتصفح لرؤية هذه التعديلات عليه، أو العكس ما بين المتصفح الى المحررة الخارجية.
نحن لا نريد هذا السيناريو ونسعى دوماً لتوفير الوقت، هناك ميزة متوفرة في متصفح كروم بعنوان Workspace، يوجد حقل عمل ومحررة داخلية داخل متصفح كروم وسنقوم بربط ملفات المشروع الخاص بنا بالمتصفح، وسيقوم المتصفح بحفظ التعديلات دون تنقل أو تدخل منك! هذا السيناريو الجديد:
كيف ذلك؟ سيجيب مقطع الفيديو عن هذا بالتفصيل:
الفيديو الثالث: كيف تعالج وتتبع الأخطاء البرمجية في موقعك أو تطبيق الويب؟
بلا شك أن الأخطاء تحدث، والمشاكل تتكاثر باستمرار مع تطوير تطبيقك أو البيئة المشغّلة للتطبيق، نحتاج لتجربة التطبيق قبل إطلاقه وصنع سيناريوهات مخالفة لنرى كيف يمكن للتطبيق التصرف في هذه الحالة! الشاشة الخاصة بتتبع الأخطاء على كروم أو Debugging Mode ملخصة في هذه الصورة:
الاستخدام وكيفية التتبع، أشرح ذلك بالتفصيل عبر هذا الفيديو:
CC BY-NC-SA 4.0
التعليقات
مقال رائع ومقيد جدا للمطورين
أهلاً وسهلاً بحضرتكم 🙂
شكرا ليكم