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

Jecelyn Yeen

تجميع الملفات حسب "المصدر الذي تم تأليفه" أو "المصدر الذي تم نشره" في لوحة "المصادر"

تظهر الآن ميزة تجميع الملفات حسب ما تم تأليفه / ما تم نشره ضمن قائمة النقاط الثلاث. في السابق، كان يظهر مباشرةً في لوحة التنقّل.

افتح هذا العرض التجريبي. فعِّل الإعداد تجميع الملفات حسب "الملف الذي أنشأه" أو "الملف الذي تم نشره" لعرض رمز المصدر الأصلي (الملف الذي أنشأه) أولاً والانتقال إليه بشكل أسرع.

تجميع الملفات حسب ما تم تأليفه / ما تم نشره

خطأ Chromium: 1352488

تقارير تتبُّع تسلسل استدعاء الدوال البرمجية المحسّنة

عمليات تتبُّع تسلسل استدعاء الدوال البرمجية المرتبطة للعمليات غير المتزامنة

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

على سبيل المثال، افتح هذا العرض التجريبي وانقر على زر الزيادة. وسِّع رسالة الخطأ في وحدة التحكّم. في رمز المصدر، تتضمّن العملية عملية timeout غير متزامنة.

// application.component.ts

async increment() {
    await Promise.resolve().then(() => timeout(100));
    …
}

في السابق، كان تسلسل استدعاء الدوال البرمجية يعرض عملية انتهاء مهلة فقط. لم يعرض "السبب الأساسي" للعملية.

بعد إجراء أحدث التغييرات، تعرض أدوات المطوّر الآن أنّ العملية نشأت من حدث onClick في مكوّن الزر، ثمّ دالة increment، ثمّ عملية المهلة.

عمليات تتبُّع تسلسل استدعاء الدوال البرمجية المرتبطة للعمليات غير المتزامنة

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

هل يبدو الأمر معقّدًا؟ إطلاقًا. في معظم الأحيان، يعالج إطار العمل الذي تستخدمه عملية الجدولة والتنفيذ غير المتزامن. في هذه الحالة، يعود الأمر إلى إطار العمل لاستخدام واجهة برمجة التطبيقات، ولا داعي للقلق بشأن ذلك. (على سبيل المثال، نفَّذت Angular هذه التغييرات)

خطأ Chromium: 1334585

تجاهُل النصوص البرمجية المعروفة التابعة لجهات خارجية تلقائيًا

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

افتح هذا العرض التجريبي وانقر على زر الزيادة. وسِّع رسالة الخطأ في وحدة التحكّم. لا يعرض تقرير تتبُّع تسلسل استدعاء الدوال البرمجية سوى الرمز البرمجي (مثل app.component.ts button.component.ts). انقر على عرض المزيد من اللقطات لعرض تقرير تتبُّع تسلسل استدعاء الدوال البرمجية الكامل.

في السابق، كان تتبُّع تسلسل استدعاء الدوال البرمجية يتضمّن نصوصًا برمجية تابعة لجهات خارجية، مثل zone.js وcore.mjs. هذه ليست رمز المصدر الخاص بك، بل يتم إنشاؤها بواسطة حِزم (مثل webpack) أو إطارات عمل (مثل Angular). استغرق تحديد السبب الأساسي للخطأ وقتًا أطول.

تجاهُل النصوص البرمجية المعروفة التابعة لجهات خارجية تلقائيًا في تسلسل استدعاء الدوال البرمجية

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

إذا كنت تفضّل عرض قوائم تتبُّع تسلسل استدعاء الدوال البرمجية الكاملة في كلّ الأوقات، يمكنك إيقاف الإعداد من خلال الإعدادات > قائمة التجاهل > إضافة النصوص البرمجية المعروفة التابعة لجهات خارجية إلى قائمة التجاهل تلقائيًا.

الإعداد لإضافة النصوص البرمجية المعروفة التابعة لجهات خارجية إلى قائمة التجاهل تلقائيًا

خطأ Chromium: 1323199

حزمة اتصال محسَّنة أثناء تصحيح الأخطاء

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

افتح هذا العرض التجريبي واضبط نقطة توقُّف عند الدالة increment() في app.component.ts. انقر على زر الزيادة في الصفحة لتشغيل نقطة التوقف. لا يعرض تسلسل استدعاء الدوال البرمجية سوى اللقطات من الرمز البرمجي (مثل app.component.ts وbutton.component.ts).

