نصائح واختصارات تصحيح DevTools (Chrome و Firefox و Edge)

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

في هذه المقالة ، دعنا نتعمق في بعض الميزات المفيدة والغامضة في DevTools . سننظر في جميع المتصفحات الحديثة (Chrome و Firefox و Edge و Safari) وننظر في الأدوات المفيدة التي يوفرونها لنا ، مطوري الويب. سنركز على تلك التي نستخدمها كثيرًا على SmashingMag ، وبعض الأساليب والاستراتيجيات الصغيرة التي تساعدنا في إصلاح الأخطاء المزعجة وكتابة تعليمات برمجية أفضل.

إنشاء ملفات تعريف المتصفح

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

• ملف تعريف الوصول
  ملف تعريف متصفح نظيف يتضمن أدوات متنوعة للتحقق من إمكانية الوصول ، مثل Accessibility Insights و ax و a11y.css ، جنبًا إلى جنب مع عدد قليل من أدوات الوصول الأخرى ومحاكي رؤية الألوان.

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

• ملف تعريف الأداء
  ملف تعريف نظيف بدون امتدادات ، مع بعض الإشارات المرجعية الخاصة للتدقيق باستخدام Lighthouse و RequestMap وتشخيصات أداء CSS وبعض الروابط المتعلقة بالأداء التي يجب وضعها في الاعتبار (مثل أولوية الموارد في التحميل). سارت الأمور بشكل جيد دائمًا مع التحكم في وحدة المعالجة المركزية 4 × واختناق الشبكة (Slow 3G).

• عميل سعيد
  استنادًا إلى البيانات التي لدينا من تحليلاتنا ، هذا ملف تعريف قريب بدرجة كافية من الملف الذي سيحصل عليه العديد من قرائنا (الأشخاص الرائعون مثلك). سيحتوي على عدد قليل من الإضافات الشائعة ، وإضافات تطوير الويب الشائعة ، وحاجبات الإعلانات ، وإدارة علامات التبويب ، ومحرر مستندات Google في وضع عدم الاتصال ، و LastPass ، و VPN ، و Browserstack ، و Grammarly وما إلى ذلك.

• زبون غير سعيد
  ملف تعريف للقارئ على اتصال بطيء ومخنق (3G بطيء) ، وذاكرة منخفضة ، ووحدة معالجة مركزية ضعيفة ، مع تشغيل أكثر 10 ملحقات للمتصفح شيوعًا. عادةً ما نستخدم هذا الملف الشخصي لاختبار أثقل صفحاتنا لتجربة أسوأ تجارب العملاء الممكنة.

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

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

اختصارات لوحة المفاتيح العالمية

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

• فتح قائمة الأوامر (Chrome ، Edge)
  لكونه على الأرجح أحد أكثر الأمور شهرة ، فإن هذا الأمر يحتوي في الواقع على ميزتين. يفتح Cmd / Ctrl + Shift + P بحثًا سريعًا للإكمال التلقائي عن اللوحات والأدراج وجميع الميزات الموجودة في DevTools. يفتح Cmd / Ctrl + P درجًا به جميع الملفات المتاحة المستخدمة في الصفحة الحالية. إذا كنت بحاجة إلى الوصول بسرعة إلى أي ميزة من ميزات DevTools ، فإن قائمة الأوامر هي طريقة سريعة للوصول إلى هناك - للأدراج العامة أو القوائم المخفية أو الميزات المحددة.

• فتح إعدادات DevTools (جميع المتصفحات الحديثة)
  عادة ما يكون هناك الكثير من الأدوات والميزات الغامضة المخفية في لوحة "الإعدادات" - من الأجهزة التي تمت محاكاتها إلى ملفات تعريف تقييد الشبكة والتجارب. في Chrome ، يمكنك النقر فوق رمز الترس في الزاوية العلوية اليمنى أو استخدام Shift + ؟ . في Firefox ، يمكنك الانتقال إلى الإعدادات باستخدام F1 .

• تبديل وضع فحص العنصر (جميع المتصفحات الحديثة)
  بدلاً من النقر فوق رمز فحص ثم التركيز على العنصر الذي ترغب في تصحيحه ، يمكنك التبديل إلى وضع فحص العنصر باستخدام Cmd / Ctrl + Shift + C.

• تبديل وضع HTML (جميع المتصفحات الحديثة) أثناء فحص عنصر ، قد ترغب في تغيير خصائصه ، مثل الفئات أو الحالات. بدلاً من النقر بزر الماوس الأيمن على العنصر وإضافة القيم واحدًا تلو الآخر ، يمكنك تبديل وضع HTML على العنصر المحدد حاليًا باستخدام Fn + F2 (أو F2 فقط على Windows).

