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

Kayce Basques
Kayce Basques
X GitHub

تشمل الميزات الجديدة والتغييرات الرئيسية التي ستتم إضافتها إلى "أدوات مطوّري البرامج" في الإصدار 66 من Chrome ما يلي:

يمكنك مواصلة القراءة أو مشاهدة فيديو ملاحظات الإصدار أدناه.

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

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

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

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

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

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

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

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

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

تنسيق المحتوى بشكل جميل في علامتَي التبويب "المعاينة" و"الرد"

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

تعرض علامة التبويب "المعاينة" محتوى analytics.js بتنسيق جميل تلقائيًا.

الشكل 2 تعرض علامة التبويب معاينة محتوى analytics.js بتنسيق جميل تلقائيًا

لعرض النسخة غير المصغّرة من أحد الموارد، استخدِم علامة التبويب الردّ. يمكنك أيضًا تنسيق الموارد يدويًا من علامة التبويب الردّ باستخدام الزر الجديد تنسيق.

تنسيق محتوى analytics.js يدويًا من خلال الزر "تنسيق"

الشكل 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 الآن مؤقتًا عند رمز أداة المعالجة في التطبيق

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

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

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

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

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

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