Chrome DevTools: 10 نصائح وحيل مفيدة

أعمل مع Chrome منذ أكثر من عقد حتى الآن ، قبل وقت طويل من تمكن Mozilla من إصلاح مشكلات تسرب الذاكرة. وباعتباري شخصًا يقوم بتطوير الواجهة الأمامية على أساس يومي ، فقد كنت أيضًا مستخدمًا متعطشًا لـ Chrome DevTools. سواء كان الأمر يتعلق بأبسط أشكال فحص CSS أو إجراء اختبارات الأداء ، فإن DevTools جزء لا غنى عنه من روتيني كمطور.

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

أفضل طريقة لتصفح هذا المورد هي إما CTRL + F والبحث عن "الكلمات الرئيسية" التي تهمك أو يمكنك أيضًا تبديل جدول المحتويات أعلاه ثم الانتقال مباشرة إلى مثال محدد. أنا متأكد من أن هذه الصفحة ستنمو بمرور الوقت بينما أتعلم أشياء جديدة ، لذلك لا تتردد في وضع إشارة مرجعية على هذه الصفحة للرجوع إليها في المستقبل. لنبدأ بشيء عملي ولكنه مفيد للغاية.

منع الموارد لعرض الموقع بدون CSS / JavaScript

نحن نأخذ JavaScript كأمر مسلم به ، ولكن هناك الكثير من الأشخاص الذين يحظرون JS في متصفحهم ، ومعظمهم يفعلون ذلك لأسباب تتعلق بإمكانية الوصول والخصوصية والأمان.

وعليك أيضًا التفكير في الحالات التي قد يتعذر فيها الوصول إلى JS / CSS بسبب مشاكل في الشبكة ، أو فشل المتصفح في جلب مورد معين. إذن ، كيف يبدو موقع الويب الخاص بك عند حظر ملف / مكتبة معينة؟

• افتح DevTools وانتقل إلى علامة التبويب الشبكة .
• أعد تحميل الصفحة التي تتصفحها لجلب جميع الموارد.
• انقر فوق أي مورد وحدد Block Resource URL .
• قم بتحديث الصفحة مرة أخرى لرؤية النتيجة.

أعتقد أن هذا يعمل أيضًا داخل أدوات مطوري Firefox و Edge.

نظرة سريعة على تغييرات CSS (مع تصدير)

هل سبق لك أن ابتعدت عن تغيير CSS من DevTools فقط لإدراك أنه يتعين عليك الآن التراجع إلى 10 خصائص مختلفة لحفظ تلك التغييرات؟ نعم. ذهبت هناك وقمت بذلك.

لحسن الحظ ، هناك طريقة أفضل لمعالجة هذه المشكلة.

• انتقل إلى التخصيص والتحكم في DevTools -> المزيد من الأدوات .
• حدد التغييرات .
• ستظهر علامة تبويب دائمة داخل DevTools تعرض تغييرات التعليمات البرمجية التي أجريتها.

يمكن أيضًا الوصول إلى لوحة التغييرات من خلال اختصارات CTRL / CMD + Shift + P ثم كتابة التغييرات في وحدة التحكم في التشغيل. في الجزء السفلي من واجهة التغييرات ، لديك زر نسخ ، والذي يمكن استخدامه مباشرة لتصدير جميع التغييرات التي أجريتها في تلك الجلسة.

تغيير هيكل تخطيط الشبكة و Flexbox

لقد كتبت مؤخرًا مقالًا عن بعض من أفضل مولدات تخطيط CSS ، لذا فإن هذه النصيحة التالية تسير جنبًا إلى جنب مع هذه المقالة. أولاً ، افحص أي حاوية تدعمها إما Grid أو Flexbox ، ثم ابحث عن الخاصية المخصصة التي تحتوي على display: flex; أو العكس.

بجوار الخاصية ، سترى أيقونة صغيرة قابلة للنقر (المحرر) - ​​سيؤدي النقر فوق هذا إلى فتح لوحة يمكنك من خلالها استخدام خصائص تحديد الموضع كما هو محدد في Grid أو Flexbox.

هذه الميزة مفيدة عندما تريد اختبار محاذاة تخطيط جديدة في الوقت الحقيقي. هناك أيضًا شيء يسمى CSS Grid Inspector ، والذي قام فريق مطوري Chrome بعمل كتابة له.

تصحيح أخطاء الوصول باستخدام أدوات مدمجة

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

» تمكين شجرة الوصول في Chrome DevTools

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

»المصدر عارض النظام

