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

Kayce Basques

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

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

نقاط تسجيل

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

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

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

   

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

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

   

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

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

   

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

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

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

   

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

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

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

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

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

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

الشكل 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. انقر على تصدير لتصدير البيانات كملف JSON.

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

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

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

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

يؤدي الضغط على 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. انقر على طي .

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

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

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

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

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

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

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

التواصل مع فريق Chrome DevTools

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

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

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

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