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

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

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

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

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