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

Kayce Basques

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

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

نقاط السجل

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

لإضافة نقطة تسجيل، اتّبِع الخطوات التالية:

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

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

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

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

    أداة تعديل النقاط الفاصلة

    الشكل 2. أداة تعديل النقاط الفاصلة

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

    كتابة تعبير نقطة التسجيل

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

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

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

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

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

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

نتيجة تعبير "نقطة التسجيل" في وحدة التحكُّم

الشكل 5. نتيجة تعبير "نقطة التسجيل" في وحدة التحكُّم

يُرجى الاطّلاع على مشكلة 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 في "Color Picker" (منتقي الألوان)

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

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

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

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

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

يُرجى استخدام الخيارات التالية لمناقشة الميزات والتغييرات الجديدة في المشاركة أو أي موضوع آخر ذي صلة بـ "أدوات مطوري البرامج".

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

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

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

الإصدار 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

Chrome 100

إصدار Chrome 99

Chrome 98

97 من Chrome

الإصدار 96 من Chrome

Chrome 95

Chrome 94

Chrome 93

الإصدار 92 من Chrome

الإصدار 91 من Chrome

90 Chrome

إصدار Chrome 89

إصدار Chrome 88

الإصدار 87 من Chrome

إصدار 86 من Chrome

الإصدار 85 من Chrome

إصدار 84 من Chrome

إصدار Chrome 83

إصدار 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

إصدار Chrome 68

الإصدار 67 من Chrome

Chrome 66

الإصدار 65 من Chrome

إصدار 64 من Chrome

إصدار 63 من Chrome

إصدار 62 من Chrome

إصدار 61 من Chrome

إصدار 60 من Chrome

الإصدار 59 من Chrome