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

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

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

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

تجميع الملفات حسب ما إذا كانت مؤلّفة أو تم نشرها

خطأ Chromium: 1352488

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

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

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

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

// application.component.ts

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

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

مع آخر التغييرات، تُظهر "أدوات مطوري البرامج" الآن أنّ العملية بدأت من الحدث onClick في مكوّن الزرّ، ثم دالة increment، متبوعةً بعملية المهلة.

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

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

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

خطأ في Chromium: 1334585

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

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

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

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

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

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

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

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

خطأ في Chromium: 1323199

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

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

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

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

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

خطأ Chromium: 1352488

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

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

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

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

خطأ Chromium: 1352488

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

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

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

خطأ في Chromium: 1336604

مسار "التفاعلات" الجديد في لوحة الأداء

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

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

مسار التفاعلات في لوحة الأداء

خطأ في Chromium: 1347390

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

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

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

خطأ في Chromium: 1351735

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

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

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

خطأ في Chromium: 1351383

معلومات متنوعة

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

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

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

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

يمكنك استخدام الخيارات التالية لمناقشة الميزات والتغييرات الجديدة في المشاركة أو مناقشة أي معلومات أخرى متعلّقة بأدوات مطوري البرامج.

  • يمكنك إرسال اقتراح أو ملاحظات إلينا عبر crbug.com.
  • الإبلاغ عن مشكلة في "أدوات مطوري البرامج" باستخدام خيارات إضافية   المزيد > مساعدة > الإبلاغ عن مشاكل في "أدوات مطوري البرامج" في "أدوات مطوري البرامج"
  • يمكنك نشر تغريدة على @ChromeDevTools.
  • شارِك في التعليقات على الميزات الجديدة في فيديوهات YouTube أو نصائح حول أدوات مطوّري البرامج فيديوهات YouTube.

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

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