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

Jecelyn Yeen

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

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

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

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

خطأ في Chromium: 1352488

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

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

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

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

// application.component.ts

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

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

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

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

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

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

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

خطأ في Chromium: 1352488

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

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

افتح هذا العرض التوضيحي. في لوحة المصادر 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)
  • عرض المسار الحرج لخطوط الويب الخاصة بمقياس "سرعة عرض أكبر محتوى مرئي" في لوحة إحصاءات الأداء (1350390)

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

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

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

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

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

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