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

محرِّر شبكة 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). يُرجى العِلم أنّ السيناريوهات التالية غير متاحة من حيث التصميم:

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

مشكلة Chromium: 1076427

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

يمكنك الآن عرض ترتيب عناصر المصدر على الشاشة لفحص تسهيل الاستخدام بشكل أفضل.

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

مشكلة Chromium: 1094406

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

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

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

مشكلة Chromium: 1192084

تحسين ميزة تصحيح أخطاء CORS

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

مشكلة Chromium: 1141824

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

إعادة تسمية تصنيف XHR إلى "الاسترجاع/طلبات XHR"

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

مشكلة Chromium: 1201398

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

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

رقم مشكلة Chromium: 1103638

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

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

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

مشكلة Chromium: 1174299

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

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

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

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

مشكلة Chromium: 622660

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

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

مشكلة Chromium: 1199137

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

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

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

مشكلة Chromium: 772558

قائمة سياق "إعادة تشغيل الإطار" المتوقّفة نهائيًا في تسلسل استدعاء الدوال البرمجية

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

مشكلة Chromium: 1203606

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

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

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

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

مشاكل Chromium: 1204004 و1204466

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

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

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

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

مشكلة Chromium: 1199787

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

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

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

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

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

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

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