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

Kayce Basques

تشمل الميزات الجديدة والتغييرات الرئيسية التي ستطرأ على "أدوات مطوري البرامج" في Chrome 66 ما يلي:

يمكنك الاطّلاع على المزيد من المعلومات أدناه أو مشاهدة الفيديو الذي يعرض ملاحظات الإصدار.

تجاهُل النص البرمجي في لوحة "الشبكة"

يوضّح لك عمود المشغِّل في لوحة الشبكة سبب طلب أحد الموارد. على سبيل المثال، إذا أدّى JavaScript إلى جلب صورة، يعرض لك عمود المُنشئ سطر رمز JavaScript الذي أدّى إلى تقديم الطلب.

في السابق، إذا كان إطار العمل يلُفّ طلبات الشبكة في عنصر لفّ، لن يكون عمود المُشغِّل مفعّلاً. كانت جميع طلبات الشبكة تشير إلى السطر نفسه من رمز الغلاف.

ما تريده حقًا في هذا السيناريو هو الاطّلاع على رمز التطبيق الذي يتسبب في الطلب. أصبح بإمكانك الآن تنفيذ ما يلي:

  1. مرِّر مؤشر الماوس فوق عمود المشغِّل. يظهر تسلسل استدعاء الدوالّ الذي أدّى إلى الطلب في نافذة منبثقة.
  2. انقر بزر الماوس الأيمن على المكالمة التي تريد إخفاءها من نتائج المُنشئ.
  3. انقر على إضافة نص برمجي إلى قائمة التجاهل. يخفي عمود المُشغِّل الآن أيّ طلبات من النص الذي تجاهلته.

يتم تجاهل requests.js.

الشكل 1: تجاهل requests.js

يمكنك إدارة النصوص البرمجية التي تم تجاهلها من علامة التبويب قائمة التجاهل في الإعدادات.

اطّلِع على تجاهُل نص برمجي أو نمط من النصوص البرمجية للتعرّف على مزيد من المعلومات عن تجاهُل النصوص البرمجية.

الطباعة الجميلة في علامتَي التبويب "المعاينة" و"الردّ"

تعرض الآن علامة التبويب المعاينة في لوحة الشبكة الموارد بتنسيق محسّن تلقائيًا عند رصده أنّه تم تصغير هذه الموارد.

تُطبع علامة التبويب "المعاينة" محتوى analytics.js بشكلٍ جميل تلقائيًا.

الشكل 2: علامة التبويب معاينة تطبع محتويات analytics.js بشكل جميل تلقائيًا

لعرض النسخة غير المُكثَّفة من أحد الموارد، استخدِم علامة التبويب الاستجابة. يمكنك أيضًا طباعة الموارد بشكل جميل يدويًا من علامة التبويب الردّ، وذلك من خلال الزر الجديد التنسيق.

طباعة محتوى analytics.js يدويًا بشكل جميل من خلال الزر Format (تنسيق).

الشكل 3 الطباعة المُحسَّنة يدويًا لمحتوى analytics.js من خلال الزر تنسيق

معاينة محتوى HTML في علامة التبويب "المعاينة"

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

معاينة ملف HTML في علامة التبويب "المعاينة"

الشكل 4 معاينة ملف HTML في علامة التبويب معاينة

الضبط التلقائي للتكبير أو التصغير في "وضع الجهاز"

في وضع الجهاز، افتح القائمة المنسدلة التكبير/التصغير واختَر الضبط التلقائي للتكبير/التصغير لإعادة ضبط حجم إطار العرض تلقائيًا عند تغيير اتجاه الجهاز.

تعمل ميزة "الاستبدالات المحلية" الآن مع بعض الأنماط المحدّدة في HTML.

عندما أطلقت "أدوات مطوري البرامج" ميزة الاستبدالات المحلية في الإصدار 65 من Chrome، كان أحد القيود هو أنّه لم يكن بإمكانها تتبُّع التغييرات في الأنماط المحدّدة في HTML. على سبيل المثال، في الشكل 7، هناك قاعدة للنمط في head من المستند تُعرِض font-weight: bold لعناصر h1.

مثال على الأنماط المحدّدة في HTML

الشكل 5 مثال على الأنماط المحدّدة في HTML

في الإصدار 65 من Chrome، إذا غيّرت بيان font-weight من خلال لوحة الأسلوب في "أدوات مطوّري البرامج"، لن تتتبّع عمليات التبديل المحلي هذا التغيير. بعبارة أخرى، عند إعادة التحميل التالية، سيتم إعادة تطبيقfont-weight: bold على الأسلوب. ولكن في الإصدار 66 من Chrome، تبقى التغييرات من هذا النوع سارية في جميع عمليات تحميل الصفحات.

نصيحة إضافية: تجاهل نصوص إطار العمل لجعل النقاط الفاصلة لأداة معالجة الحدث أكثر فائدة

عندما أنشأت فيديو البدء في تصحيح أخطاء JavaScript، علّق بعض المشاهدين قائلين أنّ نقاط توقّف مستمعي الأحداث ليست مفيدة للتطبيقات المبنية على إطارات عمل، لأنّ مستمعي الأحداث غالبًا ما يتم تضمينهم في رمز إطار العمل. على سبيل المثال، في الشكل 8، أعددت نقطة توقف click في "أدوات المطوّرين". عند النقر على الزر في العرض التجريبي، تتوقّف أدوات المطوّرين مؤقتًا تلقائيًا في السطر الأول من رمز المستمع. في هذه الحالة، يتم إيقاف التحميل مؤقتًا في رمز الغلاف الخاص بخدمة Vue.js في السطر 1802، وهو إجراء غير مفيد.

يوقف نقطة التوقف عند النقر مؤقتًا رمز الغلاف في Vue.js.

الشكل 6 يوقف نقطة التوقف click مؤقتًا رمز الغلاف في Vue.js

بما أنّ نص Vue.js البرمجي مضمّن في ملف منفصل، يمكنني تجاهل هذا النص البرمجي من لوحة تسلسل الاستدعاء لجعل نقطة التوقف click هذه أكثر فائدة.

تجاهل النص البرمجي Vue.js من لوحة "تسلسل استدعاء الدوال البرمجية"

الشكل 7 تجاهل نص Vue.js من لوحة تسلسل استدعاء الدوال البرمجية

في المرة التالية التي أنقر فيها على الزر وأشغّل نقطة التوقف click، يتم تنفيذ رمز Vue.js بدون إيقافه مؤقتًا، ثم يتم إيقافه مؤقتًا عند سطر التعليمات البرمجية الأول في مستمع تطبيقي، وهو المكان الذي أردت فيه إيقافه مؤقتًا طوال الوقت.

يوقف نقطة التوقف عند النقر الآن الرمز البرمجي الخاص بمعالج أحداث التطبيق مؤقتًا.

الشكل 8 تؤدي نقطة الإيقاف click الآن إلى إيقاف رمز أداة الاستماع في التطبيق مؤقتًا.

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

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

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

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

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

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