لقد انتهى مؤتمر Google I/O لعام 2016. كان لأدوات المطوّرين حضورًا قويًا في مؤتمر I/O، بما في ذلك محادثة بين "بول باكاوس" و"بول إيريش" و"سيث تومبسون" لتحديد مستقبل أدوات المطوّرين. يمكنك مشاهدة الفيديو أدناه أو الاطّلاع على المزيد من المعلومات حول مسار "أدوات المطوّرين" في عام 2016 والسنوات اللاحقة.
التأليف
تهدف أدوات المطوّرين إلى تسهيل كل مرحلة من مراحل دورة حياة تطوير الويب. من المرجّح أنّك تعرف أنّ "أدوات مطوّري البرامج" يمكن أن تساعدك في تصحيح أخطاء موقع إلكتروني أو إعداد ملف شخصي له، ولكن قد لا تعرف كيفية استخدامها لمساعدتك في إنشاء موقع إلكتروني. نقصد بـ "الإنشاء" عملية إنشاء موقع إلكتروني. أحد أهدافنا في المستقبل القريب هو تسهيل تكرار موقعك الإلكتروني وتجربته ومحاكاته على أجهزة متعددة.
وضع الجهاز
يواصل فريق "أدوات مطوّري البرامج" تحسين تجربة "وضع الجهاز" التي حصلت على أول ترقية رئيسية لها في الإصدار 49 من Chrome. يمكنك الاطّلاع على المشاركة التي نشرناها في آذار (مارس) (وضع جهاز جديد في عالم يعتمد أولاً على الأجهزة الجوّالة) للحصول على نظرة عامة على التعديلات. والهدف العام هو توفير سير عمل سلس لعرض موقعك الإلكتروني ومحاكاته على جميع أشكال الأجهزة.
في ما يلي ملخّص سريع لبعض تعديلات "وضع الجهاز" التي تم طرحها في الإصدار Canary منذ نشر المقالة في آذار (مارس).
عند عرض صفحة على أنّها جهاز معيّن، يمكنك الاستفادة من التجربة بشكل أكبر من خلال عرض أجهزة الجهاز حول صفحتك.
تتيح لك قائمة "اتجاه الجهاز" عرض صفحتك عندما تكون عناصر واجهة مستخدم النظام المختلفة، مثل شريط التنقّل ولوحة المفاتيح، نشطة.
تم أيضًا تحسين قصة سطح المكتب. بفضل ميزة التكبير/التصغير في "وضع الجهاز"، يمكنك محاكاة شاشات الكمبيوتر المكتبي الأكبر حجمًا من الشاشة التي تعمل عليها، مثل شاشة بدقة 4K (3840 بكسل x 2160 بكسل).
يمكنك خفض سرعة الشبكة مباشرةً من واجهة مستخدم "وضع الجهاز"، بدلاً من الانتقال إلى لوحة "الشبكة".
اختلافات المصدر
عند إجراء تكرار على تصميم موقع إلكتروني، من السهل عدم تتبُّع التغييرات التي أجريتها. لحلّ هذه المشكلة، ستستخدم "أدوات مطوّري البرامج" إشارات مرئية في مساحة أرقام الأسطر في لوحة "المصادر" لمساعدتك في تتبُّع التغييرات التي أجريتها. تتم الإشارة إلى الأسطر المحذوفة بخط أحمر، ويتم تمييز الأسطر المعدَّلة باللون البنفسجي، ويتم تمييز الأسطر الجديدة باللون الأخضر.
ستتمكّن أيضًا من تتبُّع التغييرات في علامة التبويب الجديدة "المصدر السريع":
للمرة الأولى، تتيح لك علامة التبويب "المصدر السريع" التركيز على رمز مصدر HTML أو JavaScript في الوقت نفسه مع قواعد CSS. بالإضافة إلى ذلك، عند النقر على سمة CSS في لوحة "الأنماط"، تنتقل علامة التبويب "المصدر السريع" تلقائيًا إلى التعريف في المصدر وتُبرزه.
يمكنك تفعيل تجربة مقارنة المصادر في Chrome Canary لتجربتها اليوم.
التعديل المباشر على Sass
إليك نظرة سريعة على بعض التحسينات الرئيسية القادمة على سير عمل تعديل Sass. لا تزال هذه الميزات في مرحلة تجريبية. سنتواصل معك في منشور لاحق عندما تصبح الميزات جاهزة للتجربة.
بشكل أساسي، ستتيح لك "أدوات المطوّرين" عرض متغيّرات Sass وتعديلها على النحو الذي طالما أردت. انقر على قيمة تم تجميعها من متغيّر Sass، وستنتقل علامة التبويب "المصادر السريعة" الجديدة إلى تعريف المتغيّر.
عند تعديل قيمة تم تجميعها من متغيّر Sass، يؤدي التعديل إلى تعديل متغيّر Sass، وليس السمة الفردية التي اخترتها فقط.
تطبيقات الويب التقدّمية
اطّلِع على قائمة محادثات الويب وChrome في مؤتمر Google I/O لعام 2016 وستلاحظ موضوعًا كبيرًا يزداد رواجًا في عالم تطوير الويب: تطبيقات الويب التقدّمية.
مع ظهور نموذج تطبيقات الويب التقدّمية، يتم تحديث أدوات المطوّرين بسرعة لتوفير الأدوات التي يحتاجها المطوّرون لإنشاء تطبيقات ويب تقدّمية رائعة. لقد تبيّن لنا أنّ إنشاء هذه التطبيقات الحديثة وتصحيح أخطاءها غالبًا ما يتطلّب متطلبات فريدة، لذلك خصصت "أدوات المطوّر" لوحة كاملة لتطوير تطبيقات الويب التقدّمية. افتح Chrome Canary وستلاحظ أنّه تم استبدال لوحة "الموارد" بلوحة "التطبيق". لا تزال جميع الوظائف السابقة من لوحة "المراجع" متوفّرة. هناك بضع صفحات جديدة مصمّمة خصيصًا لتطوير تطبيقات الويب التقدّمية:
تمنحك لوحة البيان تمثيلاً مرئيًا لملف بيان التطبيق. من هنا، يمكنك بدء سير العمل "الإضافة إلى الشاشة الرئيسية" يدويًا.
تتيح لك لوحة "مشغّلو الخدمات" فحص مشغّل الخدمات المسجَّل للصفحة الحالية والتفاعل معه.
وتتيح لك لوحة "محو مساحة التخزين" محو جميع أنواع البيانات حتى تتمكّن من عرض صفحة فارغة.
JavaScript
إنّ عبور الحدود بين الواجهة الأمامية والخلفية هو جزء صعب من تطوير الويب الكامل. إذا اكتشفت أنّ الخلفية تعرض رمز الحالة 500 أثناء تصحيح أخطاء تطبيق ويب، يعني ذلك أنّك بلغت الحد الأقصى لمدى فائدة "أدوات المطوّر"، ما يتطلّب منك تغيير السياقات وتشغيل بيئة تطوير الخلفية لتصحيح أخطاء المشكلة.
ومع ذلك، مع واجهات الخلفية المكتوبة بلغة Node.js، بدأت الحدود بين الواجهة الأمامية والخلفية تصبح غير واضحة. بما أنّ Node.js يعمل على محرك JavaScript V8 (المحرك نفسه الذي يشغّل Google Chrome)، أردنا أن نوفّر إمكانية تصحيح أخطاء Node.js من أدوات المطوّرين. بفضل V8 وDevTools وGoogle Cloud Platform لفِرق Node.js، يمكنك الآن استخدام جميع ميزات تصحيح الأخطاء القوية في DevTools لفحص تطبيق Node.js. وقد تم توفير هذه الوظيفة في الإصدارات اليومية من Node.js، على الرغم من أنّه لا يزال يتم تحسين دمج DevTools قبل تضمينه في إصدار رئيسي. سيصبح تصحيح أخطاء تطبيق Node.js من "أدوات مطوّري البرامج" في يوم من الأيام بسيطًا مثل اجتياز node --inspect app.js والاتصال من "أدوات مطوّري البرامج" في أي نافذة Chrome.
على الرغم من أنّ الأدوات الحالية، مثل Node Inspector، توفّر تجارب تصحيح أخطاء مستندة إلى واجهة مستخدم رسومية، سيظلّ دمج أدوات تطوير Node.js الجديد محدّثًا بأحدث ميزات تصحيح الأخطاء في أدوات المطوّرين، مثل تصحيح أخطاء تسلسل استدعاء الدوال غير المتزامنة ووضع الحظر ودعم ES6.