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

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

إنّ معدل بدء تشغيل "أدوات مطوري البرامج" هو أسرع بنسبة% 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

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

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

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

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

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

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

يضع ذلك الأساس لتحسيناتنا التالية بشأن تقديم وصف أكثر تفصيلاً مشكلات CORS!

مشكلة Chromium: 1141824

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

معلومات حول العزل المشترك المصدر في عرض تفاصيل الإطار

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

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

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

مشكلة Chromium: 1139899

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

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

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

مشاكل Chromium: 1122507 و1051466

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

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

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

مشكلة Chromium: 1107766

فتح لوحة الشبكة من لوحة "مشغّلات الخدمات" (Service Workers)

اعرض كل معلومات توجيه طلبات مشغّل الخدمات (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

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

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

مشكلة Chromium: 1035309

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

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

مشكلة 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

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

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

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

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

مشكلة Chromium: 174309

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

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

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

يمكنك استخدام الخيارات التالية لمناقشة الميزات والتغييرات الجديدة في المشاركة أو مناقشة أي معلومات أخرى متعلّقة بأدوات مطوري البرامج.

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

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

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