• تبديل وضع الجهاز (جميع المتصفحات الحديثة) للانتقال إلى وضع شريط أدوات الجهاز ، على سبيل المثال لمعاينة الشكل الذي يبدو عليه النموذج على الشاشات الضيقة ، أو تشغيل مصحح أخطاء استعلام الوسائط ، يمكنك استخدام Cmd / Ctrl + Shift + M في Chrome ، و Cmd / Ctrl + Opt / Alt + M في Firefox.

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

يمكنك العثور على نظرة عامة كاملة على جميع اختصارات لوحة المفاتيح على اختصارات لوحة مفاتيح Chrome DevTools واختصارات لوحة مفاتيح Firefox DevTools - غالبًا ما تكون متسقة تمامًا عبر المتصفحات الحديثة.

قم بتشغيل الإعدادات التجريبية

يأتي DevTools مع مجموعة من الإعدادات التجريبية التي لا يوصى بها تمامًا لجمهور عريض ، ولكن يمكن أن تكون مفيدة جدًا في تصحيح الأخطاء. على الرغم من كلمة تحذير: في بعض الأحيان قد تجمد هذه الإعدادات Chrome أو تجعله بطيئًا للغاية (وهذا هو السبب في كونها تجريبية في المقام الأول).

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

عند فتح DevTools في Chrome ، انتقل إلى "الإعدادات" ( Shift + ؟ مع فتح DevTools) وابحث عن "التجارب" في الشريط الجانبي. من الواضح أن هناك الكثير من الإعدادات التجريبية المتاحة في كل DevTools ، ولكن الإعدادات المذكورة أدناه هي فقط تلك التي نجدها مفيدة جدًا في عملنا.

عبر الميزات المدرجة هناك ، يجدر تشغيل "طباعة جميلة تلقائيًا في لوحة المصدر" ، والتي ستجمل الأنماط والنصوص المضغوطة افتراضيًا عند عرض المصدر. يمكنك أيضًا تمكين مصحح أخطاء شبكة CSS وتصحيح أخطاء Flexbox للتعامل مع مشكلات التخطيط. هناك أيضًا اختلاف في المصدر وعارض لطلب المصدر يمكن أن يكون مفيدًا.

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

بالنسبة لملف تعريف معين ، يمكنك الوصول إلى المزيد من الميزات المخفية من خلال التوجه إلى chrome://flags/ في ملف تعريف المتصفح الذي تختاره. على سبيل المثال ، هذا هو المكان الذي يمكنك فيه تشغيل أحدث ميزات JavaScript التجريبية أو ميزات Web Platform التجريبية أو تمكين تلميحات تحميل الموارد لتوفير معاينة عبر اتصالات الشبكة البطيئة.

في Firefox ، انتقل إلى الإعدادات باستخدام F1 . في الجزء السفلي من قفص الاتهام ، يمكنك مطالبة المتصفح بإظهار أنماط المتصفح ، وتشغيل / إيقاف الإكمال التلقائي CSS ، وتغيير تفضيلات المحرر ، وتبديل وميض الطلاء ، وضبط سلوك لقطة الشاشة ، وتمكين خرائط المصدر (لا يتم تشغيلها افتراضيًا). في Safari ، يمكنك العثور على الإعدادات التجريبية ضمن "تطوير ← الإعدادات التجريبية".

التبديل بين حالات الإرساء (Chrome و Edge و Firefox)

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

يسمح لك بفرض حالة عنصر ( :active ، :focus ، :focus-within داخلي ، :hover ، :visited و :focus-visible ، ومؤخرًا :target ) على عنصر تفاعلي معين - على سبيل المثال لفرض :focus و :active الحالات :active على الأزرار للتحقق من إمكانية الوصول.

في Firefox ، يمكنك تغيير فئة زائفة لعنصر DOM أثناء فحصه - تتوفر الميزة بنقرة بزر الماوس الأيمن على عقدة DOM.

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

للتبديل بسرعة بين حالات الإرساء ، يمكنك استخدام Cmd / Ctrl + Shift + D. من الأمور التي يجب وضعها في الاعتبار أن الاختصار لن يقوم بإلغاء إرساء DevTools في نافذة منفصلة إلا إذا كان DevTools في موضعه الافتراضي (مثبتًا على اليمين). وإلا ، فسيقوم الاختصار بالتبديل بين الموضع الافتراضي والوضع الذي قمت بتغييره إليه.

عرض الأجزاء الثلاثية (Firefox)

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

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

يتوفر عرض مشابه أيضًا في Chrome و Edge أيضًا ، ولكنه متاح فقط في لوحة "العناصر" (رمز الشريط الجانبي في الزاوية العلوية اليمنى) ، وحتى الآن لا يعرض سوى الأنماط المحسوبة (وهذا هو سبب تسميته "الأنماط المحسوبة الشريط الجانبي ").

