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

Jecelyn Yeen

إتاحة تصحيح الأخطاء لانتهاكات Trusted Types

نقطة توقّف عند انتهاكات Trusted Type

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

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

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

نقطة توقّف عند انتهاكات Trusted Type

مشكلة Chromium: 1142804

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

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

مشكلة Chromium: 1150883

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

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

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

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

مشكلة Chromium: 1003629

علامة تبويب جديدة لـ Trust Tokens لطلبات الشبكة

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

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

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

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

مشكلة Chromium: 1126824

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

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

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

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

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

  • أصبحت مجموعة قابلة للتثبيت الآن مستندة بالكامل إلى عمليات التحقّق من الإمكانات التي تفعّل معايير Chrome للتثبيت. هذه هي الإشارات نفسها التي تظهر في لوحة البيان.

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

مشكلة Chromium: 772558

تعديلات على لوحة "العناصر"

السماح بفرض حالة CSS :target

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

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

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

فرض حالة CSS `:target`

مشكلة Chromium: 1156628

اختصار جديد لتكرار العنصر

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

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

يمكنك بدلاً من ذلك تكرار العنصر باستخدام اختصارات لوحة المفاتيح:

  • نظام التشغيل Mac: Shift + Option + ⬇️
  • نظام التشغيل Windows/ Linux: Shift + Alt + ⬇️

العنصر مكرَّر.

مشاكل Chromium: 1150797 و1150797

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

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

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

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

مشكلة Chromium: 1147016

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

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

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

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

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

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

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

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

مشكلة Chromium: 1152391

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

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

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

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

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

مشكلة Chromium: 997625

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

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

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

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

مشكلة في Chromium: ‏ 978059

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

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

خيار محو ملفات تعريف الارتباط التابعة لجهات خارجية

مشكلة في Chromium: ‏ 1012337

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

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

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

تعديل تعديلات برنامج وكيل المستخدم

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

مشكلة Chromium: 1073909

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

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

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

تسجيل سجلّ الشبكة

مشكلة Chromium: 1122580

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

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

عمليات ربط WebTransport

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

مشكلة Chromium: 1152290

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

تم تغيير اسم خيار محاكاة الشبكة "على الإنترنت" إلى "بدون تقييد".

تسجيل سجلّ الشبكة

مشكلة Chromium: 1028078

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

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

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

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

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

مشاكل Chromium: 1149859 و1148353

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

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

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

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

نسخ اسم الملف في لوحة "المصادر"

نسخ اسم الملف في لوحة "الأنماط"

مشكلة Chromium: 1155120

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

معلومات جديدة عن Service Workers في عرض تفاصيل الإطار

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

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

معلومات Service Workers في عرض تفاصيل الإطار

مشكلة Chromium: 1122507

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

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

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

قياس الذاكرة

مشكلة Chromium: 1139899

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

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

رابط الملاحظات بشأن المشكلة

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

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

الإطارات التي تم إسقاطها

مشكلة Chromium: 1075865

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

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

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

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

يمكنك أيضًا تفعيل ميزات Web Platform التجريبية للوصول إلى ميزة CSS media screen-spanning الجديدة وواجهة برمجة التطبيقات JavaScript getWindowSegments. يعرض الرمز التجريبي حالة علامة ميزات منصة الويب التجريبية. يتم تمييز الرمز عند فعالية العلامة. انتقِل إلى chrome://flags وبدِّل العلامة.

محاكاة الشاشة المزدوجة

مشكلة Chromium: 1054281

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

اختبار المتصفّح بشكل آلي باستخدام Puppeteer Recorder

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

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

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

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

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

Puppeteer Recorder

مشكلة Chromium: 1144127

محرِّر الخطوط في لوحة "الأنماط"

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

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

محرِّر الخطوط في لوحة "الأنماط"

مشكلة Chromium: 1093229

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

أضافت أدوات المطوّرين ميزة تجريبية لتصحيح أخطاء flexbox منذ الإصدار الأخير.

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

Flexbox

مشكلة Chromium: 1139949

علامة التبويب الجديدة "انتهاكات سياسة أمان المحتوى"

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

علامة التبويب "انتهاكات سياسة أمان المحتوى"

مشكلة Chromium: 1137837

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

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

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

APCA في "علبة الألوان"

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

مشكلة Chromium: 1121900

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

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

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

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

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

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