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

تصحيح الأخطاء المرتبطة بانتهاكات "الأنواع الموثوق بها"

إيقاف مخالفات سياسة "النوع الموثوق به"

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

تساعدك واجهة برمجة التطبيقات Trusted Types في منع ثغرات البرمجة النصية على المواقع الإلكترونية المستندة إلى DOM. اعرف كيف كتابة ومراجعة وصيانة تطبيقات خالية من ثغرات DOM XSS من خلال ميزة "الأنواع الموثوق بها" هنا.

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

مشكلة Chromium: 1142804

مشكلة متعلّقة بالربط في لوحة "المصادر" بعلامة التبويب "المشاكل"

تعرض لوحة المصادر الآن رمز تحذير بجانب السطر الذي ينتهك "النوع الموثوق به". تمرير مؤشر الماوس فوق لمعاينة الاستثناء. انقر عليها لتوسيع علامة التبويب المشاكل التي تعرض المزيد من التفاصيل حول. الاستثناءات والإرشادات حول كيفية إصلاحها.

مشكلة Chromium: 1150883

التقاط لقطة شاشة للعقدة خارج إطار العرض

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

في لوحة العناصر، انقر بزر الماوس الأيمن على أحد العناصر واختَر التقاط لقطة شاشة للعقدة.

مشكلة Chromium: 1003629

علامة التبويب الجديدة للرموز المميّزة الموثوقة لطلبات الشبكة

يمكنك فحص طلبات شبكة الرموز المميّزة Trust Token باستخدام علامة التبويب الجديدة الرموز المميّزة الموثوقة.

Trust Token هي واجهة برمجة تطبيقات جديدة للمساعدة في مكافحة الاحتيال وتمييز برامج التتبُّع عن الأشخاص الحقيقيين بدون استخدام الأدوات السلبية التتبع. تعرَّف على كيفية بدء استخدام الرموز المميّزة Trust Token.

وستتوفّر المزيد من خيارات تصحيح الأخطاء في الإصدارات القادمة.

مشكلة Chromium: 1126824

Lighthouse 7 في لوحة Lighthouse

يتم الآن تشغيل Lighthouse 7 من لوحة Lighthouse. يُرجى الاطّلاع على ملاحظات الإصدار للحصول على قائمة التغييرات.

عمليات التدقيق الجديدة في Lighthouse 7:

• التحميل المُسبق لصورة "سرعة عرض أكبر محتوى مرئي" (LCP): يتم التدقيق في ما إذا كانت الصورة المستخدمة من قِبل عنصر LCP مُحمَّلاً مسبقًا لتحسين وقت سرعة عرض أكبر جزء من المحتوى على الصفحة (LCP).
• المشاكل التي تم تسجيلها في لوحة Issues. يشير هذا الحقل إلى قائمة بالمشاكل التي لم يتم حلّها في Issues. اللوحة.
• تطبيقات الويب التقدّمية (PWA) تغيّرت فئة تطبيقات الويب التقدّمية (PWA) بشكلٍ كبير.

• يتم الآن دعم المجموعة قابلة للتثبيت بالكامل من خلال عمليات التحقق من الإمكانات التي تُمكّن معايير قابلة للتثبيت. وهذه هي الإشارات نفسها التي تظهر في جزء البيان.

  • يشير العمود "تسجيل مشغّل الخدمات..." التدقيق إلى مجموعة PWA المحسّن، و"استخدامات HTTPS" يتم تضمين التدقيق كجزء من "متطلبات قابلية التثبيت" الرئيسية التدقيق.
  • تمت إزالة المجموعة سريعة وموثوقة. مع "متطلبات قابلية التثبيت" المُجدَّدة التدقيق يتضمن التحقق من إمكانية وضع عدم الاتصال بالإنترنت، وتستجيب "الصفحة الحالية وstart_url" بـ 200 عند بلا اتصال بالإنترنت" تمت إزالة عملية التدقيق. الحالة "تحميل الصفحة سريع بما يكفي على شبكة الجوّال" تمت إزالة التدقيق أيضًا.

مشكلة Chromium: 772558

تم تعديل لوحة العناصر.

دعم فرض حالة :target في CSS

يمكنك الآن استخدام "أدوات مطوري البرامج" لفرض حالة :target في CSS وفحصها.

في لوحة العناصر، اختَر عنصرًا وفعِّل حالة العنصر. تفعيل :target مربع اختيار لفرض الأنماط وفحصها.