أنماط التصفية حسب الخاصية (Firefox)

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

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

في لوحة "الأنماط" ، يشرح Firefox أيضًا خصائص CSS التي لا تؤثر على العنصر المحدد ولماذا ، جنبًا إلى جنب مع توصيات لما قد يساعد في إصلاح المشكلة أو تجنب السلوك غير المتوقع (تسمى الميزة Inactive CSS).

ميزة أخرى مفيدة هي أن Firefox يعين شارات scroll والتجاوز إلى العناصر التي تتسبب في overflow الحاوية أو التمرير (تصحيح أخطاء الفائض) - وهي مفيدة جدًا عندما تحاول معرفة سبب ظهور شريط التمرير الأفقي فجأة ، أو عدم ظهور عنصر نتصرف كما هو متوقع.

توسيع العقد بشكل متكرر (Chrome ، Edge ، Firefox)

عند فحص عنصر باستخدام DOM متداخل بعمق ، فقد يستغرق أحيانًا بعض الوقت للانتقال لأسفل الشجرة ، من عقدة متداخلة إلى أخرى. بالنقر بزر الماوس الأيمن على السهم الموجود على العقدة ، يمكنك اختيار "توسيع بشكل متكرر" وستتوسع العقدة المحددة حاليًا (وجميع العناصر الفرعية الخاصة بها) بنقرة واحدة. بدلاً من ذلك ، يمكنك الضغط على Option (أو Ctrl + Alt في Windows) أثناء النقر فوق رمز السهم بجوار اسم العنصر.

جمع وتصدير تغطية التعليمات البرمجية (كروم ، إيدج)

في صفحة معينة ، قد لا يتم استخدام الكثير من CSS و JavaScript على الإطلاق ، على الرغم من أنه سيتم شحنها إلى المتصفح. تتيح لك لوحة "تغطية الرمز" (قائمة الأوامر ← "إظهار التغطية") استكشاف الأنماط والرموز التي لا يتم استخدامها في صفحة معينة. نحن نستخدم تغطية الكود لجمع CSS الهامة لكل من القوالب المستخدمة على الموقع ، والقيام بذلك يدويًا قد يكون متعبًا للغاية.

مع وجود "تغطية الشفرة" في مكانها الصحيح ، ومرورًا بعدة سيناريوهات تتضمن الكثير من النقر وعلامات الجدولة وتغيير حجم النافذة ، نقوم أيضًا بتصدير بيانات التغطية التي تجمعها DevTools على هيئة JSON (عبر أيقونة التصدير / التنزيل). علاوة على ذلك ، يمكنك استخدام Puppeteer الذي يوفر أيضًا واجهة برمجة تطبيقات لجمع التغطية (لكننا لم نصل إليها بعد).

تصحيح أخطاء الوسائط (Chrome ، Edge)

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

بدّل شريط أدوات الجهاز (وضع الاستجابة) باستخدام Cmd / Ctrl + Shift + M واختر النقاط الثلاث في الزاوية العلوية اليمنى. ثم اختر "إظهار استعلامات الوسائط". الآن يجب أن تكون قادرًا على رؤية الأشرطة الأفقية التي تمثل نطاق كل استعلام عن الوسائط .

قد تبدو مربكة بعض الشيء في البداية ، ولكن الطريقة التي تتم بها محاذاة هذه الأشرطة تمثل عرض الشاشة ، ويتم تكرارها على الجانب الأيسر وعلى الجانب الأيمن من منفذ العرض. يتم استبدال الأشرطة الأقرب إلى وسط الشاشة بأشرطة بعيدة عن المركز. يشير الشريط الأزرق الموجود في الجزء العلوي إلى استعلامات الوسائط max-width بينما يشير الشريط الأخضر الموجود في الأعلى إلى استعلامات الوسائط ذات الحد min-width والحد max-width ، بينما يشير الشريط البرتقالي إلى استعلامات الوسائط ذات الحد min-width فقط.

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

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

محاكاة استعلامات الوسائط المفضلة (Chrome و Edge و Firefox)

بالإضافة إلى استعلامات الوسائط المتعلقة بحجم الشاشة ، يمكننا أيضًا محاكاة استعلامات الوسائط الخاصة بإمكانية الوصول ، على سبيل المثال ، prefers-color-scheme ، prefers-reduced-motion وأوجه القصور في الرؤية. لتبديل المحاكاة ، توجه إلى لوحة التحكم في الأوامر ( Cmd / Ctrl + Shift + P ) واكتب "إظهار العرض". الآن ، في الإعدادات يمكنك اختيار مضاهاة مفضلة.

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

