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

Kayce Basques

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

أهم التفاصيل

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

تغطية الرموز البرمجية لـ 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).

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

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

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

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

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

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