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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

تعرض "أداة اختيار الألوان" الآن سطرًا ثانيًا للإشارة إلى الألوان التي تستوفي توصية نسبة التباين AAA. يتوفر سطر 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.

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

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

الإصدار 127 من Chrome

الإصدار 126 من Chrome

الإصدار 125 من Chrome

الإصدار 124 من Chrome

الإصدار 123 من Chrome

الإصدار 122 من Chrome

الإصدار 121 من Chrome

الإصدار 120 من Chrome

الإصدار 119 من Chrome

الإصدار 118 من Chrome

الإصدار 117 من Chrome

الإصدار 116 من Chrome

الإصدار 115 من Chrome

الإصدار 114 من Chrome

الإصدار 113 من Chrome

الإصدار 112 من Chrome

الإصدار 111 من Chrome

الإصدار 110 من Chrome

الإصدار 109 من Chrome

الإصدار 108 من Chrome

الإصدار 107 من Chrome

الإصدار 106 من Chrome

الإصدار 105 من Chrome

الإصدار 104 من Chrome

الإصدار 103 من Chrome

الإصدار 102 من Chrome

الإصدار 101 من Chrome

الإصدار 100 من Chrome

الإصدار 99 من Chrome

الإصدار 98 من Chrome

الإصدار 97 من Chrome

الإصدار 96 من Chrome

الإصدار 95 من Chrome

الإصدار 94 من Chrome

الإصدار 93 من Chrome

الإصدار 92 من Chrome

الإصدار 91 من Chrome

الإصدار 90 من Chrome

الإصدار 89 من Chrome

الإصدار 88 من Chrome

الإصدار 87 من Chrome

الإصدار 86 من Chrome

الإصدار 85 من Chrome

الإصدار 84 من Chrome

الإصدار 83 من Chrome

الإصدار 82 من Chrome

تم إلغاء الإصدار 82 من Chrome.

الإصدار 81 من Chrome

الإصدار 80 من Chrome

الإصدار 79 من Chrome

الإصدار 78 من Chrome

الإصدار 77 من Chrome

الإصدار 76 من Chrome

الإصدار 75 من Chrome

الإصدار 74 من Chrome

الإصدار 73 من Chrome

الإصدار 72 من Chrome

الإصدار 71 من Chrome

Chrome 70

الإصدار 68 من Chrome

الإصدار 67 من Chrome

Chrome 66

الإصدار 65 من Chrome

الإصدار 64 من Chrome

الإصدار 63 من Chrome

الإصدار 62 من Chrome

الإصدار 61 من Chrome

الإصدار 60 من Chrome

الإصدار 59 من Chrome