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

Jecelyn Yeen

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

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

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

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

مشكلة Chromium: 1029427

أدوات جديدة لتصور الزوايا في خدمة مقارنة الأسعار (CSS)

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

زاوية CSS

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

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

مشاكل Chromium: 1126178 و1138633

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

أضافت أدوات المطوّرين محاكيَين جديدَين في علامة التبويب "العرض"، ما يتيح لك إيقاف تنسيقَي الصور 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. أصبح عنصر src للصورة الحالية (currentSrc) هو الصورة الاحتياطية بتنسيق WebP.

محاكاة أنواع الصور

مشكلة Chromium: 1130556

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

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

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

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

مشاكل Chromium: 945786 و1146985

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

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

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

يعرض الشريط حاليًا معلومات عن "مؤشرات أداء الويب"، مثل سرعة عرض المحتوى على الصفحة (FCP) سرعة عرض أكبر محتوى مرئي (LCP) ومتغيّرات التصميم التراكمية (LS).

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

مسار &quot;مؤشرات أداء الويب&quot;

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

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

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

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

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

أخطاء سياسة مشاركة الموارد المتعددة المصادر (CORS)

مشكلة Chromium: 1141824

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

معلومات عن عزل عناوين URL التابعة للنطاق نفسه في عرض "تفاصيل الإطار"

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

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

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

معلومات من مصادر متعددة

مشكلة Chromium: 1139899

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

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

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

معلومات عمال الويب

مشاكل Chromium: 1122507 و1051466

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

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

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

تفاصيل إطار نافذة الفتح

مشكلة Chromium: 1107766

فتح لوحة "الشبكة" من لوحة "خدمات العمال"

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

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

فتح لوحة &quot;الشبكة&quot; من &quot;عمال الخدمة&quot;

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

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

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

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

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

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

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

مشكلة Chromium: 1132084

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

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

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

مشكلة Chromium: 1139615

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

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

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

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

معاينة متغيّر Wasm عند تمرير مؤشر الماوس

مشاكل Chromium: 1058836 و1071432

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

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

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

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

مشكلة Chromium: 1127914

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

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

مشكلة Chromium: 1035309

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

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

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

مشكلة Chromium: 1143833

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

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

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

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

بالإضافة إلى ذلك، تمت إضافة رموز محاذاة جديدة في سمات المربّع المرن التالية:

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

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

  • flex-direction
  • direction
  • writing-mode

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

تصحيح أخطاء CSS Flex

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

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

مشاكل Chromium: 1144090 و1139945

تخصيص اختصارات لوحة المفاتيح للأوتار

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

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

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

اختصارات لوحة المفاتيح للأوتار

مشكلة Chromium: 174309

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

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

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

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

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

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