التحدث عن المحاكاة: تذكر كيف ربما واجهت صعوبة في الماضي في العثور على خطأ في التخطيط لطباعة ورقة الأنماط؟ في نفس اللوحة ، يمكنك معاينة كيفية عمل أنماط الطباعة الخاصة بك هنا أيضًا - لا داعي لطباعة ملف PDF لصفحة عشوائية مرارًا وتكرارًا لمعرفة سبب مشكلة العرض الرئيسية بعد الآن.

أيضًا ، في نفس اللوحة في Chrome ، يمكنك إضافة جميع أنواع ميزات تصحيح أخطاء العرض - مثل وميض الطلاء وحدود الطبقة ومشكلات أداء التمرير وتعطيل AVIF و WebP.

كملاحظة جانبية ، يوجد خيار شريط أدوات DevTools لـ " Force Dark Appearance " و " Force Print Media Styles" في Safari ، ويمكنك محاكاة أوجه القصور في الرؤية في علامة التبويب "Accessibility" في Firefox. (سنتحدث أكثر قليلاً عن إمكانية الوصول لاحقًا.) في Firefox ، يتوفر عرض الطباعة أيضًا أعلى جزء "الأنماط" في وضع "الفحص".

فتح DevTools تلقائيًا في كل علامة تبويب جديدة (Chrome)

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

لتحقيق ذلك ، نحتاج إلى تمرير العلم --auto-open-devtools-for-tabs عند تشغيل متصفح Chrome ، مستند إلى Edge. نقوم بتشغيل برنامج نصي بسيط من Alfred لفتح متصفح Canary بالعلامة عند الحاجة (نصيحة إلى Addy) - مفيد جدًا عندما تكون في حاجة إليه حقًا:

/Applications/Google\ Chrome\ Canary.app/Contents/MacOS/Google\ Chrome\ Canary --auto-open-devtools-for-tabs htps://www.smashingmagazine.com

يمكنك العثور على نظرة عامة شاملة لجميع مفاتيح سطر أوامر Chrome ، Edge في دليل Peter Beverloo حول مفاتيح Chrome Command Line.

لقطات شاشة بكامل الصفحة (Chrome و Edge و Firefox)

عند تحديد عقدة HTML في جزء "العناصر" ، يمكنك النقر بزر الماوس الأيمن فوق العقدة ومطالبة DevTools بإنشاء لقطة شاشة لتلك العقدة ، وفي "وضع الاستجابة" يمكنك التقاط لقطة شاشة للجزء المرئي من صفحة أو لقطة شاشة بالحجم الكامل (ثلاث نقاط في الزاوية اليمنى العليا).

لإنشاء لقطة شاشة بالحجم الكامل بشكل أسرع قليلاً ، يمكنك أيضًا المطالبة "لقطة شاشة كاملة الصفحة" في قائمة الأوامر ( Cmd / Ctrl + Shift + P → "لقطة شاشة كاملة الصفحة"). عادة ما يكون أسرع قليلاً. فقط ضع في اعتبارك أن أجزاء الصفحة التي يتم تحميلها ببطء أو يتم عرضها بشكل تدريجي (على سبيل المثال مع content-visibility ) قد لا تظهر بشكل صحيح في لقطة الشاشة ، لذلك قد تحتاج إلى التمرير لأسفل الصفحة أولاً.

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

مساطر للمكونات (Chrome ، Edge ، Firefox)

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

تتبع التغييرات (Chrome و Edge و Firefox)

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

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

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

التجاوزات المحلية (Chrome ، Edge)

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

أولاً ، قم بإنشاء مجلد على جهازك حيث سيتم تخزين جميع تعديلاتك local-overrides على سطح المكتب هو اسم ومكان معقول لهذا النوع من المهام). ثم توجه إلى علامة التبويب "المصادر" ، واختر "Overrides" في الزاوية العلوية اليسرى من DevTools (قد يكون مخفيًا خلف شارة الرتبة المزدوجة). انقر الآن على "تحديد مجلد للتخطي" واختر المجلد الذي تم إنشاؤه حديثًا - هذا هو المجلد الذي سيستخدمه Chrome لتخزين تعديلاتك المحلية. ستحتاج إلى النقر فوق "السماح" لمنح Chrome أذونات لحفظ الملفات على محرك الأقراص الثابتة.

الآن ، يمكنك اختيار أي ملف في لوحة "المصادر" ، انقر بزر الماوس الأيمن في أي مكان في الكود واختر "حفظ للتجاوزات" بالنقر بزر الماوس الأيمن. هذا دليل على Chrome لإنشاء ملف جديد ، وتخزين جميع محتويات الملف ، إلى جانب التعديلات التي أجريتها ، على محرك الأقراص الثابتة. (قد ترغب في النقر فوق الزر {} أولاً لجعل الشفرة أكثر قابلية للقراءة قليلاً). ( شكرًا لـ Trys على التلميح! )

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

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

