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

Jecelyn Yeen

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

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

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

باستخدام هذه الميزة، يمكنك بسهولة تصور مسار المستخدِم بالكامل وتصحيح الأخطاء فيه.

راجِع مرجع ميزات أداة التسجيل للحصول على مزيد من المعلومات.

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

مشكلة Chromium: 1257499

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

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

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

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

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

مشكلة Chromium: 1257499

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

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

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

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

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

مشكلة Chromium: 1326481

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

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

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

اطّلِع على تحسين تحميل WebFont وعرضه للتعرّف على التقنية لمنع حدوث تغييرات في التنسيق.

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

مشاكل Chromium: 1334628 و1328873

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

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

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

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

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

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

مشاكل Chromium: 1300613

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

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

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

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

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

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

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

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

مشكلة Chromium: 1313690

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

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

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

ALT_TEXT_HERE

مشكلة Chromium: 1341255

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

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

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

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

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

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

مشكلة Chromium: 1334484

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

يمكنك الآن عرض وتعديل قواعد at-rules في CSS @scope في لوحة الأنماط.

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

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

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

مشكلة في Chromium: 1337777

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

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

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

مشكلة Chromium: 1335338، 1333411

لحظات مميّزة متنوعة

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

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

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

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

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

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

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

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