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

Jecelyn Yeen

بدء تشغيل "أدوات مطوّري البرامج" بشكل أسرع

أصبح بدء تشغيل "أدوات مطوّري البرامج" أسرع بنسبة% 37 تقريبًا من حيث تجميع JavaScript (من 6.9 ثانية إلى 5 ثوانٍ). 🎉

أجرى الفريق بعض التحسينات لتقليل الحمل الزائد للأداء الناتج عن التسلسل والتحليل والتسلسل العكسي أثناء بدء التشغيل.

سيتوفّر قريبًا منشور في مدوّنة الهندسة يشرح عملية التنفيذ بالتفصيل. يُرجى متابعة أخبارنا باستمرار.

مشكلة في Chromium: 1029427

أدوات جديدة لتصوّر زوايا CSS

توفّر "أدوات مطوّري البرامج" الآن دعمًا أفضل لتصحيح أخطاء زوايا CSS.

عندما يتم تطبيق زاوية CSS على عنصر HTML في صفحتك (مثل background: linear-gradient(angle, color-stop1, color-stop2) أو transform: rotate(angle))، سيظهر رمز ساعة بجانب الزاوية في لوحة "الأنماط". انقر على رمز الساعة لتبديل عرض الساعة على الشاشة. انقر في أي مكان في الساعة أو اسحب العقرب لتغيير الزاوية.

تتوفّر أيضًا اختصارات الماوس ولوحة المفاتيح لتغيير قيمة الزاوية، ويمكنك الاطّلاع على المستندات لمعرفة المزيد.

مشاكل Chromium: ‏ 1126178 و1138633

محاكاة أنواع الصور غير المتوافقة

أضافت "أدوات مطوّري Chrome" محاكاتَين جديدتَين في علامة التبويب "العرض"، ما يتيح لك إيقاف تنسيقات صور AVIF وWebP. تسهّل عمليات المحاكاة الجديدة هذه على المطوّرين اختبار سيناريوهات مختلفة لتحميل الصور بدون الحاجة إلى التبديل بين المتصفحات.

لنفترض أنّ لدينا رمز HTML التالي لعرض صورة بتنسيق AVIF وWebP للمتصفحات الأحدث، مع صورة PNG احتياطية للمتصفحات القديمة.

<picture>
  <source srcset="test.avif" type="image/avif">
  <source srcset="test.webp" type="image/webp">
  <img src="test.png" alt="A test image">
</picture>

افتح علامة التبويب العرض، واختَر "إيقاف تنسيق صور AVIF" وأعِد تحميل الصفحة. مرِّر مؤشر الماوس فوق الرمز img src. إنّ مصدر الصورة الحالي (currentSrc) هو الآن صورة WebP الاحتياطية.

مشكلة في Chromium: 1130556

محاكاة حجم مساحة التخزين في لوحة "التخزين"

يمكنك الآن تجاهل حجم حصة التخزين في لوحة "التخزين". تتيح لك هذه الميزة محاكاة أجهزة مختلفة واختبار سلوك تطبيقاتك في سيناريوهات انخفاض مساحة التخزين المتاحة.

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

مشاكل Chromium: 945786 و1146985

مسار جديد لمؤشرات Web Vitals في تسجيلات "لوحة الأداء"

تتضمّن تسجيلات الأداء الآن خيارًا لعرض معلومات حول مؤشرات Web Vitals.

بعد تسجيل أداء التحميل، ضَع علامة في مربّع الاختيار مؤشرات أداء الويب في لوحة "الأداء" للاطّلاع على مسار "مؤشرات أداء الويب" الجديد.

تعرض اللوحة حاليًا معلومات Web Vitals، مثل سرعة عرض المحتوى على الصفحة (FCP) وسرعة عرض أكبر جزء من المحتوى على الصفحة (LCP) وتغيّر التصميم (LS).

يمكنك الاطّلاع على web.dev/vitals لمعرفة المزيد حول كيفية تحسين تجربة المستخدم باستخدام مقاييس Web Vitals.

مشكلة في Chromium: لا ينطبق

