تعرَّف على كيفية تركيز "أدوات المطوّرين" على الأجهزة الجوّالة أولاً من خلال ميزة "وضع الجهاز" الجديدة والمبسّطة التي تكون مفعّلة دائمًا. استخدِم أزرار الألوان لإضافة ألوان إلى أدوات الاختيار بسرعة ومعرفة الميزات التي ستتوفّر قريبًا في DevTools.
لمحة عن مستقبل التأليف
لقد عدنا للتو من قمة مطوّري Chrome، حيث عرضنا عليك كيفية استخدام أدوات المطوّرين في Chrome اليوم وفي المستقبل. لا أشير عادةً في هذه الملخّصات إلى أي ميزات لا تزال قيد التجربة أو قيد التطوير، ولكنّني سأستثني هذه المرة. إذا لم يكن لديك الوقت لمشاهدة المحاضرة بأكملها، إليك أهم النقاط:
الإصدار 2 من "وضع الجهاز"
ما زلنا نعمل بجدّ على هذه النسخة الجديدة والجريئة من وضع الجهاز، ولكن أردنا منح الجميع فرصة لتجربته، لذا فعّلناه في الإصدار Canary اليوم. من خلال التغييرات التي أجريناها، نسعى إلى توجيه DevTools نحو مستقبل يركز على الأجهزة الجوّالة، حيث يكون تطوير التطبيقات المتوافقة مع الأجهزة الجوّالة هو الإعداد التلقائي، ويكون تطوير التطبيقات المتوافقة مع أجهزة الكمبيوتر المكتبي هو "الإضافة". نتوقع إجراء المزيد من التحسينات خلال الأسابيع القليلة المقبلة، وسننشر مدوّنة إلكترونية مفصّلة عند الانتهاء من ذلك.
فحص الصور المتحركة بفعالية
يمنحك فحص الصور المتحركة الجاري تطويره صورة كاملة ومفصّلة عن أيّ عناصر متحركة. بدلاً من عرض انتقال لعنصر واحد في كل مرة، أضفنا أساليب استقرائية تُجمِّع الصور المتحركة المعقدة لتتمكّن من التركيز على كل ما تراه. اطّلِع على الفيديو. سننشر منشورًا أكبر ومُستقلًا على المدوّنة عند إطلاق الميزة بالكامل.
وضع التنسيق (نظرة سريعة)
إنّ وضع "التنسيق" الجديد ليس جاهزًا تمامًا للعرض، ولكنه يُعدّ واعدًا جدًا، وأتطلّع إلى رؤية هذه الميزة مطوّرة بالكامل. يضيف "وضع التنسيق" إمكانات التعديل WYSIWYG إلى "أدوات مطوّري البرامج" لأي عنصر على الصفحة. حتى الآن، يمكن تعديل الارتفاع والعرض والحشوات والهوامش في السياق. سيستغرق الأمر بعض الوقت إلى أن نصبح جاهزين لإتاحة الميزة لك، ولكن سنُبقيك على اطّلاع.
تحليل الأداء باستخدام لوحة "المخطط الزمني" المعدَّلة
في إطار حملة أكبر لطرح نموذج الأداء RAIL الجديد، تم إجراء مئات التغييرات الصغيرة والكبيرة على لوحة "المخطط الزمني"، وتعمل هذه التغييرات معًا على تحسين قصة ملفّ تعريف الأداء بشكل كبير. لذا، بدلاً من عرض كل تغيير فردي بشكل منفصل، عرض علينا بول إيريش كيفية تصحيح أخطاء أداء الموقع الإلكتروني بشكل صحيح، وفي هذه الحالة، الموقع الإلكتروني المتوافق مع الأجهزة الجوّالة لفندق Hotel Tonight، وذلك على المسرح مباشرةً. من بين الميزات التي تم الإعلان عنها مؤخرًا شريطَا تحميل وأداء والمخطّط البياني للشبكة المضمّن وملخّص العرض التدرّجي وإمكانية عرض تكاليف الأداء حسب النطاق والملف.
إضافة ألوان المقدّمة والخلفية بسهولة إلى أي عنصر
عندما أردت إضافة سمة لون الخلفية أو اللون إلى العنصر، لم يكن بإمكانك فتح أداة اختيار الألوان فقط. بدلاً من ذلك، يكتب معظمكم عبارة مثل "background: red;" في كل مرة ليظهر رمز أداة اختيار الألوان، ثم يختارون اللون الفعلي الذي يريدونه.
لذلك، قرّرنا تبسيط هذه العملية. أضفنا زرَّين رائعَين يظهران عند تمرير مؤشر الماوس فوق أسفل يسار أداة الاختيار، ما يتيح لك إضافة لون وعرض أداة الاختيار بنقرة واحدة:
أفضل التطبيقات الأخرى
- لقد أهدرنا الكثير من المساحة في لوحة "الأسلوب" السابقة من خلال عرض أنواع وسائط عامة. نحن نخفي الآن هذه العناصر قبل أدوات الاختيار إذا لم تكن غير عادية.
- يمكنك الآن تمرير مؤشر الماوس لفترة طويلة فوق أداة اختيار لغة CSS في لوحة "الأسلوب" لمعرفة عدد العناصر في الصفحة التي تنطبق عليها.
- هل ما زلت تريد الطباعة؟ لا يزال خيار محاكاة وسائط الطباعة متاحًا لمعرفة الشكل الذي ستظهر به صفحتك عند طباعتها، وقد نقلناه للتو إلى إعدادات المعالجة.
- عند اختيار عنصر لفحصه، يتم الآن توسيع الشجرة الفرعية ذات الصلة في نموذج DOM وإغلاقها تلقائيًا. من الصعب شرح ذلك، فمن الأفضل الاطّلاع على المحتوى بنفسك.
وكما هو الحال دائمًا، يُرجى إخبارنا برأيك على Twitter أو في التعليقات أدناه وإرسال الأخطاء إلى crbug.com/new.
إلى اللقاء في الشهر القادم.
بول باكاوس وفريق "أدوات مطوّري البرامج"