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

Kayce Basques
Kayce Basques

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

أهم التفاصيل

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

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

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

علامة تبويب "التغطية"

يؤدي النقر على عنوان 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 تم توحيد القائمة باستخدام قائمة فتح ملف، وهي Command+O (نظام التشغيل Mac)، أو Control+O (Windows، Linux).

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

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

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

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

  • يمكنك إرسال اقتراح أو ملاحظات إلينا عبر crbug.com.
  • الإبلاغ عن مشكلة في "أدوات مطوري البرامج" باستخدام خيارات إضافية   المزيد > مساعدة > الإبلاغ عن مشاكل في "أدوات مطوري البرامج" في "أدوات مطوري البرامج"
  • يمكنك نشر تغريدة على @ChromeDevTools.
  • شارِك في التعليقات على الميزات الجديدة في فيديوهات YouTube أو نصائح حول أدوات مطوّري البرامج فيديوهات YouTube.

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

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