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

Kayce Basques

الميزات والتغييرات الجديدة في "أدوات مطوري البرامج" في الإصدار Chrome 62:

العاملين من المستوى الأعلى في انتظارك في Console

تتوافق وحدة التحكّم الآن مع عوامل تشغيل await من المستوى الأعلى.

استخدام عوامل التشغيل في انتظارك من المستوى الأعلى في Play Console

الشكل 1. استخدام عوامل تشغيل await ذات المستوى الأعلى في وحدة التحكم

مهام سير عمل جديدة لأخذ لقطات شاشة

يمكنك الآن أخذ لقطة شاشة لجزء من إطار العرض أو لعقدة HTML محدّدة.

لقطات شاشة لجزء من إطار العرض

لأخذ لقطة شاشة لجزء من إطار العرض، يُرجى اتّباع الخطوات التالية:

  1. انقر على فحص فحص أو اضغط على Command+Shift+C (نظام التشغيل Mac) أو Control+Shift+C (في نظامَي التشغيل Windows وLinux) للدخول إلى وضع "فحص العنصر".
  2. اضغط مع الاستمرار على Command (نظام التشغيل Mac) أو Control (نظام التشغيل Windows وLinux) واختَر الجزء الذي تريد أخذ لقطة شاشة منه من إطار العرض.
  3. حرر الماوس. تنزِّل "أدوات مطوري البرامج" لقطة شاشة للجزء الذي اخترته.

أخذ لقطة شاشة لجزء من إطار العرض

الشكل 2. أخذ لقطة شاشة لجزء من إطار العرض

لقطات شاشة لعُقد HTML محدّدة

لأخذ لقطة شاشة لعقدة HTML محدّدة:

  1. اختَر عنصرًا في لوحة العناصر.

    مثال على عقدة

    الشكل 3. في هذا المثال، الهدف هو أخذ لقطة شاشة للرأس الأزرق الذي يحتوي على النص Tools. يُرجى العلم أنّ هذه العقدة قد سبق اختيارها في شجرة DOM من لوحة العناصر.

  2. افتح قائمة الطلبات.

  3. ابدأ كتابة node واختر Capture node screenshot. تُنزِّل "أدوات مطوري البرامج" لقطة شاشة للعقدة المحددة.

    نتيجة الأمر "التقاط لقطة شاشة للعقدة"

    الشكل 4. نتيجة استخدام الأمر Capture node screenshot

تمييز شبكة CSS

لعرض شبكة CSS التي تؤثر في عنصر، مرِّر مؤشر الماوس فوق عنصر في شجرة DOM ضمن لوحة العناصر. يظهر حد متقطع حول كل عنصر من عناصر الشبكة. لا تعمل هذه الميزة إلا عند تطبيق السمة display:grid على العنصر الذي تم اختياره أو العنصر الرئيسي.

تمييز شبكة CSS

الشكل 5. تمييز شبكة CSS

اطلع على الفيديو أدناه للتعرف على أساسيات شبكة CSS في أقل من دقيقتين.

واجهة برمجة تطبيقات جديدة للبحث عن كائنات النصوص البرمجية

يمكنك استدعاء queryObjects(Constructor) من Console لعرض صفيف من الكائنات التي تم إنشاؤها باستخدام الدالة الإنشائية المحددة. مثال:

  • queryObjects(Promise). يتم عرض جميع التعهدات.
  • queryObjects(HTMLElement). تعرض جميع عناصر HTML.
  • queryObjects(foo)، حيث يكون foo اسم دالة. عرض جميع الكائنات التي تم إنشاء مثيل لها من خلال new foo().

نطاق queryObjects() هو سياق التنفيذ المحدد حاليًا في وحدة التحكم. راجِع اختيار سياق التنفيذ.

فلاتر وحدة التحكم الجديدة

تتوافق وحدة التحكّم الآن مع الفلاتر السلبية وفلاتر عناوين URL.

الفلاتر السلبية

اكتب -<text> في المربع الفلتر لتصفية أي رسالة وحدة تحكم تتضمن <text>.

مثال على 3 رسائل ستتم تصفيتها

الشكل 6. تسجِّل العبارة الأولى one وtwo وthree وfour في وحدة التحكم. تم إخفاء two بسبب إدخال -two في مربع الفلتر

تُجري "أدوات مطوري البرامج" فلترة للرسالة في حال العثور على <text>:

  • في نص الرسالة
  • في اسم الملف الذي نشأت منه الرسالة.
  • في نص تتبُّع تسلسل استدعاء الدوال البرمجية.

يعمل الفلتر السالب أيضًا مع التعبيرات العادية، مثل -/[4-5]*ms/.

فلاتر عناوين URL

اكتب url:<text> في المربع فلتر لعرض الرسائل التي نشأت من نص برمجي يحتوي عنوان URL الخاص به على <text> فقط.

يستخدم الفلتر مطابقة ضبابية. إذا ظهر <text> في أي مكان في عنوان URL، ستعرض "أدوات مطوري البرامج" الرسالة.

مثال على فلترة عناوين URL

الشكل 7. استخدام فلترة عناوين URL لعرض الرسائل الناشئة من النصوص البرمجية التي يتضمّن عنوان URL الخاص بها hymn فقط يظهر لك أنّ اسم المضيف يتضمّن هذا النص من خلال تمرير مؤشر الماوس فوق اسم النص البرمجي.

عمليات استيراد HAR في لوحة "الشبكة"

اسحب ملف HAR وأفلِته في لوحة الشبكة لاستيراده.

استيراد ملف HAR

الشكل 8. استيراد ملف HAR

موارد ذاكرة التخزين المؤقت القابلة للمعاينة في لوحة التطبيقات

انقر على صف في جدول مساحة التخزين في ذاكرة التخزين المؤقت لعرض معاينة لذلك المورد أسفل الجدول.

معاينة مورد ذاكرة التخزين المؤقت

الشكل 9. معاينة مورد ذاكرة التخزين المؤقت

المزيد من عمليات تصحيح الأخطاء في ذاكرة التخزين المؤقت

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

في Chrome 62، يتم الآن تحديث علامة التبويب مساحة التخزين في ذاكرة التخزين المؤقت في الوقت الفعلي عند إنشاء أو تحديث أو حذف ذاكرة التخزين المؤقت أو المورد. شاهِد الفيديو أدناه للاطّلاع على مثال.

يمكنك الاطّلاع على العرض التوضيحي لمساحة التخزين في ذاكرة التخزين المؤقت لتجربته بنفسك.

تغطية الرمز على مستوى الحظر

في الإصدار 61 من Chrome والإصدارات الأقدم، تحدّد علامة التبويب التغطية جميع الرموز البرمجية داخل الدالة على أنّها مستخدَمة، ما دام يتم استدعاء الدالة.

مثال على علامة التبويب &quot;التغطية&quot; في Chrome 61

الشكل 10. مثال على علامة التبويب التغطية في Chrome 61 تم وضع علامة على السطر 4 بأنه يُستخدم، على الرغم من أنه لا يتم تنفيذه أبدًا

بدءًا من الإصدار 62 من Chrome، ستخبرك علامة التبويب التغطية الآن بالرمز البرمجي الذي يُسمى داخل الدالة.

مثال على علامة التبويب &quot;التغطية&quot; في Chrome 62

الشكل 11. مثال على علامة التبويب التغطية في Chrome 62. تم وضع علامة "غير مستخدم" على السطر 4

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

يمكنك استخدام إصدار 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