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

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

أهم التفاصيل

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

تغطية الرموز البرمجية لـ CSS وJS

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

علامة التبويب "المساحة"

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

التواصل مع فريق "أدوات مطوّري البرامج في Chrome"

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

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

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