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

Jecelyn Yeen

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

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

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

تجميع الملفات حسب المؤلّف / المنشور

خطأ في Chromium: 1352488

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

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

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

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

// application.component.ts

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

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

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

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

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

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

خطأ في Chromium: 1334585

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

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

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

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

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

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

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

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

خطأ في Chromium: 1323199

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

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

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

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

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

خطأ في Chromium: 1352488

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

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

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

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

خطأ في Chromium: 1352488

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

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

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

خطأ في Chromium: 1336604

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

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

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

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

خطأ في Chromium: 1347390

تفاصيل توقيتات سرعة عرض أكبر جزء من المحتوى على الصفحة في لوحة "إحصاءات الأداء"

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

تفاصيل توقيتات سرعة عرض أكبر جزء من المحتوى على الصفحة في لوحة "إحصاءات الأداء"

خطأ في Chromium: 1351735

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

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

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

خطأ في Chromium: 1351383

ميزات متنوعة

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

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

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

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

يُرجى استخدام الخيارات التالية لمناقشة الميزات والتغييرات الجديدة في المشاركة أو أي موضوع آخر ذي صلة بـ "أدوات مطوري البرامج".

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

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

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

الإصدار 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

Chrome 100

إصدار Chrome 99

Chrome 98

97 من Chrome

الإصدار 96 من Chrome

Chrome 95

Chrome 94

Chrome 93

الإصدار 92 من Chrome

الإصدار 91 من Chrome

90 Chrome

إصدار Chrome 89

إصدار Chrome 88

الإصدار 87 من Chrome

إصدار 86 من Chrome

الإصدار 85 من Chrome

إصدار 84 من Chrome

إصدار Chrome 83

إصدار 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

إصدار Chrome 68

الإصدار 67 من Chrome

Chrome 66

الإصدار 65 من Chrome

إصدار 64 من Chrome

إصدار 63 من Chrome

إصدار 62 من Chrome

إصدار 61 من Chrome

إصدار 60 من Chrome

الإصدار 59 من Chrome