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

Jecelyn Yeen

أداة تعديل شبكة CSS

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

محرِّر CSS Grid

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

مشكلة Chromium:‏ 1203241

إتاحة إعادة تعريف const في Console

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

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

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

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

const redeclarations

مشكلة Chromium:‏ 1076427

عارض العناصر في الرمز المصدر

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

عارض العناصر في الرمز المصدر

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

مشكلة Chromium:‏ 1094406

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

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

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

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

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

مشكلة Chromium:‏ 1192084

دعم محسَّن لتصحيح أخطاء CORS

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

مشاكل CORS في علامة التبويب "المشاكل"

مشكلة Chromium:‏ 1141824

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

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

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

تصنيف Fetch/XHR

مشكلة Chromium: ‏1201398

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

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

الفلترة حسب Wasm

مشكلة Chromium:‏ 1103638

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

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

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

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

مشكلة Chromium:‏ 1174299

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

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

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

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

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

مشكلة Chromium: 622660

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

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

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

مشكلة Chromium:‏ 1199137

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

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

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

مشكلة Chromium: 772558

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

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

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

مشكلة Chromium:‏ 1203606

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

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

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

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

أداة رصد البروتوكول

مشاكل Chromium:‏ 1204004 و1204466

[ميزة تجريبية] Puppeteer Recorder

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

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

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

Puppeteer Recorder

مشكلة Chromium:‏ 1199787

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

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

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

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

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

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