نصيحة احترافية من Harry Roberts: لا تسمح لك التجاوزات المحلية بالاحتفاظ بالإصدارات أو المتغيرات أو تتبعها ، ولكن يمكنك إرفاق سلسلة استعلام بعنوان URL وتحميل متغيرات منفصلة من نفس الصفحة. مفيد للغاية عند تحرير صفحات HTML.

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

تصحيح الأخطاء عن بُعد (Chrome و Safari)

إذا كنت بحاجة إلى تصحيح أخطاء تطبيقاتك أو صفحاتك على هاتف محمول ، فيمكنك استخدام وكيل Devtools لأجهزة iOS لتصحيح أخطاء Chrome على iOS ، وكذلك استخدام DevTools لتصحيح أخطاء Mobile Safari على iOS باستخدام Chrome DevTools.

لتصحيح أخطاء Mobile Safari مع Safari Inspector ، قم بتمكين "Web Inspector" في "Settings → Safari → Advanced → Web Inspector" وافتح مصحح الأخطاء باستخدام "Develop" ← (اسم هاتفك). يجب أن يكون لديك Safari's DevTools مفتوحًا لك.

بالنسبة لأجهزة Android ، افتح خيارات المطور على Android وحدد "تمكين تصحيح أخطاء USB" . على جهاز التطوير الخاص بك ، يمكنك بعد ذلك اكتشاف جهازك المحمول من خلال الانتقال إلى chrome://inspect#devices device واختيار "Remote Target". يمكنك العثور على الكثير من التفاصيل والإرشادات حول "البدء باستخدام تصحيح أخطاء أجهزة Android عن بُعد". هذا أيضًا حيث يمكنك العثور على DevTools مخصص لتصحيح أخطاء Node.js.

إيقاف تنفيذ البرنامج النصي (Chrome و Edge و Firefox)

عند اختبار CSS المهم أو تصحيح أخطاء JavaScript ، قد ترغب في التمسك بحالة DOM قبل تنفيذ نص برمجي معين أو تطبيق نمط معين. هذا هو سبب تغيير DOM لنقاط التوقف في DevTools.

من خلال النقر بزر الماوس الأيمن على النقاط الثلاث المشؤومة بجوار اسم العنصر ، يمكنك اختيار "فاصل" تعديلات الشجرة الفرعية (إدخالات العقدة وعمليات الإزالة في شجرة DOM المتجذرة في العقدة المحددة) ، وتعديلات السمات (على سبيل المثال ، عند إضافة سمة أو إزالتها ، أو تتغير قيمة السمة - على سبيل المثال مع الفئات) أو إزالة العقدة.

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

مقتطفات التعليمات البرمجية (Chrome ، Edge)

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

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

يقع جزء "المقتطفات" بين "المصادر" بجوار "التجاوزات المحلية". بمجرد إضافة مقتطف ، يمكنك تشغيله إما عن طريق النقر بزر الماوس الأيمن واختيار "تشغيل" ، أو باستخدام Cmd / Ctrl + Enter . بالطبع ، يتوفر كل قصاصة من لوحة القيادة أيضًا.

بشكل عام ، إذا وجدت نفسك تدير مهمة روتينية مرارًا وتكرارًا ، فهناك فرصة جيدة لأنك قد ترغب في وضعها في "مقتطفات التعليمات البرمجية" وأتمتة هذه المهمة باستخدام نص برمجي. تتضمن DevTools Snippets بعض النصوص البرمجية المفيدة لكسر ذاكرة التخزين المؤقت ، وإظهار الرؤوس وحفظ الكائنات كملفات .json من وحدة التحكم ، ولكن يمكنك استخدامها لتعديل DOM أو عرض أي معلومات مفيدة ، مثل علامات الأداء (وهو ما نقوم به). بالإضافة إلى ذلك ، يمكنك أيضًا توصيل CSS لتشخيص الأداء للإشارة إلى الصور المحملة البطيئة أو الصور غير الحجم أو البرامج النصية المتزامنة.

تشغيل الاختبارات الآلية المخصصة (Safari)

إحدى الميزات التي غالبًا ما يتم نسيانها في Safari DevTools هي خيار تحديد وتشغيل سلسلة من الفحوصات الآلية. فكر في الأمر على أنه مجموعة اختبار مصممة خصيصًا ، مع سلسلة من الاختبارات الصغيرة ، والتي يمكن تحديدها بالكامل بناءً على نوع التدقيق الذي يرغب المطور في إجرائه. بشكل افتراضي ، تركز مجموعة الاختبار على إمكانية الوصول ، ولكن يمكنك تعديلها كما تراه مناسبًا ، على سبيل المثال للتحقق مما إذا كانت هناك أي نصوص مزامنة في DOM ، أو إذا كانت جميع الصور لها سمة width height محددة ، أو حتى إذا تم تحميل جميع الصور كسول. ( شكرا نيكيتا! )

