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

Kayce Basques

في ما يلي الميزات الجديدة في "أدوات مطوري البرامج" في الإصدار Chrome 73.

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

نقاط التسجيل

استخدِم نقاط السجلّ لتسجيل الرسائل في "وحدة التحكّم" بدون تكديس الرمز البرمجي باستخدام console.log() الاتصالات.

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

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

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

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

  2. اختَر إضافة نقطة تسجيل. سيظهر لك محرِّر نقاط الإيقاف.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

فحص عقدة

الشكل 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. انقر على رمز إعادة التحميل إعادة التحميل. DevTools يعيد تحميل الصفحة ويسجّل مقدار الرمز المستخدَم مقارنةً بالمبلغ الذي تم شحنه.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

خط نسبة تباين AAA في "منتقي الألوان"

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

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

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

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

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

راجع نسبة التباين في منتقي الألوان للتعرف على كيفية الوصول إلى هذه الميزة.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

تصغير الرمز البرمجي

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

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

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

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

  1. اضغط على F1 لفتح الإعدادات.
  2. ضمن الإعدادات > التفضيلات > تعمل المصادر على تفعيل طي الرمز.

لطي مجموعة من الرموز:

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

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

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

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

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

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

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

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

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

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

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

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

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

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