على نفس اللوحة كما هو موضح في GIF أعلاه يوجد مربع اختيار آخر. ويسمى مربع الاختيار هذا عرض ترتيب المصدر . ما يفعله هذا - بمجرد تمكينه - هو أنه يتيح لك رؤية الترتيب الذي تظهر به العناصر للزوار الذين قد يزورون صفحاتك باستخدام الأدوات المساعدة.

بمجرد التمكين ، يمكنك تحديد أي منطقة من صفحتك ومشاهدة الترتيب الذي ستظهر به العناصر.

هذا مفيد بشكل خاص عند العمل مع إما Grid أو Flexbox ، وكلاهما له خصائص لإعادة ترتيب عرض العناصر. order: 1;

»اقتراحات الألوان للنص منخفض التباين

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

أجرى فريق web.dev عملية كتابة كاملة حول كيفية عمل الطريقة التالية.

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

تنسيق JavaScript / CSS المصغر إلى كود قابل للقراءة

لا يستغرق الأمر سوى بضع ثوانٍ لاستيراد رمز مصغر إلى رمز VS ثم تطبيق Prettier ، ولكن لماذا تهتم عندما يمكنك تنسيق (إلغاء تصغير) مباشرةً من وحدة تحكم DevTools.

لإنجاح هذا العمل:

• افتح لوحة المصادر داخل DevTools.
• افتح أي ملف تم تصغيره.
• انقر فوق رمز {} في الجزء السفلي من وحدة التحكم.
• تم تنسيق الرمز الآن.

تحرير (نص) وإزالة العناصر باستخدام وضع التصميم

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

لتجربتها بنفسك:

• افتح وحدة تحكم DevTools.
• اكتب document.designMode = ”on” وقم بالإرسال.
• ارجع إلى الصفحة وابدأ التحرير.

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

التقط لقطات شاشة من Device Emulator

هذه ميزة استعصت عليّ لأطول وقت. سير العمل المعتاد لأخذ لقطات الشاشة هو إما امتداد Snip أو Awesome Screenshot. كما اتضح ، يمكنك التقاط لقطات شاشة للجوال / الجهاز اللوحي وغيرها من لقطات الشاشة مباشرة من Device Emulator.

لكن هذا ليس السبب الوحيد لفائدة هذه الميزة. يمكنك في الواقع التقاط لقطات شاشة بما في ذلك إطار الجهاز . قبل الدخول في مزيد من التفاصيل ، إليك مثال:

إذن ، كيف يمكنك تمكين إطار الجهاز للحصول على لقطات شاشة للجوال / الجهاز اللوحي؟

• افتح DevTools.
• انقر فوق رمز شريط أدوات تبديل الجهاز .
• انتقل إلى أيقونة القائمة العلوية اليمنى (ثلاث نقاط).
• حدد إظهار إطار الجهاز .

هنا معاينة مرئية:

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

• iPhone 5 / SE
• iPhone 6/7/8 & Plus
• Nexus 5 و 5 x
• Nexus 6P
• اى باد

بفضل مستخدم StackOverflow RoCk RoCk للتوضيح.

حدد الألوان من خارج المتصفح

هذه واحدة من أحدث الميزات المضافة إلى DevTools. بافتراض أنك معتاد بالفعل على Color Picker - أصبح من الممكن الآن اختيار ألوان ليست داخل المتصفح. بمعنى آخر ، يمكنك تحديد الألوان مباشرة من سطح المكتب الخاص بك ، سواء كانت صورة أو رمزًا محددًا.

يمكنك الآن التقاط الألوان من صورك المفضلة بشكل أسرع.

استخدم copy () كمكشطة زائفة

يمكن استخدام وظيفة copy() لجلب الكائنات الموجودة في الصفحة بشكل جماعي. بالنسبة لي ، هذه هي أسرع طريقة لكشط جميع عناوين URL الموجودة على الصفحة بسرعة.

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

 copy($$('a').map(a => a.href).join('\n'))

والنتيجة هي:

ستبدو وظيفة JavaScript البديلة كما يلي:

 var link_array = [], l = document.links; for(var i=0; i<l.length; i++) { link_array.push(l[i].href); } console.log(link_array)

كيفية تغيير سمة لون Chrome DevTools

أتساءل عن عدد المطورين الذين قاموا بتغيير مظهر متصفح Chrome إلى مظلم ولكنهم لم يدركوا أنه يتعين عليك القيام بذلك بشكل منفصل لـ DevTools. أنا متأكد من أنه كان هناك عدد قليل.

عند فتح DevTools ، يمكنك الضغط على F1 لفتح الإعدادات. سيؤدي هذا إلى فتح لوحة التفضيلات الافتراضية حيث يمكنك الاختيار من بين السمة الفاتحة أو الداكنة ، أو استخدام تفضيلات النظام.

لمحة داخل مركز تطوير قوي

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