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

Jecelyn Yeen

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

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

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

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

خطأ Chromium: 1352488

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

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

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

على سبيل المثال، افتح هذا العرض التجريبي وانقر على زر الزيادة. وسِّع رسالة الخطأ في وحدة التحكّم. في رمز المصدر، تتضمّن العملية عملية 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"

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

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

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