استخدام الفئة الزائفة ":target" لتحديد نمط العنصر عند استخدام التجزئة في عنوان URL ومعرّف أحد العناصر متطابقة. اطّلِع على هذا العرض التوضيحي لتجربة الميزة بنفسك. تتيح لك هذه الميزة الجديدة في "أدوات مطوري البرامج" اختبار هذه الأنماط بدون الحاجة إلى تغيير عنوان URL يدويًا طوال الوقت.

مشكلة Chromium: 1156628

اختصار جديد لإنشاء نسخة طبق الأصل من العنصر

يمكنك استخدام الاختصار الجديد عنصر مكرّر لنسخ عنصر على الفور.

انقر بزر الماوس الأيمن على عنصر في لوحة العناصر، واختَر عنصر مكرّر. سيبدأ عنصر جديد يتم إنشاؤها تحتها.

يمكنك بدلاً من ذلك إنشاء نسخة طبق الأصل من العنصر باستخدام اختصارات لوحة المفاتيح:

• Mac: Shift + Option + ⬇️
• نافذة/ Linux: Shift + Alt + ⬇️

مشاكل Chromium: 1150797 و1150797

أدوات اختيار الألوان لخصائص CSS المخصَّصة

تعرض لوحة الأنماط الآن منتقي الألوان لخصائص CSS المخصَّصة.

علاوة على ذلك، يمكنك الضغط مع الاستمرار على مفتاح Shift والنقر على "منتقي الألوان" للتنقل بين نماذج RGBA وHSLA والتمثيلات السداسية العشرية لقيمة اللون.

مشكلة Chromium: 1147016

اختصارات جديدة لنسخ خصائص CSS

يمكنك الآن نسخ خصائص CSS بشكل أسرع باستخدام بعض الاختصارات الجديدة.

في لوحة العناصر، اختَر عنصرًا. ثم، انقر بزر الماوس الأيمن على فئة CSS أو خاصية CSS في لوحة الأنماط لنسخ القيمة.

خيارات النسخ لفئة CSS:

• نسخ أداة الاختيار انسخ اسم أداة الاختيار الحالي.
• نسخ القاعدة. انسخ قاعدة أداة الاختيار الحالية.
• نسخ جميع التعريفات: يمكنك نسخ جميع التعريفات بموجب القاعدة الحالية، بما في ذلك التعريفات غير الصالحة ذات بادئة.

نسخ خيارات خاصية CSS:

• نسخ البيان انسخ إعلان السطر الحالي.
• نسخ الموقع. انسخ خاصية السطر الحالي.
• نسخ القيمة: لنسخ قيمة السطر الحالي.

مشكلة Chromium: 1152391

تحديثات ملفات تعريف الارتباط

خيار جديد لعرض ملفات تعريف الارتباط التي تم فك ترميزها لعناوين URL

يمكنك الآن اختيار عرض قيمة ملفات تعريف الارتباط التي تم فك ترميزها من خلال عنوان URL في لوحة ملفات تعريف الارتباط.

انتقِل إلى لوحة التطبيق واختَر لوحة ملفات تعريف الارتباط. اختَر أي ملف تعريف ارتباط في القائمة. فعِّل مربّع الاختيار الجديد عرض عنوان URL المفكوك ترميزه لعرض ملف تعريف الارتباط الذي تم فك ترميزه.

مشكلة Chromium: 997625

محو ملفات تعريف الارتباط المرئية فقط

تم استبدال زر محو جميع ملفات تعريف الارتباط في لوحة "ملفات تعريف الارتباط" بخيار محو ملفات تعريف الارتباط التي تمت فلترتها. .

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

مشكلة Chromium: 978059

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

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

مشكلة Chromium: 1012337

تعديل حقول معلومات الوكيل المستخدم على الأجهزة المخصَّصة

يمكنك الآن تعديل "تلميحات العميل لوكيل المستخدم" على الأجهزة المخصَّصة.

انتقِل إلى الإعدادات >. الأجهزة وانقر على إضافة جهاز مخصّص.... توسيع وكيل المستخدم تعديلات العميل لتعديل حقول معلومات العميل.

"تلميحات عميل وكيل المستخدم" هي بديل لسلسلة وكيل المستخدم التي تتيح للمطوّرين الوصول إلى معلومات عن متصفح المستخدم بطريقة مريحة تحافظ على الخصوصية. مزيد من المعلومات حول حقول معلومات الوكيل المستخدم في web.dev/user-agent-client-hints/.

مشكلة Chromium: 1073909

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

الاستمرار في "تسجيل سجلّ الشبكة" الإعداد