الإبلاغ عن أخطاء CORS في "لوحة الشبكة"

تعرض "أدوات مطوّري البرامج" الآن خطأ CORS عندما يتعذّر تنفيذ طلب شبكة بسبب مشاركة الموارد المتعدّدة المصادر (CORS).

في لوحة الشبكة، راقِب طلب شبكة CORS الذي تعذّر تنفيذه. يعرض عمود الحالة "خطأ CORS". مرِّر مؤشر الماوس فوق الخطأ، وستعرض تلميحة الأدوات الآن رمز الخطأ. في السابق، كانت "أدوات مطوّري البرامج" تعرض فقط الحالة العامة "(تعذّر)" لأخطاء CORS.

يشكّل هذا التحديث الأساس لتحسيناتنا التالية التي تهدف إلى تقديم وصف أكثر تفصيلاً لمشاكل CORS.

مشكلة في Chromium: 1141824

تعديلات على طريقة عرض تفاصيل الإطار

معلومات حول حظر الوصول من نطاقات آخرى في عرض "تفاصيل الإطار"

تظهر الآن حالة "يحظر الوصول من نطاقات أخرى" ضمن قسم الأمان والعزل.

يعرض قسم مدى توفّر واجهة برمجة التطبيقات مدى توفّر SharedArrayBuffer (SAB) وما إذا كان يمكن مشاركتها باستخدام postMessage().

سيظهر تحذير بشأن الإيقاف النهائي إذا كانت SAB وpostMessage() متاحتَين حاليًا، ولكن السياق لا يعزل الموارد المشتركة المصدر. يمكنك الاطّلاع على مزيد من المعلومات حول حظر الوصول من نطاقات أخرى وسبب ضرورة توفّره لميزات مثل SharedArrayBuffers في هذه المقالة.

مشكلة في Chromium: 1139899

معلومات جديدة عن Web Workers في عرض "تفاصيل الإطار"

تعرض "أدوات مطوّري البرامج" الآن عوامل تشغيل الويب المخصّصة ضمن الإطار الذي ينشئها.

في لوحة التطبيق، وسِّع إطارًا يتضمّن برامج عاملة على الويب، ثم اختَر برنامجًا عاملاً ضمن شجرة البرامج العاملة لعرض تفاصيل البرنامج العامل على الويب.

مشاكل Chromium: 1122507 و1051466

عرض تفاصيل إطار النافذة التي فتحت نوافذ أخرى

يمكنك الآن الاطّلاع على تفاصيل الإطار الذي تسبّب في فتح نافذة أخرى.

اختَر نافذة مفتوحة ضمن شجرة الإطارات لعرض تفاصيل النافذة. انقر على الرابط إطار النافذة الأصلية لعرض النافذة الأصلية في لوحة "العناصر".

مشكلة في Chromium: 1107766

فتح لوحة "الشبكة" من جزء "برامج الخدمة"

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

انتقِل إلى التطبيق > برامج الخدمة، وانقر على طلبات الشبكة لأحد برامج الخدمة. يتم فتح لوحة الشبكة في اللوحة السفلية التي تعرض جميع الطلبات ذات الصلة ببرنامج عامل الخدمة (يتم فلترة طلبات الشبكة حسب "is:service-worker-intercepted").

مشكلة في Chromium: لا ينطبق

خيارات نسخ جديدة في "لوحة الشبكة"

نسخ قيمة السمة

يتيح لك الخيار الجديد "نسخ القيمة" في قائمة السياق نسخ قيمة السمة لطلب شبكة.

في لوحة الشبكة، انقر على طلب شبكة لفتح لوحة العناوين. انقر بزر الماوس الأيمن على إحدى السمات ضمن الأقسام التالية: حمولة الطلب (JSON) وبيانات النموذج ومَعلمات سلسلة طلب البحث وعناوين الطلبات وعناوين الردود.

بعد ذلك، يمكنك اختيار نسخ القيمة لنسخ قيمة السمة إلى الحافظة.

مشكلة في Chromium: 1132084