خرائط المصدر (Chrome و Edge و Firefox)

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

في Chrome ، تحتاج إلى تمكين خرائط المصدر لـ JavaScript و CSS في "الإعدادات" ، ثم إضافة مجلد إلى "مساحة العمل". بعد ذلك ، حاول DevTools الاستدلال على جميع التعيينات تلقائيًا وتحميل ملفات المصدر بالإضافة إلى الملفات المصغرة. يمكنك بعد ذلك قراءة وتصحيح التعليمات البرمجية المترجمة في مصدرها الأصلي. أفضل من ذلك: لا يزال بإمكانك السير عبر نقاط التوقف الخاصة بك ، وسيتم تعيين جميع الأخطاء والسجلات ونقاط التوقف إلى الكود الفعلي. لإنشاء خريطة المصدر الخاصة بك ، قد يساعدك Webpack's Devtool.

For Firefox, once the source map is generated, a transformed file has to include a comment that points to the source map . Just make sure that your bundler does the job for you. Once it's in place, in the source list pane, the original source (.scss or .ts files) will appear, and you can debug it right there.

Clear Service Worker's Cache And Storage (Chrome, Edge)

When we hit “Hard Refresh” in the browser, the browser will not use anything from the cache when reloading the page. Instead, it will re-fetch all assets from the server, without relying on caching.

If you right-click the “Refresh” button with DevTools open, you'll find another option: “Empty Cache and Hard Reload”. The difference is that if the page prompts any dynamic fetches via JavaScript, they might still use the cache. The latter option clears them, too, while the former doesn't.

Both of these options, however, don't clear cookie or service worker's cache — which you might want to do in some scenarios. Jump to the Command menu ( Cmd + Shift + P ) and type/autocomplete “Clear site data”. When this option is activated, the browser will clean all of the data (as the name assumes), including the service worker's cache as well as the unregistering of the service worker. (Alternatively, you can click “Clear Site Data” in the Application panel.)

And if you want to delete only cache or only cookies quickly, you can right-click on any request in the “Network” panel, and choose “Clean browser cache” from there.

In Firefox, you'll need to head to the “Privacy & Security” panel and find the “Cookies and Site Data” section there.

Filters In The Network Panel (Chrome, Edge, Firefox)

There seems to be not much to explore in the “Network” panel as it basically just shows the list of browser requests (along with server responses) in chronological order. However, there are plenty of obscure little helpers as well.

First of all, with an overview of requests in front of us, we can choose which columns we'd like to see . Right-click on the header of one of the columns and select the ones that you find useful for the task at hand. We always choose the “Priority” column to see in which priorities assets are being requested, and if we need to adjust that order to deliver critical assets faster (based on JavaScript Resource Loading Priorities in Chrome, Edge).

We can also filter requests to find specific ones that might be causing trouble ( thanks for the tip, Harry ). At the top of the “Network” panel you'll find an input field, which accepts not only keywords but also commands for filtering. Here are a few examples of the useful ones:

• is:from-cache shows all resources that were delivered from the cache,
• is:service-worker-initiated , shows only requests prompted by a service worker,
• is:running shows all incomplete or unresponsive requests,
• larger-than:250k shows all resources that are larger than 250 Kb,
• -larger-than:250k shows all resources that aren't larger than 250 Kb (same size and smaller),
• mixed-content: shows all assets that are loaded over HTTP instead of HTTPS,
• -has-response-header:Cache-Control highlights assets that don't have any caching headers,
• Obviously we can also search for bad practices like document.write and @import in HTML and CSS, plus we can use regular expressions as well.

All filters can be combined as well, separated by an empty space. You can check a comprehensive list of all filters as well, or just type - in the filters input and get an autocomplete preview of all features ( huge thanks to Harry for the tip! ).

Check Initiators In The Network Panel (Chrome, Edge)

If you want to quickly check which assets a particular resource has requested, or by which resource an asset was requested, there is a simple way to discover it in DevTools as well. This is especially useful in cases where you might have a couple of third-party scripts that might be calling fourth-party-scripts.

When you are inspecting a request in the “Network” panel, hold Shift while hovering over an element. The pink background color will indicate resources that this element has prompted to download, and the green background color will indicate the initiator that actually prompted the request.

Choose a User Agent (Chrome, Edge, Firefox)

