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

Kayce Basques

في ما يلي الميزات الجديدة في DevTools في الإصدار 73 من Chrome.

نسخة فيديو من ملاحظات الإصدار هذه

نقاط التسجيل

استخدِم Logpoints لتسجيل الرسائل في Console بدون تشويش الرمز البرمجي من خلال console.log() طلبات.

لإضافة نقطة تسجيل:

  1. انقر بزر الماوس الأيمن على رقم السطر الذي تريد إضافة Logpoint إليه.

    إضافة نقطة تسجيل

    الشكل 1: إضافة نقطة تسجيل

  2. انقر على إضافة نقطة تسجيل. سيظهر محرر نقاط الإيقاف.

    محرِّر نقاط الإيقاف

    الشكل 2. محرِّر نقاط الإيقاف

  3. في محرر نقاط التوقف، أدخِل التعبير الذي تريد تسجيله في وحدة التحكّم.

    تتم كتابة تعبير Logpoint.

    الشكل 3 تتم كتابة تعبير Logpoint.

    نصيحة: عند تسجيل متغيّر (مثل TodoApp)، يجب تضمين المتغيّر في عنصر (مثل {TodoApp}) لتسجيل اسمه وقيمته في وحدة التحكّم. اطّلِع على المقالتَين تسجيل العناصر دائمًا واختصار قيمة سمة العنصر للاطّلاع على مزيد من المعلومات حول هذه البنية.

  4. اضغط على Enter أو انقر خارج أداة تعديل نقاط التوقف للحفظ. تمثل الشارة البرتقالية أعلى رقم السطر Logpoint.

    شارة Logpoint برتقالية في السطر 174

    الشكل 4. شارة تسجيل نقطة برتقالية على السطر 174

في المرة التالية التي يتم فيها تنفيذ السطر، تسجِّل "أدوات مطوري البرامج" نتيجة تعبير Logpoint في وحدة التحكّم.

نتيجة تعبير Logpoint في وحدة التحكّم

الشكل 5 نتيجة تعبير Logpoint في وحدة التحكّم

يمكنك الاطّلاع على المشكلة رقم 700519 في Chromium للإبلاغ عن الأخطاء أو اقتراح تحسينات.

تلميحات تفصيلية في "وضع الفحص"

عند فحص عقدة، تعرض "أدوات المطوّر" الآن نصيحة موسّعة تتضمّن معلومات مهمة بشكل عام، مثل حجم الخط ولونه ونسبة التباين وأبعاد نموذج المربّع.

فحص عقدة

الشكل 6 فحص عقدة

لفحص عقدة:

  1. انقر على رمز فحص فحص عقدة.

    نصيحة: مرِّر مؤشر الماوس فوق فحص للاطّلاع على اختصار لوحة المفاتيح الخاص به.

  2. في إطار العرض، مرِّر مؤشر الماوس فوق العقدة.

تصدير بيانات تغطية الرمز البرمجي

يمكن الآن تصدير بيانات تغطية الرمز البرمجي كملف JSON. يظهر تنسيق JSON على النحو التالي:

[
  {
    "url": "https://wndt73.glitch.me/style.css",
    "ranges": [
      {
        "start": 0,
        "end": 21
      },
      {
        "start": 45,
        "end": 67
      }
    ],
    "text": "body { margin: 1em; } figure { padding: 0; } h1 { color: #317EFB; }"
  },
  ...
]

url هو عنوان URL لملف CSS أو JavaScript الذي حلّلته أدوات المطوّرين. يصف ranges أجزاء الرمز البرمجي التي تم استخدامها. start هي إزاحة البداية لنطاق تم استخدامه. end هو الفاصل الزمني للنهاية. text هو النص الكامل للملف.