تحتفظ "أدوات مطوّري البرامج" الآن بـ "سجلّ الشبكة" الإعداد. في السابق، كانت أدوات مطوري البرامج تعيد ضبط خيار المستخدم. كلما تمت إعادة تحميل الصفحة.

مشكلة Chromium: 1122580

عرض اتصالات WebTransport في لوحة "الشبكة"

تعرض لوحة الشبكة الآن اتصالات WebTransport.

واجهة برمجة التطبيقات WebTransport هي واجهة برمجة تطبيقات جديدة توفّر المراسلة من خادم العميل في وقت الاستجابة المنخفض وثنائي الاتجاه. مزيد من المعلومات حول حالات الاستخدام وكيفية تقديم الملاحظات حول مستقبل التنفيذ في web.dev/webtransport/.

مشكلة Chromium: 1152290

"على الإنترنت" تمت إعادة تسميتها إلى "بدون تقييد"

خيار محاكاة الشبكة "عبر الإنترنت" تم تغيير تسميته الآن إلى "No Throttling".

مشكلة Chromium: 1028078

خيارات النسخ الجديدة في "وحدة التحكّم" و"لوحة المصادر" و"الأنماط"

اختصارات جديدة لنسخ العنصر في "وحدة التحكّم" و"لوحة المصادر"

يمكنك الآن نسخ قيم العناصر باستخدام الاختصارات الجديدة في وحدة التحكّم ولوحة "المصادر". هذا هو مفيدة خاصةً عندما يكون لديك كائن كبير (على سبيل المثال صفيف طويل) لنسخه.

مشاكل Chromium: 1149859 و1148353

اختصارات جديدة لنسخ اسم الملف في لوحة المصادر وجزء "الأنماط"

يمكنك الآن نسخ اسم الملف بالنقر بزر الماوس الأيمن على:

• ملف في لوحة المصادر
• اسم الملف في جزء الأنماط في لوحة العناصر

اختَر نسخ اسم الملف من قائمة السياقات لنسخ اسم الملف.

مشكلة Chromium: 1155120

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

معلومات "مشغِّلي الخدمات" الجدد في عرض تفاصيل الإطار

تعرض "أدوات مطوري البرامج" الآن عاملي الخدمة المخصّصين ضمن الإطار الذي ينشئهم.

في لوحة التطبيق، وسِّع إطارًا يضم عاملي الخدمة، ثم اختَر عامل خدمة. ضمن شجرة مشغِّلي الخدمات لعرض التفاصيل.

مشكلة Chromium: 1122507

قياس معلومات "الذاكرة" في عرض تفاصيل "الإطار"

تظهر حالة واجهة برمجة التطبيقات performance.measureMemory() الآن ضمن مدى توفُّر واجهة برمجة التطبيقات .

تقدِّر واجهة برمجة التطبيقات performance.measureMemory() الجديدة استخدام الذاكرة لصفحة الويب بأكملها. التعلّم كيفية مراقبة إجمالي استخدام الذاكرة في صفحة الويب باستخدام واجهة برمجة التطبيقات الجديدة هذه في هذه المقالة.

مشكلة Chromium: 1139899

تقديم الملاحظات من علامة تبويب "المشاكل"

إذا أردت تحسين رسالة مشكلة، انتقِل إلى علامة التبويب المشاكل من وحدة التحكّم أو إعدادات إضافية > مزيد من الأدوات > المشاكل > لفتح علامة التبويب المشاكل. توسيع المشكلة وانقر على هل رسالة المشكلة مفيدة لك؟، ثم يمكنك تقديم ملاحظاتك وآرائك النافذة المنبثقة.

الإطارات المسقطة في لوحة الأداء

عند تحليل أداء التحميل في لوحة الأداء، يضع قسم الإطارات الآن علامة وإسقاط الإطارات باللون الأحمر. مرِّر مؤشر الماوس فوقه لمعرفة عدد اللقطات في الثانية.

مشكلة Chromium: 1075865

محاكاة الجهازَين القابلَين للطي والشاشة المزدوجة في "وضع الجهاز"

يمكنك الآن محاكاة الأجهزة القابلة للطي والأجهزة ذات الشاشة المزدوجة في "أدوات مطوّري البرامج".

بعد تفعيل شريط أدوات الجهاز، اختَر أحد هذه الأجهزة: Surface Duo أو Samsung Galaxy Fold:

