الميزات الجديدة في أدوات مطوّري البرامج (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 الجديدة في خرائط المصدر. يجب أن توفِّر أُطر العمل وبرامج الحِزم هذه المعلومات. يُرجى الاطّلاع على دراسة الحالة: Better Angular Debugging باستخدام "أدوات مطوّري البرامج".

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

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

خطأ في 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.

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

خطأ في Chromium: 1351735

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

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

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

خطأ في Chromium: 1351383

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

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

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

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

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

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

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

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

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

الإصدار 127 من Chrome

الإصدار 126 من Chrome

الإصدار 125 من Chrome

الإصدار 124 من Chrome

الإصدار 123 من Chrome

الإصدار 122 من Chrome

الإصدار 121 من Chrome

الإصدار 120 من Chrome

الإصدار 119 من Chrome

الإصدار 118 من Chrome

الإصدار 117 من Chrome

الإصدار 116 من Chrome

الإصدار 115 من Chrome

الإصدار 114 من Chrome

الإصدار 113 من Chrome

الإصدار 112 من Chrome

الإصدار 111 من Chrome

الإصدار 110 من Chrome

الإصدار 109 من Chrome

الإصدار 108 من Chrome

الإصدار 107 من Chrome

الإصدار 106 من Chrome

الإصدار 105 من Chrome

الإصدار 104 من Chrome

الإصدار 103 من Chrome

الإصدار 102 من Chrome

الإصدار 101 من Chrome

الإصدار 100 من Chrome

الإصدار 99 من Chrome

الإصدار 98 من Chrome

الإصدار 97 من Chrome

الإصدار 96 من Chrome

الإصدار 95 من Chrome

الإصدار 94 من Chrome

الإصدار 93 من Chrome

الإصدار 92 من Chrome

الإصدار 91 من Chrome

الإصدار 90 من Chrome

الإصدار 89 من Chrome

الإصدار 88 من Chrome

الإصدار 87 من Chrome

الإصدار 86 من Chrome

الإصدار 85 من Chrome

الإصدار 84 من Chrome

الإصدار 83 من Chrome

الإصدار 82 من Chrome

تم إلغاء الإصدار 82 من Chrome.

الإصدار 81 من Chrome

الإصدار 80 من Chrome

الإصدار 79 من Chrome

الإصدار 78 من Chrome

الإصدار 77 من Chrome

الإصدار 76 من Chrome

الإصدار 75 من Chrome

الإصدار 74 من Chrome

الإصدار 73 من Chrome

الإصدار 72 من Chrome

الإصدار 71 من Chrome

Chrome 70

الإصدار 68 من Chrome

الإصدار 67 من Chrome

Chrome 66

الإصدار 65 من Chrome

الإصدار 64 من Chrome

الإصدار 63 من Chrome

الإصدار 62 من Chrome

الإصدار 61 من Chrome

الإصدار 60 من Chrome

الإصدار 59 من Chrome