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

Jecelyn Yeen

إعادة التشغيل خطوة بخطوة في "المسجّلة الذكية"

يمكنك الآن ضبط نقطة توقّف وإعادة تشغيل خطوة تدفّق المستخدم خطوة بخطوة في لوحة المسجّل.

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

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

لمزيد من المعلومات، يُرجى الاطّلاع على مرجع ميزات "المسجّلة".

إعادة التشغيل خطوة بخطوة في "المسجّلة الذكية"

مشكلة في Chromium: 1257499

إتاحة حدث التمرير فوق العنصر في لوحة "المسجّل"

يتيح لك المسجّل الآن إضافة خطوة التمرير فوق العنصر (التمرير) يدويًا في التسجيل.

يعرض هذا العرض التوضيحي قائمة منبثقة عند التمرير فوقها. حاوِل تسجيل مسار مستخدم وانقر على أحد عناصر القائمة.

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

إتاحة حدث التمرير فوق العنصر في "المسجّلة الذكية"

مشكلة في Chromium: 1257499

مقياس "سرعة عرض أكبر محتوى مرئي" (LCP) في لوحة "إحصاءات الأداء"

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

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

اطّلِع على إحصاءات الأداء لمعرفة كيفية الحصول على إحصاءات قابلة للاستخدام وتحسين أداء موقعك الإلكتروني باستخدام اللوحة.

مقياس Largest Contentful Paint في لوحة "إحصاءات الأداء"

مشكلة في Chromium: 1326481

تحديد ومضات النص (FOIT وFOUT) كأسباب أساسية محتملة لمتغيّرات التصميم

ترصد لوحة إحصاءات الأداء الآن ظهور نص غير مرئي (FOIT) وظهور نص غير منسّق (FOUT) كأسباب أساسية محتملة لمتغيّرات التصميم.

للاطّلاع على الأسباب الأساسية المحتمَلة لمتغيّرات التصميم، انقر على لقطة شاشة في مسار متغيّرات التصميم.

راجِع تحسين تحميل خطوط الويب وعرضها للتعرّف على الأسلوب الذي يمنع حدوث متغيّرات في التصميم.

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

مشاكل Chromium: 1334628 و1328873

معالجات البروتوكول في لوحة "ملف البيان"

يمكنك الآن استخدام "أدوات مطوّري البرامج" لاختبار تسجيل معالج بروتوكول عنوان URL لتطبيقات الويب التقدّمية (PWA).

يتيح تسجيل معالج بروتوكول عنوان URL لتطبيقات الويب التقدّمية المثبَّتة معالجة الروابط التي تستخدم بروتوكولاً معيّنًا (مثل magnet أو web+example) للحصول على تجربة أكثر تكاملاً.

انتقِل إلى قسم معالجات البروتوكول من خلال لوحة التطبيق > ملف البيان. يمكنك الاطّلاع على جميع البروتوكولات المتاحة واختبارها هنا.

على سبيل المثال، ثبِّت تطبيق الويب التقدّمي التجريبي هذا. في قسم معالجات البروتوكول، اكتب "americano" وانقر على اختبار البروتوكول لفتح صفحة القهوة في تطبيق الويب التقدّمي.

معالجات البروتوكول في لوحة "ملف البيان"

مشاكل Chromium: 1300613

شارة الطبقة العلوية في لوحة "العناصر"

استخدِم شارة الطبقة العلوية لفهم مفهوم الطبقة العلوية وتصوُّر كيفية تغيُّر محتوى الطبقة العلوية.

أصبح عنصر <dialog> ثابتًا مؤخرًا على جميع المتصفحات. عند فتح مربّع حوار، يتم وضعه في الطبقة العلوية. يتم عرض المحتوى ذي المستوى الأعلى فوق كل المحتوى الآخر.

في هذا العرض التوضيحي، انقر على فتح مربّع الحوار.

