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

Kayce Basques

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

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

نقاط التسجيل

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

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

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

   

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

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

   

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

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

   

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

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

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

   

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

في المرة التالية التي يتم فيها تنفيذ السطر، تسجِّل "أدوات مطوري البرامج" نتيجة تعبير 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.

الشكل 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 للإبلاغ عن الأخطاء أو اقتراح تحسينات.

تصغير الرمز

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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