ظهرت هذه الميزات الرائعة في وحدة تحكم مطور البرامج لأحدث إصدار من Chrome وأردت ترجمة مشاركة حول هذا الموضوع من مدونة المطورين الرسمية.
لطالما أبهرتني وحدة تحكم مطوري Chrome بعمق تطورها. ذات مرة كنت أسحب نفسي بعيدًا عن Firebug ، والآن جاءت الأيام التي لم أتمكن فيها من رؤية حياتي دون التطوير على الكروم. إنه أمر جيد عندما يسعى الناس إلى تجاوز بعضهم البعض في العمل.
- تنفيذ متوقع . بمجرد كتابة تعبير ، ستعرض وحدة التحكم نتائجه.
- نصائح الحجة . أثناء كتابة اسم الوظيفة ، ستعرض لك وحدة التحكم الوسيطات المتوقعة لها.
- إتمام الوظيفة . بعد طلب استدعاء دالة ، على سبيل المثال ،
document.querySelector('p') ، ستعرض لك وحدة التحكم الوظائف والخصائص التي تدعمها قيمة الإرجاع. - الكلمات الأساسية من ES2017 إلى وحدة التحكم . الكلمات الرئيسية مثل
await متاحة الآن في وحدة التحكم في واجهة الإكمال التلقائي. - المنارة 3.0 في لوحة معلومات المراجعة . تدقيق أسرع وأكثر اتساقًا وواجهة مستخدم جديدة وأنواع جديدة من عمليات التدقيق.
- دعم
BigInt . جرب النوع الصحيح الجديد في وحدة التحكم. - أضف مسارات إلى الخاصية في لوحة التحكم . قم بإضافة خصائص من الجزء الهدف إلى لوحة المعلومات.
- تم نقل خيار "إظهار الطوابع الزمنية" إلى قسم الإعدادات.
ملاحظة: تحقق من إصدار Chrome قيد التشغيل حاليًا على صفحة chrome://version . إذا كنت تعمل باستخدام إصدار سابق ، فلن تكون هذه الوظائف موجودة. إذا كنت تقوم بتشغيل إصدار أحدث ، فقد تتغير هذه الميزات. يتم تحديث Chrome تلقائيًا إلى إصدار رئيسي جديد كل 6 أسابيع.
اقرأ أو شاهد نسخة الفيديو من هذه الملاحظات:
مساعد وحدة التحكم
يأتي Chrome 68 مزودًا بميزات وحدة تحكم جديدة تتعلق بإكمال التعليمات البرمجية ومعاينة تنفيذها.
تنفيذ متوقع
عندما تكتب تعبيرًا محددًا في وحدة التحكم ، من الآن فصاعدًا ، يمكن أن تظهر لك نتيجة تنفيذ هذا التعبير تحت المؤشر:
الصورة 1 . تعرض وحدة التحكم نتيجة عملية sort() قبل تنفيذها بشكل صريح.
لتنشيط التنفيذ الاستباقي:
- افتح وحدة التحكم
- افتح إعداداته (إعدادات وحدة التحكم)
- ضع علامة في المربع لتقييم Eager
لا تقوم أدوات المطور بتنفيذ تلك التعبيرات التي يمكن أن تؤدي إلى آثار جانبية .
نصائح الحجة
بمجرد كتابة الوظيفة ، ستعرض لك وحدة التحكم الحجج التي تتوقع تلقيها.
الصورة 2 . أمثلة مختلفة لتلميحات الجدل في وحدة التحكم.
ملاحظات:
- تشير علامة الاستفهام قبل الوسيطة ، مثل "
?options ، إلى وسيطة اختيارية . - يشير علامة حذف قبل وسيطة ، مثل
...items ، إلى عامل امتداد . - تأخذ بعض الدالات ، مثل
CSS.supports() ، العديد من تواقيع الوسيطة.
إكمال تلقائي بعد تنفيذ الوظيفة
ملاحظة: تعتمد هذه الميزة على التنفيذ الاستباقي ، الذي يجب تنشيطه في إعدادات أدوات المطور.
بعد تنشيط التنفيذ الاستباقي ، ستبدأ وحدة التحكم أيضًا في إظهار الخصائص والوظائف المتاحة بعد كتابة الوظيفة.
الصورة 3 . تُظهر لقطة الشاشة الأولى السلوك القديم ، بينما تعرض الصورة الثانية سلوكًا جديدًا يدعم الإنجاز.
الكلمات الأساسية من ES2017 إلى وحدة التحكم
الكلمات الرئيسية مثل await متاحة الآن في وحدة التحكم في واجهة الإكمال التلقائي.
الصورة 4 . تقدم وحدة التحكم الآن في await في واجهة الإكمال التلقائي.
تدقيقات أسرع وأكثر موثوقية ، واجهة جديدة وأنواع جديدة من عمليات التدقيق
يأتي Chrome 68 مع Lighthouse 3.0. توضح الأقسام التالية بعض أكبر التغييرات. انظر أيضًا مقالة منفصلة تعلن عن Lighthouse 3.0 للقصة الكاملة.
تدقيقات أسرع وأكثر موثوقية
يحتوي Lighthouse 3.0 على محرك تدقيق داخلي جديد يسمى Lantern ، والذي يكمل تدقيقاتك بشكل أسرع ومع أخطاء أقل بين الجري.
واجهة جديدة
يجلب Lighthouse 3.0 أيضًا واجهة مستخدم جديدة ، بفضل التعاون بين فريقي Lighthouse و Chrome UX (التطوير والتصميم).
الصورة 5 . واجهة إعداد تقارير جديدة في Lighthouse 3.0.
أنواع جديدة من عمليات التدقيق
يوفر لك Lighthouse 3.0 أيضًا 4 أنواع جديدة من عمليات التدقيق:
- العرض الأول للمحتوى
- ملف robots.txt غير صالح
- استخدم تنسيقات الفيديو لمحتوى الرسوم المتحركة
- تجنب طلبات موارد الويب المتعددة والمكلفة
دعم BigInt
ملاحظة: هذه ليست ميزة جديدة تمامًا في أدوات المطور ، إنها ميزة جديدة في لغة جافا سكريبت يمكنك تجربتها في وحدة التحكم.
يدعم Chrome 68 بدائيًا صحيحًا جديدًا يسمى BigInt . يتيح لك BigInt تمثيل أرقام الدقة التعسفية. جرب هذه الميزة في وحدة التحكم:
الصورة 6 . مثال على استخدام BigInt في وحدة التحكم.
أضف مسارات الخصائص في لوحة التحكم
عندما أوقفنا تنفيذ الشفرة عند نقطة الإيقاف ، انقر بزر الماوس الأيمن على الخاصية في لوحة الأهداف وحدد Add property path to watch لإضافة الخاصية إلى لوحة المراقبة.
الصورة 7 . مثال على إضافة مسار إلى قائمة المراقبة.
تم نقل خيار "إظهار الطوابع الزمنية" إلى قسم الإعدادات
الآن انتقل خيار إظهار الطوابع الزمنية ، الذي كان سابقًا في إعدادات وحدة التحكم ، إلى إعدادات أدوات المطور .