الميزات الجديدة في أدوات مطوّري البرامج (Chrome 59)

Kayce Basques
Kayce Basques
X GitHub

مرحبًا بك في حلقة جديدة من ملاحظات إصدار "أدوات مطوّري البرامج". شاهِد الفيديو أدناه أو تابِع القراءة للتعرّف على الميزات الجديدة في "أدوات مطوّري البرامج في Chrome" في الإصدار 59 من Chrome.

أهم اللحظات

الميزات الجديدة

نسبة استخدام رموز CSS وJavaScript

يمكنك العثور على رموز CSS وJS غير مستخدَمة باستخدام علامة التبويب الجديدة Coverage. عند تحميل صفحة أو تشغيلها، تخبرك علامة التبويب بمقدار الرمز الذي تم استخدامه مقارنةً بمقدار الرمز الذي تم تحميله. يمكنك تقليل حجم صفحاتك من خلال إرسال الرمز الذي تحتاجه فقط.

علامة التبويب "التغطية"

يؤدي النقر على عنوان URL إلى عرض هذا الملف في لوحة المصادر مع تفصيل لأسطر الرمز التي تم تنفيذها.

تحليل لتغطية الرمز البرمجي في لوحة "المصادر"

يتم ترميز كل سطر من التعليمات البرمجية بالألوان:

  • يشير اللون الأخضر الثابت إلى أنّه تم تنفيذ سطر الرمز البرمجي.
  • يشير اللون الأحمر الثابت إلى أنّه لم يتم تنفيذ الإجراء.
  • يشير سطر الرمز البرمجي الذي يظهر باللونين الأحمر والأخضر معًا، مثل السطر 3 في لقطة الشاشة أعلاه، إلى أنّه تم تنفيذ جزء فقط من الرمز البرمجي في هذا السطر. على سبيل المثال، يتم تلوين تعبير ثلاثي مثل var b = (a > 0) ? a : 0 باللونين الأحمر والأخضر.

لفتح علامة التبويب التغطية، اتّبِع الخطوات التالية:

  1. افتح قائمة الأوامر.
  2. ابدأ بكتابة Coverage واختَر عرض التغطية.

لقطات شاشة بملء الصفحة

يمكنك مشاهدة الفيديو أدناه للتعرّف على كيفية أخذ لقطة شاشة من أعلى الصفحة إلى أسفلها.

حظر الطلبات

هل تريد معرفة سلوك صفحتك عندما لا يتوفّر نص برمجي أو ورقة أنماط أو مرجع آخر؟ انقر بزر الماوس الأيمن على الطلب في لوحة الشبكة، ثم اختَر حظر عنوان URL للطلب. تظهر علامة التبويب الجديدة حظر الطلبات في "الدرج"، ما يتيح لك إدارة الطلبات المحظورة.

حظر عنوان URL للطلب

تخطّي عملية انتظار غير متزامنة

حتى الآن، كانت محاولة تتبُّع تنفيذ التعليمات البرمجية، مثل المقتطف أدناه، أمرًا مزعجًا. ستكون في منتصف test()، وتتخطى سطرًا، ثم ستتم مقاطعتك بالرمز setInterval(). الآن، عند تتبُّع الرمز غير المتزامن، مثل test()، تتنقّل "أدوات مطوّري البرامج" من السطر الأول إلى السطر الأخير بشكل متّسق.

  function wait(ms) {     return new Promise(r => setTimeout(r, ms)).then(() => "Yay");   }    // do some work in background.   setInterval(() => 42, 200);    async function test() {     debugger;     const hello = "world";     const response = await fetch('index.html');     const tmp = await wait(1000);     console.log(tmp);     return hello;   }    async function runTest() {     let result = await test();     console.log(result);   }

ملاحظة: هل تريد تحسين مهاراتك في تصحيح الأخطاء؟ اطّلِع على المستندات الجديدة نسبيًا التالية:

التغييرات

قائمة الأوامر الموحّدة

عند فتح قائمة الأوامر الآن، ستلاحظ أنّه تمّت إضافة علامة أكبر من (>) إلى بداية الأمر. والسبب في ذلك هو أنّه تمّت دمج قائمة الأوامر مع قائمة فتح ملف، التي يمكن الوصول إليها من خلال الضغط على Command+O (في نظام التشغيل Mac) أو Control+O (في نظام التشغيل Windows أو Linux).

تنزيل قنوات المعاينة

ننصحك باستخدام Chrome Canary أو قناة مطوّري البرامج أو القناة التجريبية كمتصفّح تطوير تلقائي. تتيح لك قنوات المعاينة هذه الوصول إلى أحدث ميزات DevTools، وتتيح لك اختبار أحدث واجهات برمجة التطبيقات لمنصة الويب، وتساعدك في العثور على المشاكل في موقعك الإلكتروني قبل أن يواجهها المستخدمون.

التواصل مع فريق Chrome DevTools

استخدِم الخيارات التالية لمناقشة الميزات الجديدة أو التحديثات أو أي شيء آخر متعلّق بـ "أدوات مطوّري البرامج".

الميزات الجديدة في "أدوات مطوّري البرامج"

قائمة بكل ما تم تناوله في سلسلة الميزات الجديدة في "أدوات مطوّري البرامج"