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

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

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

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

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

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

وهذا يضع الأساس لتحسيناتنا التالية في تقديم وصف أكثر تفصيلاً لمشكلات سياسة مشاركة الموارد المتعددة المصادر (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").

فتح لوحة &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 بايت). على سبيل المثال، استخدمت لوحة "الشبكة" في السابق تسميات "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 للصفحة بشكل أفضل.

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

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

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

مشاكل Chromium: 1144090 و1139945

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

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

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

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

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

مشكلة Chromium: 174309

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

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

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

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

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

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

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

الإصدار 127 من Chrome

الإصدار 126 من Chrome

الإصدار 125 من Chrome

الإصدار 124 من Chrome

الإصدار 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

الإصدار 100 من Chrome

الإصدار 99 من Chrome

الإصدار 98 من Chrome

الإصدار 97 من Chrome

الإصدار 96 من Chrome

الإصدار 95 من Chrome

الإصدار 94 من Chrome

الإصدار 93 من Chrome

الإصدار 92 من Chrome

الإصدار 91 من Chrome

الإصدار 90 من Chrome

الإصدار 89 من Chrome

الإصدار 88 من Chrome

الإصدار 87 من Chrome

الإصدار 86 من Chrome

الإصدار 85 من Chrome

الإصدار 84 من Chrome

الإصدار 83 من Chrome

الإصدار 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

الإصدار 68 من Chrome

الإصدار 67 من Chrome

Chrome 66

الإصدار 65 من Chrome

الإصدار 64 من Chrome

الإصدار 63 من Chrome

الإصدار 62 من Chrome

الإصدار 61 من Chrome

الإصدار 60 من Chrome

الإصدار 59 من Chrome