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

Kayce Basques

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

أهم التفاصيل

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

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

ابحث عن رمز 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).

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

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

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

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

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

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