الميزات الجديدة في أدوات مطوّري البرامج (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" محاكاتَين جديدتَين في علامة التبويب Rendering (العرض)، ما يتيح لك إيقاف تنسيقات صور 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 في لوحة "الأداء" للاطّلاع على مسار 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) أثناء الإيقاف المؤقت عند نقطة توقّف، تعرض "أدوات مطوّري البرامج" الآن القيمة الحالية للمتغيّر.

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

مشاكل Chromium: 1058836 و1071432

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

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

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

مشكلة في Chromium: 1127914

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

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

مشكلة في 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 أو قناة مطوّري البرامج أو القناة التجريبية كمتصفّح تطوير تلقائي. تتيح لك قنوات المعاينة هذه الوصول إلى أحدث ميزات DevTools، وتتيح لك اختبار أحدث واجهات برمجة التطبيقات لمنصة الويب، وتساعدك في العثور على المشاكل في موقعك الإلكتروني قبل أن يواجهها المستخدمون.

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

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

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

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

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