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

Kayce Basques
Kayce Basques
X GitHub

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

أهم اللحظات

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

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

يمكنك العثور على رموز 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 أو Dev أو Beta كمتصفّح تطوير تلقائي. تتيح لك قنوات المعاينة هذه الوصول إلى أحدث ميزات DevTools، وتتيح لك اختبار أحدث واجهات برمجة التطبيقات لمنصة الويب، وتساعدك في العثور على المشاكل في موقعك الإلكتروني قبل أن يواجهها المستخدمون.

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

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

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

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