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

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

نقطة إيقاف عند حدوث انتهاكات في Trusted Type

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

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

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

مشكلة في Chromium: 1142804

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

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

مشكلة في Chromium: 1150883

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

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

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

مشكلة في Chromium: 1003629

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

فحص طلبات شبكة Trust Token باستخدام علامة التبويب الجديدة Trust Tokens

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

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

مشكلة في Chromium: 1126824

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

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

عمليات التدقيق الجديدة في الإصدار 7 من Lighthouse:

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

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

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

مشكلة في Chromium: 772558

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

إتاحة فرض حالة :target CSS

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

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

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

مشكلة في Chromium: 1156628

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

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

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

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

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

مشاكل Chromium: 1150797 و1150797

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

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

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

مشكلة في Chromium: 1147016

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

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

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

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

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

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

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

مشكلة في Chromium: 1152391

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

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

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

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

مشكلة في Chromium: 997625

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

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

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

مشكلة في Chromium: 978059

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

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

مشكلة في Chromium: 1012337

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

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

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

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

مشكلة في Chromium: 1073909

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

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

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

مشكلة في Chromium: 1122580

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

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

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

مشكلة في Chromium: 1152290

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

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

مشكلة في Chromium: 1028078

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

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

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

مشاكل Chromium: 1149859 و1148353

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

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

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

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

مشكلة في Chromium: 1155120

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

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

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

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

مشكلة في Chromium: 1122507

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

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

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

مشكلة في Chromium: 1139899

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

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

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

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

مشكلة في Chromium: 1075865

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

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

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

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

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

مشكلة في Chromium: 1054281

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

أتمِتة اختبار المتصفّح باستخدام أداة Puppeteer Recorder

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

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

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

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

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

مشكلة في Chromium: 1144127

أداة تعديل الخط في جزء "الأنماط"

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

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

مشكلة في Chromium: 1093229

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

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

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

مشكلة في Chromium: 1139949

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

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

مشكلة في Chromium: 1137837

طريقة جديدة لاحتساب تباين الألوان: خوارزمية APCA

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

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

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

مشكلة في Chromium: 1121900

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

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

التواصل مع فريق Chrome DevTools

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

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

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

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