للمساعدة في تصور عناصر الطبقة العلوية، يضيف DevTools حاوية طبقة علوية (#top-layer) إلى شجرة نموذج العناصر في المستند. يجب أن يظهر بعد علامة الإغلاق </html>.

للانتقال من عنصر حاوية الطبقة العلوية إلى عنصر شجرة الطبقة العلوية، انقر على الزر إظهار بجانب العنصر أو خلفيته في حاوية الطبقة العلوية.

بجانب عنصر شجرة الطبقة العلوية (مثل عنصر مربّع الحوار)، انقر على شارة top-layer للانتقال إلى حاوية الطبقة العلوية.

شارة الطبقة العلوية في لوحة &quot;العناصر&quot;

مشكلة في Chromium: 1313690

إرفاق معلومات تصحيح أخطاء Wasm في وقت التشغيل

يمكنك الآن إرفاق معلومات تصحيح الأخطاء الخاصة بـ DWARF لملفات wasm أثناء وقت التشغيل. في السابق، لم تكن لوحة المصادر تتيح سوى إرفاق خرائط المصادر بملفات JavaScript وWasm.

افتح ملف Wasm في لوحة المصادر. انقر بزر الماوس الأيمن في المحرّر واختَر إضافة معلومات تصحيح أخطاء DWARF… لإرفاق معلومات تصحيح الأخطاء عند الطلب.

ALT_TEXT_HERE

مشكلة في Chromium: 1341255

إتاحة التعديل المباشر أثناء تصحيح الأخطاء

يمكنك الآن تعديل الدالة الأعلى في حزمة البيانات بدون إعادة تشغيل أداة تصحيح الأخطاء.

في الإصدار 104 من Chrome، تعيد "أدوات مطوّري البرامج" ميزة إعادة تشغيل الإطار. ومع ذلك، لم تتمكّن من تعديل الدالة التي تم إيقافها مؤقتًا. من الشائع أن يوقف المطوّرون دالة مؤقتًا ثم يعدّلونها.

من خلال هذا التحديث، يعيد مصحّح الأخطاء تشغيل الدالة تلقائيًا مع القيود التالية:

  • يمكن تعديل الدالة ذات المستوى الأعلى فقط أثناء الإيقاف المؤقت
  • عدم استدعاء الدالة نفسها بشكل متكرّر في أسفل حزمة البيانات

التعديل المباشر أثناء تصحيح الأخطاء

مشكلة في Chromium: 1334484

عرض وتعديل @scope في القواعد ضمن لوحة "الأنماط"

يمكنك الآن عرض قواعد CSS @scope @ وتعديلها في جزء الأنماط.

قواعد @scope هي جزء من مواصفات CSS Cascading and Inheritance Level 6. تسمح هذه القواعد للمطوّرين بتحديد نطاق قواعد الأنماط في CSS.

افتح صفحة العرض التوضيحي هذه وافحص الرابط التشعّبي ضمن العنصر <div class=”dark-theme”>. في جزء الأنماط، اطّلِع على قواعد @scope. انقر على تعريف القاعدة لتعديله.

‫@scope في القواعد في لوحة &quot;الأنماط&quot;

مشكلة في Chromium: 1337777

تحسينات على خريطة المصادر

في ما يلي بعض الإصلاحات على خرائط المصدر لتحسين تجربة تصحيح الأخطاء بشكل عام:

  • تعمل "أدوات مطوّري البرامج" الآن على حلّ معرّفات خريطة المصادر التي تتضمّن علامات ترقيم بشكل صحيح. تنتج بعض أدوات التصغير الحديثة (مثل esbuild) خرائط مصدر تدمج المعرّفات مع علامات الترقيم اللاحقة (الفاصلة والأقواس والفاصلة المنقوطة).
  • تعمل "أدوات مطوّري البرامج" الآن على حلّ أسماء خرائط المصادر للدوال الإنشائية من خلال طلب super. ALT_TEXT_HERE
  • تم إصلاح مشكلة فهرسة عناوين URL الأساسية المكرّرة لخرائط المصدر. في السابق، لم يتم تفعيل نقاط التوقف في بعض الملفات بسبب عناوين URL الأساسية المكرّرة.

مشكلة في Chromium: 1335338 و1333411

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

في ما يلي بعض الإصلاحات الجديرة بالذكر في هذا الإصدار:

  • إزالة زوج قيمة مفتاح التخزين المحلي بشكل صحيح من الجدول في جزء التطبيق > التخزين المحلي عند حذفه (1339280)
  • يتم الآن عرض معاينات الألوان بشكل صحيح عند عرض ملفات CSS في لوحة المصادر. في السابق، كانت مواضعها غير صحيحة. (1340062)
  • عرض عناصر CSS المرنة وعناصر الشبكة بشكل متّسق في جزء التصميم، بالإضافة إلى عرضها كشارات في لوحة العناصر في السابق، كانت عناصر flex وgrid غير متوفّرة بشكل عشوائي في كلا الموضعين. (1340441، 1273992)
  • يتوفّر رابط جديد لنصّ إعلان صانع المحتوى لإطارات الإعلانات إذا عثرت "أدوات المطوّرين" على النص البرمجي الذي أدّى إلى تصنيف الإطار على أنّه إعلان. يمكنك فتح إطار من خلال التطبيق > الإطارات. (1217041)

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

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

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

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

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

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