انقر على رمز التمديد الجديد للتبديل بين وضع "شاشة واحدة" أو وضع "شاشة مطوية" أو وضع "شاشة مزدوجة" أو وضع "العرض غير المطوي". الأوضاع.

يمكنك أيضًا تفعيل ميزات منصة الويب التجريبية للوصول إلى وسائط CSS الجديدة. ميزة screen-spanning وواجهة برمجة تطبيقات JavaScript getWindowSegments. يعرض الرمز التجريبي حالة علامة الميزات التجريبية للنظام الأساسي للويب. يتم تمييز الرمز عندما يتم وضع العلم قيد التشغيل. يُرجى الانتقال إلى chrome://flags وتبديل وضع العلم.

مشكلة Chromium: 1054281

الميزات التجريبية

اختبار المتصفِّح تلقائيًا باستخدام Puppeteer Recorder

أصبح بإمكان "أدوات مطوّري البرامج" إنشاء نصوص برمجية من Puppeteer استنادًا إلى تفاعلك مع المتصفّح، ما سيكون من الأسهل عليك إجراء اختبار تلقائي للمتصفّح. Puppeteer هو مكتبة Node.js توفر واجهة برمجة تطبيقات عالية المستوى للتحكّم في Chrome أو Chromium عبر بروتوكول أدوات مطوّري البرامج

انتقِل إلى صفحة العرض التوضيحي هذه. افتح لوحة المصادر في "أدوات مطوري البرامج". اختَر علامة التبويب التسجيل في الجزء الأيمن. أضِف تسجيلاً جديدًا وأدخِل اسمًا للملف (مثل test01.js).

انقر على الزر تسجيل في أسفل الصفحة لبدء تسجيل التفاعل. حاول ملء الذي يظهر على الشاشة. لاحظ أن أوامر Puppeteer يتم إلحاقها بالملف وفقًا لذلك. انقر على انقر على الزر تسجيل مرة أخرى لإيقاف التسجيل.

لتشغيل النص البرمجي، اتّبِع دليل البدء في الموقع الإلكتروني الرسمي Puppeteer.

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

مشكلة Chromium: 1144127

محرر الخطوط في جزء "Styles" (الأنماط)

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

توفر النافذة المنبثقة واجهة مستخدم نظيفة لمعالجة أسلوب الخط ديناميكيًا من خلال سلسلة من وأنواع الإدخالات.

مشكلة Chromium: 1093229

أدوات تصحيح أخطاء flexbox في CSS

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

تضع "أدوات مطوّري البرامج" الآن خطًا إرشاديًا لمساعدتك في إنشاء تمثيل مرئي لخاصية CSS align-items بشكل أفضل. تشير رسالة الأشكال البيانية يمكن أيضًا استخدام السمة gap في CSS. في المثال هنا، لدينا CSS gap: 12px;. لاحظ للفقس لكل فجوة.

مشكلة Chromium: 1139949

علامة التبويب الجديدة لانتهاكات سياسة CSP

اطّلِع على جميع انتهاكات سياسة أمان المحتوى (CSP) بنظرة سريعة في علامة التبويب انتهاكات سياسة أمان المحتوى (CSP) الجديدة. علامة التبويب الجديدة هذه هي تجربة من شأنها أن تسهِّل التعامل مع صفحات الويب التي تضم قدرًا كبيرًا من البيانات انتهاكات سياسة أمان المحتوى (CSP) وسياسة النوع الموثوق به.

مشكلة Chromium: 1137837

حساب تباين الألوان الجديد - خوارزمية التباين الحسي المتقدمة (APCA)

تحل خوارزمية التباين الحسي المتقدمة (APCA) محل AA/AAA إرشادات نسبة التباين في أداة اختيار الألوان

APCA هي طريقة جديدة لحساب التباين بناءً على الأبحاث الحديثة حول إدراك الألوان. مقارنةً بـ AA/AAA، يعتمد APCA بشكل أكبر على السياق. ويتم حساب التباين بناءً على الخصائص المكانية (سُمك الخط وحجمه)، واللون (الفرق الملحوظ بين النص والخلفية) والسياق (الضوء المحيط والبيئة المحيطة والغرض المقصود من النص).

يوضّح المثال أنّ الحدّ الأدنى لمتطلبات الأهلية في APCA هو 38%. يجب أن تتوافق نسبة التباين مع القيمة المدرَجة أو تتجاوزها. ويتم احتساب هذه القيمة استنادًا إلى سُمك الخط وحجمه، بالإشارة إلى جدول بحث APCA هذا.

مشكلة Chromium: 1121900

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

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

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

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

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

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

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