Sometimes you might want to check how the page will render with a different user agent, eg to make sure that a Googlebot gets a properly rendered version of the page. By heading to “Network conditions”, you can define the behavior for caching, network throttling and a user agent.

بشكل افتراضي ، يكون الأخير "تلقائي" ولكن هناك 10 مجموعات محددة مسبقًا ، تتراوح من GoogleBot Desktop و Mobile إلى Android و UC Browser. يمكنك أيضًا تحديد وكيل المستخدم الخاص بك إذا كنت بحاجة إلى ذلك. ومع ذلك ، لن تظل هذه الإعدادات محفوظة أثناء التنقل من علامة تبويب إلى أخرى.

في Firefox ، ستحتاج إلى التوجه إلى Firefox's about:config page وتحديد سلسلة general.useragent.override .

تغيير سلوك التمرير في لوحة الأداء (Chrome ، Edge)

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

في "الإعدادات" ، يمكنك تبديل "حركة عجلة الماوس Flamechart" من "التكبير" إلى "التمرير" - وفويلا ، سيتم الحفاظ على التمرير المفضل لديك! ولكن ماذا لو أردت استخدام كل من التكبير والتمرير على الرغم من ذلك؟ تلميح المفتاح هناك هو الاستمرار في الضغط على "Shift" أثناء التمرير لتبديل السلوك المفضل.

إحساس لوحة الأداء (كروم ، الحافة)

تذكر "الجدول الزمني: بادئ الحدث" و "المخطط الزمني: تتبع الإبطال" التي ذكرناها في الإعدادات التجريبية؟ هذه الميزات التجريبية مفيدة في لوحة الأداء عندما تبحث عن سبب للعمليات باهظة الثمن - ما يسمى بالمهام الطويلة (المهام التي تستغرق أكثر من 50 مللي ثانية لإكمالها). الهدف إذن هو تقسيم المهام الطويلة إلى مهام أقصر ، وعادة ما يكون من المنطقي التركيز على أطول المهام أولاً.

انتقل إلى لوحة الأداء وابدأ التوصيف باستخدام Cmd / Ctrl + Shift + E. بعد قليل من الوقت اللازم لتحديث البيانات وجمعها ، ستظهر تلك المهام الطويلة الباهظة الثمن في المخطط الزمني ، مع تمييزها بمستطيل أحمر في الزاوية العلوية اليمنى. يشير طولها إلى مدى تكلفة العملية في الواقع. المهام لديها ميزانية ودية تبلغ 50 مللي ثانية حتى تنتهي ، وهذا هو السبب في أن الجزء الأول 50 مللي ثانية من المهمة يظهر باللون الرمادي الصلب. عندما تتجاوز هذه الميزانية ، يتم تمييز باقي المهمة بخطوط حمراء / رمادية.

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

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

تصحيح أخطاء الرسوم المتحركة Janky بطبقات (Chrome ، Edge ، Safari)

تحتاج فقط إلى بعض الرسوم المتحركة ، ربما مع القليل من اختلاف المنظر ، أو التنقل المنزلق أو التلاعب المؤذي في مؤشر z ، لتتعرض للإطارات المتساقطة والرسوم المتحركة المبتذلة . سيكشف مقياس FPS من لوحة الأداء (Chrome) ما إذا كنت تقوم بتشغيل الإطارات بسلاسة ، ولكن إذا لم يكن الأمر كذلك ، يمكنك استكشاف مشكلات العرض في علامة التبويب "الطبقات".

يمكن اكتشاف بعض المشكلات بسهولة عن طريق تتبع العناصر التي تفتقد خاصية will-change وأيها تستخدم قدرًا غير متناسب من الذاكرة . هذه هي الطريقة التي اكتشفنا بها مكونًا كبيرًا كان مخفيًا بعيدًا عن الشاشة مع تحديد موضع نسبي يبلغ -1000px خارج الشاشة ، مما تسبب في استخدام الذاكرة بمقدار بضعة ميغا بايت. أيضًا ، عند تصحيح أخطاء لوحة الرسم ، ضع في اعتبارك أن Safari يحتوي على مصحح أخطاء Canvas Memory Usage.

3D View Z-Index Debugger (Edge)

أداة أخرى مفيدة لتتبع مشكلات العرض ومشكلات الفهرس z هي عرض Edge ثلاثي الأبعاد لـ DOM ("الإعدادات" ← "المزيد من الأدوات" ← العرض ثلاثي الأبعاد). توفر الأداة تصورًا تفاعليًا لطبقات DOM و z-index . يمكنك حتى اختيار عرض DOM ملونًا بألوان الخلفية الفعلية لعناصر DOM أو إظهار سياقات التراص فقط.

