الميزات الجديدة في أدوات مطوّري البرامج (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". مرِّر مؤشر الماوس فوق الخطأ، وسيعرض التلميح الآن رمز الخطأ. في السابق، كانت أدوات مطوّري البرامج تعرض الحالة العامة "(failed)" فقط لأخطاء 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

تحديثات تصحيح أخطاء Wasm

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

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

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

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

مشاكل Chromium: 1058836 و1071432

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

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

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

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

مشكلة في Chromium: 1127914

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

تستخدم "أدوات مطوري البرامج" الآن باستمرار كيلوبايت لعرض أحجام الملفات أو الذاكرة. في السابق، كانت "أدوات مطوري البرامج" مزيجًا من الكيلوبايت (1,000 بايت) كيبيبايت (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"

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

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

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