ملخص أدوات مطوري البرامج - تفاصيل الجدول الزمني المجمَّع ولوحات الألوان والمزيد

لقد كان شهرًا مليئًا بالميزات في Chrome Canary. اطّلِع على المزيد من المعلومات لمعرفة النصوص البرمجية التابعة لجهات خارجية التي تتسبّب في مشاكل في الأداء على موقعك الإلكتروني باستخدام التفاصيل المجمّعة في المخطط الزمني، وكيفية اختيار ألوان متّسقة باستخدام لوحة الألوان الجديدة، وكيفية محاكاة شبكة Wi-Fi في المؤتمرات باستخدام ملفات تعريف الشبكة القابلة للتخصيص، وكيفية الاستفادة إلى أقصى حد من واجهة مستخدم "أدوات المطوّرين" باستخدام القائمة الرئيسية الجديدة ومعلومات التلميح المحسّنة.


تحديد المشاكل المتعلّقة بالأداء بشكل أفضل: تفاصيل مجمّعة في "المخطط الزمني"

التفاصيل المجمعة في المخطط الزمني

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

في علامة التبويب التفاصيل المجمّعة، يمكنك التركيز على الدوالّ ذات التكلفة العالية فقط أو شجرة الاستدعاء بأكملها، ثم تقسيم البيانات المحدّدة حسب النطاق أو النطاق الفرعي أو عناوين URL المختلفة. على سبيل المثال، في المخطط الزمني أعلاه لتحميل الصفحة، يمكنك الآن تحديد مصدر البطء بسهولة إلى النصوص البرمجية التابعة لجهات خارجية والتي تأتي من نطاقات مثل facebook.net أو twitter.com.

قائمة رئيسية جديدة مخصّصة

قائمة رئيسية جديدة:

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

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

وبالإضافة إلى إرساء الجهاز، أضفنا ميزة البحث السريع عن الملفات والاختصارات والمساعدة (مما يؤدي إلى صفائنا الرئيسية الجديدة).

التعرّف على "أدوات مطوّري البرامج" من خلال التلميحات المحسّنة

تلميحات جديدة

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

تظهر نصائح التلميح الجديدة بسرعة أكبر بكثير وتتضمّن اختصارات لوحة المفاتيح (إذا كان هناك اختصار).

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

الملفات الشخصية المخصّصة للشبكة

إذا كانت الخيارات التلقائية لميزة "تقليل سرعة نقل البيانات" محدودة جدًا لحالات الاستخدام الخاصة بك، وكنت بحاجة إلى خيار "شبكة Wi-Fi للمكالمات" أو أردت استخدام خط "110 باود" من أجل الحنين إلى الماضي، لدينا أخبار سارة لك. أضفنا لوحة إعدادات جديدة تتيح لك تنفيذ أيّ من هذه الإجراءات.

لوحات الألوان التلقائية والألوان المخصّصة والألوان المستوحاة من أسلوب Material

سواء كنت تريد إعادة إنشاء ألوان سحرية أو العمل باستخدام لوحة ألوان حالية، يساعدك أداة اختيار الألوان المحسّنة على اختيار لوحة ألوان متّسقة لموقعك الإلكتروني.

من خلال النقر على رمز التبديل الصغير بجانب لوحة الألوان، يمكنك الاختيار من بين العناصر التالية:

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

أخبِرنا برأيك وكيفية توسيع نطاق قصة الألوان.

أفضل التطبيقات الأخرى

  • يتم الآن عرض الطلبات التي تم إجراؤها باستخدام واجهة برمجة التطبيقات fetch() API في "لوحة الشبكة".
  • تضمن ميزة تنسيق اللوحات تلقائيًا أنّه عند تغيير حجم أدوات المطوّرين
    ، تتكيّف اللوحات مع القيود الجديدة للمساحة.
  • يتضمّن وضع فحص العناصر ووضع الجهاز مجموعة من الرموز الجديدة.
  • تم الآن تمييز السمات في لوحة DOM بألوان مختلفة حتى عند تمييز العقدة. (كانت جميعها بيضاء من قبل).
  • تُظهر العناصر المخفية (التي يتم تنشيطها بالضغط على "h" في عقدة DOM محددة) الآن مؤشر دائرة رمادية على اليسار، وتنفِّذ نقاط توقف DOM الأمر نفسه مع دائرة زرقاء. (يشبه هذا المؤشرات البرتقالية التي لدينا بالفعل لفرض حالة عنصر مثل :hover).

كالعادة، يُرجى إطلاعنا على رأيك عبر Twitter أو التعليقات أدناه، وإرسال الأخطاء إلى crbug.com/new.

إلى اللقاء في الشهر القادم.
"بول باكوس" وفريق "أدوات مطوري البرامج"