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

محرّر شبكة CSS

ميزة مطلوبة كثيرًا. يمكنك الآن معاينة CSS Grid وتأليفها باستخدام محرر CSS Grid الجديد!

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

مشكلة Chromium: 1203241

إتاحة عمليات إعادة بيان const في Console

تتيح وحدة التحكّم الآن إعادة بيان عبارة const، بالإضافة إلى بيان إعادة الإفصاح الحاليَين حول let وclass. كانت عدم القدرة على الإفصاح عن المحتوى الجديد مصدر إزعاج شائع لمطوِّري الويب الذين يستخدمون Console لتجربة رمز 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 إلى Fetch/XHR

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

مشكلة Chromium: 1201398

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

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

مشكلة Chromium: 1103638

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

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

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

مشكلة Chromium: 1174299

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

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

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

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

مشكلة Chromium: 622660

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

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

مشكلة Chromium: 1199137

Lighthouse 7.5 في لوحة Lighthouse

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

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

مشكلة Chromium: 772558

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

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

مشكلة Chromium: 1203606

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

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

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

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

مشاكل Chromium: 1204004 و1204466

[ميزة تجريبية] مسجّل الدُمى

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

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

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

مشكلة Chromium: 1199787

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

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

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

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

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

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

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