لعرض جميع اللقطات، فعِّل الخيار عرض اللقطات المُدرَجة بقائمة التجاهل. في السابق، كانت أدوات المطوّر تعرض جميع اللقطات تلقائيًا.

حزمة اتصال محسَّنة أثناء تصحيح الأخطاء

خطأ Chromium: 1352488

إخفاء المصادر المدرَجة بقائمة التجاهل في لوحة "المصادر"

فعِّل إخفاء المصادر المدرَجة بقائمة التجاهل لإخفاء الملفات غير ذات الصلة في لوحة التنقّل. بهذه الطريقة، يمكنك التركيز على الرمز فقط.

افتح هذا العرض التجريبي. في لوحة المصادر node_modules وwebpack هما النصّان البرمجيّان التابعان لجهة خارجية. انقر على قائمة النقاط الثلاث واختَر إخفاء المصادر المُدرَجة في قائمة المصادر التي تم تجاهلها لإخفائها من اللوحة.

إخفاء المصادر المدرَجة بقائمة التجاهل في لوحة "المصادر"

خطأ Chromium: 1352488

باستخدام الإعداد إخفاء المصادر المُدرَجة في قائمة المصادر التي يتم تجاهلها، يمكنك العثور على ملفك بشكل أسرع باستخدام قائمة الأوامر. في السابق، كان البحث عن الملفات في قائمة الأوامر يعرض ملفات تابعة لجهات خارجية قد لا تكون ذات صلة بك.

على سبيل المثال، فعِّل الإعداد إخفاء المصادر المُدرَجة في القائمة المُهمَلة وانقر على قائمة النقاط الثلاث. انقر على فتح ملف. اكتب "ton" للبحث عن مكوّنات الأزرار. في السابق، كانت النتائج تتضمّن ملفات من node_modules، وكان أحد ملفات node_modules يظهر كأول نتيجة.

إخفاء الملفات المُدرَجة في قائمة التجاهل في قائمة الأوامر

خطأ Chromium: 1336604

تتبُّع "التفاعلات الجديدة" في لوحة "الأداء"

استخدِم مسار التفاعلات الجديد في لوحة الأداء لعرض التفاعلات وتتبُّع المشاكل المحتمَلة في الاستجابة.

على سبيل المثال، يمكنك بدء تسجيل أداء في هذه الصفحة التجريبية. انقر على كوب قهوة وأوقِف التسجيل. يظهر تفاعلان في قناة التفاعلات. يتضمّن كلا التفاعلَين المعرّفات نفسها، ما يشير إلى أنّ التفاعلات قد تمّ بدءها من تفاعل المستخدِم نفسه.

تتبُّع التفاعلات في لوحة "الأداء"

خطأ Chromium: 1347390

تفاصيل أوقات LCP في لوحة "إحصاءات الأداء"

تعرض الآن لوحة إحصاءات الأداء تفاصيل المخططات الزمنية لمقياس سرعة عرض أكبر محتوى مرئي (LCP). استخدِم معلومات التوقيتات هذه لفهم فرصة تحسين أداء مقياس "سرعة عرض أكبر جزء من المحتوى على الصفحة" وتحديدها.

تفاصيل أوقات LCP في لوحة "إحصاءات الأداء"

خطأ Chromium: 1351735

إنشاء اسم تلقائي للتسجيلات في لوحة "المسجّلة الذكية"

تنشئ لوحة المسجِّل الآن اسمًا تلقائيًا للتسجيلات الجديدة.

الاسم التلقائي للتسجيلات في لوحة "المسجّل"

خطأ Chromium: 1351383

لحظات مميّزة متنوعة

  • في السابق، كانت إضافات "المسجّلة الذكية" لا تظهر في لوحة المسجّلة الذكية من حين لآخر. (1351416)
  • تعرض الآن لوحة الأنماط أداة اختيار ألوان لسمة stop-color في عنصر SVG <stop>. (1351096)
  • يمكنك تحديد النصوص البرمجية التي تتسبّب في تغييرات التصميم المفاجئة باعتبارها الأسباب الأساسية المحتمَلة لمتغيّرات التصميم في لوحة إحصاءات الأداء. (1343019)
  • عرض المسار الحرج لخطوط الويب في مقياس LCP في لوحة إحصاءات الأداء (1350390)

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

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

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

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

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

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