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