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

Jecelyn Yeen

محرّر شبكة CSS

هذه ميزة مطلوبة كثيرًا. يمكنك الآن معاينة شبكة CSS وإنشاؤها باستخدام محرِّر شبكة CSS الجديد.

عندما يتم تطبيق display: grid أو display: inline-grid على عنصر HTML في صفحتك، سيظهر رمز بجانبه في لوحة "الأنماط". انقر على الرمز لتبديل أداة تعديل شبكة CSS. يمكنك هنا معاينة التغييرات المحتملة باستخدام الرموز الظاهرة على الشاشة (مثل justify-content: space-around) وتحديد شكل الشبكة بنقرة واحدة فقط.

مشكلة في Chromium: 1203241

إتاحة عمليات إعادة التصريح عن const في وحدة التحكّم

تتيح "وحدة التحكّم" الآن إعادة تعريف عبارة const، بالإضافة إلى عمليات إعادة التعريف الحالية let وclass. كان عدم القدرة على إعادة التعريف مصدر إزعاج شائع لمطوّري الويب الذين يستخدمون "وحدة التحكّم" لتجربة رموز JavaScript جديدة.

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

يُرجى الاطّلاع على المثال أدناه. يتوفّر const إعادة تعريف في نصوص REPL البرمجية المنفصلة (راجِع المتغيّر a). يُرجى العِلم أنّ السيناريوهات التالية غير متاحة بحسب التصميم:

• لا يُسمح بإعادة تعريف نصوص الصفحات البرمجية في نصوص REPL البرمجيةconst
• لا يُسمح بإعادة تعريف const ضمن نص REPL البرمجي نفسه (يُرجى الرجوع إلى المتغيّر b)

مشكلة في Chromium: 1076427

أداة عرض ترتيب العناصر في المصدر

يمكنك الآن الاطّلاع على ترتيب عناصر المصدر على الشاشة لتسهيل فحص إمكانية الوصول.

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

مشكلة في Chromium: 1094406

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

يمكنك عرض تفاصيل iframe من خلال النقر بزرّ الماوس الأيمن على عنصر iframe في لوحة "العناصر" واختيار عرض تفاصيل الإطار.

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

مشكلة في Chromium: 1192084

إتاحة تصحيح الأخطاء المحسَّن في CORS

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

مشكلة في Chromium: 1141824

تعديلات على "لوحة الشبكة"

إعادة تسمية تصنيف XHR إلى Fetch/XHR

تمت إعادة تسمية تصنيف XHR إلى Fetch/XHR. يوضّح هذا التغيير أنّ الفلتر يتضمّن طلبات الشبكة لكلّ من XMLHttpRequest وFetch API.

مشكلة في Chromium: 1201398

فلترة نوع موارد Wasm في "لوحة الشبكة"

يمكنك الآن النقر على زر Wasm الجديد لفلترة طلبات شبكة Wasm.

مشكلة في Chromium: 1103638

حقول معلومات العميل لوكيل المستخدم للأجهزة في علامة التبويب "حالات الشبكة"

يتم الآن تطبيق حقول معلومات العميل لوكيل المستخدم على الأجهزة في حقل وكيل المستخدم ضمن علامة التبويب ظروف الشبكة.

"حقول معلومات الوكيل المستخدم" هي إضافة جديدة إلى Client Hints API، تتيح للمطوّرين الوصول إلى معلومات حول متصفّح المستخدم بطريقة مريحة تحافظ على الخصوصية.

مشكلة في Chromium: 1174299

الإبلاغ عن مشاكل وضع Quirks في علامة التبويب "المشاكل"

تُبلغ "أدوات مطوّري البرامج" الآن عن المشاكل في وضع التوافق ووضع التوافق المحدود.

وضع Quirks ووضع Limited-quirks هما وضعان قديمان للمتصفّح يعودان إلى ما قبل وضع معايير الويب. تحاكي هذه الأوضاع سلوكيات التنسيق في الفترة السابقة لظهور المعايير، ما يؤدي غالبًا إلى تأثيرات مرئية غير متوقّعة.

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

مشكلة في Chromium: 622660

تضمين "حساب عمليات التقاطع" في "لوحة الأداء"

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

مشكلة في Chromium: 1199137

الإصدار 7.5 من Lighthouse في لوحة Lighthouse

تعمل لوحة Lighthouse الآن بالإصدار 7.5 من Lighthouse. تمت الآن إزالة التحذير "العرض والارتفاع غير محدّدين بشكل واضح" للصور التي تم تحديد aspect-ratio لها في CSS. في السابق، كان Lighthouse يعرض تحذيرات للصور التي لم يتم تحديد عرضها وارتفاعها.

يمكنك الاطّلاع على ملاحظات الإصدار للحصول على قائمة كاملة بالتغييرات.

مشكلة في Chromium: 772558

إيقاف قائمة السياق "إعادة تشغيل الإطار" نهائيًا في حزمة طلبات البيانات من الخادم

تم إيقاف الخيار إعادة تشغيل الإطار نهائيًا. تتطلّب هذه الميزة المزيد من التطوير لتعمل بشكل جيد، وهي لا تعمل حاليًا وتتعطّل غالبًا.

مشكلة في Chromium: 1203606

[تجريبية] أداة رصد البروتوكول

تستخدم "أدوات مطوّري البرامج في Chrome" بروتوكول أدوات مطوّري البرامج في Chrome (CDP) لتسجيل متصفّحات Chrome وفحصها وتصحيح أخطائها وإنشاء ملفات تعريف لها. توفّر لك أداة مراقبة البروتوكول طريقة لعرض جميع طلبات وبروتوكولات CDP التي تم إجراؤها بواسطة "أدوات مطوّري Chrome".

تمت إضافة وظيفتَين جديدتَين لتسهيل اختبار CDP:

• يتيح لك زر حفظ الجديد تنزيل الرسائل المسجّلة كملف JSON
• حقل جديد يتيح لك إرسال أمر CDP أولي مباشرةً

مشاكل Chromium: 1204004 و1204466

[ميزة تجريبية] أداة تسجيل Puppeteer

تُنشئ أداة التسجيل في Puppeteer الآن قائمة بالخطوات استنادًا إلى تفاعلك مع المتصفّح، بينما كانت "أدوات مطوّري Chrome" تنشئ نصًا برمجيًا في Puppeteer مباشرةً في السابق. تمت إضافة زر تصدير جديد للسماح لك بتصدير الخطوات كبرنامج نصي في Puppeteer.

بعد تسجيل الخطوات، يمكنك استخدام الزر الجديد إعادة التشغيل لإعادة تشغيلها. اتّبِع التعليمات هنا لمعرفة كيفية بدء التسجيل.

يُرجى العِلم أنّ هذه تجربة في مراحلها الأولى. نخطّط لتحسين وظائف تطبيق "المسجّلة الذكية" وتوسيع نطاقها بمرور الوقت.

مشكلة في Chromium: 1199787

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

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

التواصل مع فريق Chrome DevTools

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

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

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

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