في المثال أعلاه، يتوافق النطاق من 0 إلى 21 مع body { margin: 1em; } ويتوافق النطاق من 45 إلى 67 مع h1 { color: #317EFB; }. بعبارة أخرى، تم استخدام مجموعتَي القواعد الأولى والأخيرة ولم يتم استخدام المجموعة الوسطى.

لتحليل مقدار الرمز المستخدَم عند تحميل الصفحة وتصدير البيانات:

  1. اضغط على Control+Shift+P أو Command+Shift+P (نظام التشغيل Mac) لفتح قائمة الأوامر.

    قائمة الأوامر

    الشكل 7 قائمة الأوامر

  2. ابدأ كتابة coverage، ثم اختَر إظهار التغطية واضغط على Enter.

    عرض نسبة استخدام رموز الصفحة

    الشكل 8. عرض التغطية

    ستفتح علامة التبويب التغطية.

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

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

  3. انقر على رمز إعادة التحميل إعادة التحميل. تعيد أدوات المطوّرينتحميل الصفحة وتُسجِّل مقدار الرمز البرمجي المستخدَم مقارنةً بالكمية التي تم إرسالها.

  4. انقر على تصدير تصدير لتصدير البيانات كملف JSON.

تتوفّر تغطية الرمز البرمجي أيضًا في Puppeteer، وهي أداة لتشغيل المتصفّح آليًا يديرها فريق DevTools. اطّلِع على التغطية.

اطلِع على مشكلة Chromium رقم 717195 للإبلاغ عن الأخطاء أو اقتراح تحسينات.

التنقّل في وحدة التحكّم باستخدام لوحة المفاتيح

يمكنك الآن استخدام لوحة المفاتيح للتنقّل في وحدة التحكّم. في ما يلي مثال:

يؤدي الضغط على Shift+Tab إلى تركيز الرسالة الأخيرة (أو نتيجة تعبير تم تقييمه). إذا كانت الرسالة تحتوي على روابط، يتم تمييز الرابط الأخير أولاً. يؤدي الضغط على Enter إلى فتح الرابط في علامة تبويب جديدة. يؤدي الضغط على مفتاح السهم المتّجه لليسار إلى تمييز الرسالة بأكملها (راجِع الشكل 13).

التركيز على رابط

الشكل 11 التركيز على رابط

يؤدي الضغط على مفتاح السهم المتّجه للأعلى إلى تركيز الرابط التالي.

التركيز على رابط آخر

الشكل 12. التركيز على رابط آخر

يؤدي الضغط على مفتاح السهم المتّجه للأعلى مرة أخرى إلى التركيز على الرسالة بأكملها.

التركيز على رسالة بأكملها

الشكل 13 التركيز على رسالة بأكملها

يؤدي الضغط على مفتاح السهم المتّجه لليمين إلى توسيع تتبع تسلسل استدعاء الدوالّ (أو الكائن أو الصفيف وما إلى ذلك) المُصغّر.

توسيع تسلسل استدعاء الدوال البرمجية المصغّر

الشكل 14 توسيع تسلسل استدعاء الدوال البرمجية المصغّر

يؤدي الضغط على مفتاح السهم المتّجه لليسار إلى تصغير رسالة أو نتيجة موسّعة.

يُرجى الاطّلاع على المشكلة رقم 865674 في Chromium للإبلاغ عن الأخطاء أو اقتراح تحسينات.

خط نسبة التباين AAA في أداة اختيار الألوان

تعرض "أداة اختيار الألوان" الآن سطرًا ثانيًا للإشارة إلى الألوان التي تستوفي توصية نسبة التباين AAA. كان خط AA متوفّرًا منذ الإصدار 65 من Chrome.

سطر AA (أعلى) وسطر AAA (أسفل)

الشكل 15 سطر AA (العلوي) وسطر AAA (الأسفل)

تمثل الألوان بين الخطين الألوان التي تلبي توصية AA ولكنها لا تلبي توصية AAA. عندما يستوفي أحد الألوان اقتراح AAA، يستوفي أي عنصر على الجانب نفسه من ذلك اللون هذا الاقتراح أيضًا. على سبيل المثال، في الشكل 15، أي قيمة أسفل الخط السفلي هي AAA، وأي قيمة أعلى من الخط العلوي لا تستوفي حتى اقتراح AA.

ملاحظة: بشكل عام، يمكنك تحسين سهولة قراءة صفحاتك من خلال زيادة مقدار النص الذي يستوفي اقتراح AAA. إذا لم تكن تلبية توصية AAA ممكنًا لسبب ما، فحاول تلبية توصية AA على الأقل.

اطّلِع على نسبة التباين في أداة اختيار الألوان لمعرفة كيفية الوصول إلى هذه الميزة.

يُرجى الاطّلاع على المشكلة رقم 879856 في Chromium للإبلاغ عن الأخطاء أو اقتراح تحسينات.

حفظ عمليات إلغاء الموقع الجغرافي المخصّصة

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

  1. اضغط على Control+Shift+P أو Command+Shift+P (في نظام التشغيل Mac) لفتح قائمة الأوامر.

    قائمة الأوامر

    الشكل 16 قائمة الأوامر

  2. اكتب sensors، واختَر إظهار أدوات الاستشعار، ثم اضغط على Enter. ستفتح علامة التبويب أجهزة الاستشعار.

    علامة التبويب "أجهزة الاستشعار"

    الشكل 17. علامة التبويب "أجهزة الاستشعار"

  3. في قسم الموقع الجغرافي، انقر على إدارة. فتح الإعدادات > المواقع الجغرافية

    علامة التبويب "المواقع الجغرافية" في "الإعدادات"

    الشكل 18. علامة التبويب "المواقع الجغرافية" في "الإعدادات"

  4. انقر على إضافة موقع جغرافي.

  5. أدخِل اسم الموقع الجغرافي وخط العرض وخط الطول، ثم انقر على إضافة.

    إضافة موقع جغرافي مخصّص

    الشكل 19 إضافة موقع جغرافي مخصّص

اطّلِع على المشكلة رقم 649657 في Chromium للإبلاغ عن الأخطاء أو اقتراح تحسينات.

تصغير الرمز

تتيح لوحتا المصادر والشبكة الآن طيّ الرموز البرمجية.

تمّ تصغير الأسطر من 54 إلى 65

الشكل 20 تمّ تصغير الأسطر من 54 إلى 65

لتفعيل تصغير الرمز:

  1. اضغط على F1 لفتح الإعدادات.
  2. ضمن الإعدادات > الإعدادات المفضّلة > المصادر، فعِّل طيّ الرمز البرمجي.

لتصغير مجموعة رموز:

  1. مرِّر مؤشر الماوس فوق رقم السطر الذي يبدأ منه الجزء المراد حذفه.
  2. انقر على رمز Fold طيّ.

يُرجى الاطّلاع على المشكلة رقم 328431 في Chromium للإبلاغ عن الأخطاء أو اقتراح تحسينات.

علامة التبويب "الرسائل"

تمت إعادة تسمية علامة التبويب اللقطات لتصبح علامة التبويب الرسائل. لا تتوفّر علامة التبويب هذه إلا في لوحة الشبكة عند فحص اتصال web socket.

علامة التبويب "الرسائل"

الشكل 21 علامة التبويب "الرسائل"

يُرجى الاطّلاع على المشكلة رقم 802182 في Chromium للإبلاغ عن الأخطاء أو اقتراح تحسينات.

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

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

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

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

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

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