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

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

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

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

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

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

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

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

المعلومات المشتركة المصدر

مشكلة Chromium: 1139899

معلومات عمال الويب الجدد في عرض تفاصيل الإطار

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

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

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

مشاكل Chromium: 1122507، 1051466

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

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

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

تفاصيل إطار أدوات الفتح

مشكلة Chromium: 1107766

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

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

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

فتح لوحة الشبكة من &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

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

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

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

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

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

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

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

مشاكل Chromium: 1144090، 1139945

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

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

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

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

اختصارات لوحة مفاتيح النغمات الموسيقية

مشكلة Chromium: 174309

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

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

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

يُرجى استخدام الخيارات التالية لمناقشة الميزات والتغييرات الجديدة في المشاركة أو أي موضوع آخر ذي صلة بـ "أدوات مطوري البرامج".

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

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

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

الإصدار 123 من Chrome

الإصدار 122 من Chrome

الإصدار 121 من Chrome

الإصدار 120 من Chrome

الإصدار 119 من متصفِّح Chrome

الإصدار 118 من متصفّح Chrome

الإصدار 117 من Chrome

الإصدار 116 من متصفّح Chrome

الإصدار 115 من متصفّح Chrome

الإصدار 114 من متصفّح Chrome

الإصدار 113 من متصفّح Chrome

الإصدار 112 من Chrome

الإصدار 111 من متصفّح Chrome

الإصدار 110 من متصفّح Chrome

الإصدار 109 من متصفِّح Chrome

الإصدار 108 من متصفِّح Chrome

107 Chrome

الإصدار 106 من متصفّح Chrome

105 Chrome

الإصدار 104 من متصفِّح Chrome

الإصدار 103 من متصفّح Chrome

الإصدار 102 من متصفّح Chrome

الإصدار 101 من متصفّح Chrome

Chrome 100

إصدار Chrome 99

Chrome 98

97 من Chrome

الإصدار 96 من Chrome

Chrome 95

Chrome 94

Chrome 93

الإصدار 92 من Chrome

الإصدار 91 من Chrome

90 Chrome

إصدار Chrome 89

إصدار Chrome 88

الإصدار 87 من Chrome

إصدار 86 من Chrome

الإصدار 85 من Chrome

إصدار 84 من Chrome

إصدار Chrome 83

إصدار 82 من Chrome

تم إلغاء إصدار 82 من Chrome.

إصدار 81 من Chrome

80 Chrome

الإصدار 79 من Chrome

الإصدار 78 من Chrome

الإصدار 77 من Chrome

الإصدار 76 من Chrome

الإصدار 75 من Chrome

الإصدار 74 من Chrome

الإصدار 73 من Chrome

الإصدار 72 من Chrome

الإصدار 71 من Chrome

Chrome 70

إصدار Chrome 68

الإصدار 67 من Chrome

Chrome 66

الإصدار 65 من Chrome

إصدار 64 من Chrome

إصدار 63 من Chrome

إصدار 62 من Chrome

إصدار 61 من Chrome

إصدار 60 من Chrome

الإصدار 59 من Chrome