لم يكن من الأسهل حقًا معرفة كيفية توزيع قيم z-index عبر الصفحة ، ولماذا لا تظهر التراكبات أو اللوحات كما هو متوقع عند تشغيلها.

تحديد أفضل لإمكانية الوصول (Chrome و Edge و Firefox)

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

في Chrome و Edge ، تعرض لوحة "إمكانية الوصول" شجرة إمكانية الوصول وسمات ARIA المستخدمة والخصائص المحسوبة. عند استخدام منتقي الألوان ، يمكنك التحقق من الألوان وضبطها بسهولة لتلائم نسبة التباين المتوافقة مع AA / AAA (جنبًا إلى جنب مع القدرة على التبديل بين HEX و RGB و HSL مع Shift + Click on swatch - شكرًا Ana! ).

كما ذكرنا سابقًا ، تتيح لك لوحة "العرض" أيضًا محاكاة أوجه القصور في الرؤية. تتضمن عمليات تدقيق Lighthouse أيضًا قسمًا به توصيات حول إمكانية الوصول إلى الصفحة. بالإضافة إلى ذلك ، عند فحص عنصر ، تظهر معلومات إمكانية الوصول في النظرة العامة أيضًا.

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

بالإضافة إلى ذلك ، يمكنك تثبيت ملحقات تركز على إمكانية الوصول مثل Accessibility Insights و ax و a11y.css ، جنبًا إلى جنب مع بعض أدوات الوصول الأخرى ومحاكيات رؤية الألوان.

الجدير بالذكر

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

• مفتشو CSS Grid / Flexbox (Firefox ، Chrome ، Edge)
  إذا كانت لديك أي مشكلة في التخطيط تتعلق بشبكة Grid و Flexbox ، فمن المحتمل أن تجد سببًا للمشكلة عبر DevTools. يعد مفتشو Grid و Flexbox مفيدون للغاية حيث يعرضون تراكب الشبكة وحدود الحاويات ، بالإضافة إلى تلميحات حول كل شيء من flex-basis إلى grid-gap .

• تعابير حية
  إذا كنت معتادًا على كتابة نفس تعبير JavaScript في وحدة التحكم ، فيمكنك النظر في أتمتة ذلك باستخدام Live Expressions. تتيح لك الميزة ، المتوفرة في Chrome و Edge و Firefox ، كتابة تعبير مرة واحدة ثم تثبيته في الجزء العلوي من وحدة التحكم الخاصة بك ، وسيتم تحديث قيمة التعبير المباشر تلقائيًا.

• لوحة الرسوم المتحركة
  يحتوي Firefox على لوحة سهلة الاستخدام لتتبع المشكلات المتعلقة بالرسوم المتحركة ، بما في ذلك إبطائها وتصور كيفية تغير عنصر بمرور الوقت.

• لوحة الخطوط
  يحتوي Firefox أيضًا على لوحة "خطوط" مفيدة تستحق الاستكشاف لأي نوع من المشكلات المتعلقة بالخط. استخدمناه كثيرًا عند محاولة مطابقة الخط الاحتياطي مع خط الويب ، على سبيل المثال ، حيث يمكنك تحسين خصائص الطباعة باستخدام شريط التمرير ورؤية التأثير أثناء العمل. يوفر أيضًا معاينات نصية عند التمرير فوق عائلة خطوط في الأنماط.

• نظرة عامة على CSS
  إذا قمت بتنشيط "نظرة عامة حول CSS" في إعدادات Chrome التجريبية ، فستضيف DevTools علامة تبويب بتقرير شامل لإعلانات CSS المستخدمة في الصفحة. سوف يسرد أيضًا جميع الألوان والخطوط المستخدمة ، بالإضافة إلى استعلامات الوسائط والإعلانات غير المستخدمة التي يمكنك الانتقال إليها على الفور.

و هذا ملف!

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

أيضًا ، شكر كبير لجميع المساهمين في جميع DevTools عبر جميع المتصفحات - نشيد بك على جهودك ووقتك وجهدك لتحسين تجارب التطوير لدينا. لا يهم.

إذا فاتنا شيئًا ذا قيمة ، فيرجى الرد في التعليقات. وإذا وجدت شيئًا مفيدًا ، فنحن نأمل أن تتمكن من تطبيق هؤلاء المساعدين الصغار على سير عملك على الفور ، وربما إرسال ارتباط إلى هذا المنشور إلى صديق أو اثنين - ربما سيجدونه مفيدًا. آه ، ولا تنس: يمكنك أيضًا تصحيح أخطاء DevTools باستخدام DevTools - فقط اضغط على Cmd / Ctrl + Shift + I مرتين على التوالي. ؛-)

الآن ، تصحيح أخطاء سعيد للجميع!