نسخ تتبُّع تسلسل استدعاء الدوال البرمجية لبادئ التشغيل على الشبكة

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

مشكلة في Chromium: 1139615

تعديلات على تصحيح أخطاء Wasm

معاينة قيمة متغيّر Wasm عند التمرير بالماوس

عند تمرير مؤشر الماوس فوق متغيّر في تفكيك WebAssembly (Wasm) أثناء الإيقاف المؤقت عند نقطة توقّف، تعرض "أدوات مطوّري Chrome" الآن القيمة الحالية للمتغيّر.

في لوحة المصادر، افتح ملف Wasm، وضَع نقطة توقّف وأعِد تحميل الصفحة. مرِّر مؤشر الماوس فوق متغيّر لعرض القيمة.

مشاكل Chromium: 1058836 و1071432

تقييم متغيّر Wasm في "وحدة التحكّم"

يمكنك الآن تقييم متغيّر Wasm في "وحدة التحكّم" أثناء الإيقاف المؤقت عند نقطة توقّف.

في هذا المثال، وضعنا نقطة توقّف على السطر local.get $input. عند تصحيح الأخطاء، سيؤدي كتابة $input في "وحدة التحكّم" إلى عرض القيمة الحالية للمتغيّر، وهي 4 في هذه الحالة.

مشكلة في Chromium: 1127914

وحدات قياس متّسقة لأحجام الملفات/الذاكرة

تستخدم "أدوات مطوّري البرامج" الآن وحدة كيلوبايت بشكل متّسق لعرض أحجام الملفات/الذاكرة. في السابق، كانت "أدوات مطوّري البرامج" تخلط بين الكيلوبايت (1000 بايت) والكيبيبايت (1024 بايت). على سبيل المثال، كانت لوحة "الشبكة" تستخدم سابقًا تصنيفات "كيلوبايت"، ولكنها كانت في الواقع تجري العمليات الحسابية باستخدام "كيلوبايت ثنائي"، ما تسبّب في حدوث لبس لا داعي له.

مشكلة في Chromium: 1035309

تمييز العناصر الزائفة في لوحة "العناصر"

زادت أداة DevTools من تباين الألوان في العناصر الزائفة لمساعدتك في رصدها بشكل أفضل.

مشكلة في Chromium: 1143833

الميزات التجريبية

أدوات تصحيح الأخطاء في CSS Flexbox

ستتوفّر قريبًا أدوات لتصحيح أخطاء Flexbox

في البداية، تعرض "أدوات مطوّري البرامج" الآن شارة flex في لوحة "العناصر" للعناصر التي تم تطبيق display: flex عليها.

بالإضافة إلى ذلك، تمت إضافة رموز محاذاة جديدة في خصائص flexbox التالية:

• flex-direction
• align-items
• align-content
• align-self
• justify-items
• justify-content

بالإضافة إلى ذلك، تتوافق هذه الرموز مع السياق. سيتم ضبط اتجاه الأيقونة وفقًا لما يلي:

• flex-direction
• direction
• writing-mode

تهدف هذه الرموز إلى مساعدتك في تصور تخطيط flexbox للصفحة بشكل أفضل.

إليك مستند التصميم الخاص بميزات أدوات Flexbox. ستتم إضافة المزيد من الميزات قريبًا.

ننصحك بتجربتها وإعلامنا برأيك.

مشاكل Chromium: 1144090 و1139945

تخصيص اختصارات لوحة المفاتيح التي تتضمّن مفاتيح متزامنة

أضافت "أدوات مطوّري Chrome" دعمًا تجريبيًا لتخصيص اختصارات لوحة المفاتيح منذ الإصدار الأخير.

يمكنك الآن إنشاء اختصارات تتضمّن نقرات متعددة على المفاتيح في أداة تعديل الاختصارات.

انتقِل إلى الإعدادات > اختصارات، ثم مرِّر مؤشر الماوس فوق أحد الأوامر وانقر على الزر تعديل (رمز القلم الرصاص) لتخصيص اختصار المفاتيح.

مشكلة في Chromium: 174309

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

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

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

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

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

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

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