ما الجديد في DevTools: Cross-Browser Edition

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

إنه لأمر مخز ، لأن البعض منهم يمكن أن يجعلنا أكثر إنتاجية.

لذا ، هدفي من هذه المقالة هو زيادة الوعي ببعض أحدث الميزات في Chrome و Microsoft Edge و Firefox و Safari. نأمل أن تجعلك ترغب في تجربتها ، وربما تساعدك على الشعور براحة أكبر في المرة القادمة التي تحتاج فيها إلى تصحيح مشكلة خاصة بالمتصفح.

مع ذلك ، دعنا نقفز مباشرة.

Chrome DevTools

يعمل فريق Chrome DevTools بجد لتحديث قاعدة الرموز الخاصة بهم (التي يبلغ عمرها الآن 13 عامًا). لقد كانوا منشغلين في تحسين نظام الإنشاء ، والترحيل إلى TypeScript ، وتقديم WebComponents الجديدة ، وإعادة بناء البنية الأساسية للقوالب الخاصة بهم ، وأكثر من ذلك بكثير. نتيجة لذلك ، أصبحت الأدوات الآن أسهل في التوسع والتغيير.

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

التقاط التمرير

يوفر CSS scroll-snapping لمطوري الويب طريقة للتحكم في الموضع الذي تتوقف فيه الحاوية القابلة للتمرير عن التمرير. إنها ميزة مفيدة ، على سبيل المثال ، قوائم طويلة من الصور حيث تريد من المتصفح وضع كل صورة بدقة داخل الحاوية القابلة للتمرير تلقائيًا نيابة عنك.

إذا كنت تريد معرفة المزيد حول التقاط التمرير ، فيمكنك قراءة وثائق MDN هذه ، وإلقاء نظرة على عروض Adam Argyle التوضيحية هنا.

الخصائص الرئيسية لالتقاط التمرير هي:

• scroll-snap-type ، والذي يخبر المتصفح بالاتجاه الذي يحدث فيه الانجذاب وكيفية حدوثه ؛
• scroll-snap-align ، الذي يخبر المتصفح بمكان الانجذاب.

قدمت Chrome DevTools ميزات جديدة تساعد في تصحيح هذه الخصائص الرئيسية:

• إذا كان عنصر ما يحدد الالتقاط بالتمرير باستخدام scroll-snap-type ، فإن اللوحة Elements تعرض شارة بجانبه.

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

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

في حين أن التقاط التمرير ليس ميزة CSS جديدة ، فإن الاعتماد منخفض إلى حد ما (أقل من 4٪ وفقًا لـ chromestatus.com) ، وبما أن المواصفات تغيرت ، لا يدعمها كل متصفح بنفس الطريقة.

آمل أن تجعل ميزة DevTools هذه الأشخاص يرغبون في اللعب أكثر بها واعتمادها في نهاية المطاف لمواقعهم.

استفسارات الحاويات

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

إذا كنت لا تعرف ما هي استعلامات الحاوية ، فإنني أقترح مراجعة مقالة Stephanie Eckles 'Primer On CSS Container Queries أولاً.

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

لحسن الحظ ، تتحرك الأشياء في هذا الفضاء ويدعم Chromium الآن استعلامات الحاوية وبدأ فريق Chrome DevTools في إضافة الأدوات التي تسهل البدء باستخدامها.

لم يتم تمكين استعلامات الحاوية افتراضيًا في Chromium حتى الآن (لتمكينها ، انتقل إلى chrome: // flags وابحث عن "استعلامات الحاوية") ، وقد يستغرق الأمر بعض الوقت حتى يتم تمكينها. علاوة على ذلك ، لا يزال عمل DevTools لتصحيحها في أيامه الأولى. لكن بعض الميزات المبكرة قد هبطت بالفعل.

• عند تحديد عنصر في DevTools يحتوي على أنماط قادمة من @container at-rule ، تظهر هذه القاعدة في الشريط الجانبي Styles بلوحة Elements. هذا مشابه لكيفية تقديم أنماط استعلامات الوسائط في DevTools وسيجعل من السهل معرفة مصدر نمط معين.

كما تظهر لقطة الشاشة أعلاه ، يعرض الشريط الجانبي للأنماط قاعدتين تنطبقان على العنصر الحالي. ينطبق الجزء السفلي على عنصر .media في جميع الأوقات ويوفر نمطه الافتراضي. ويتم تضمين الجزء العلوي في استعلام حاويةcontainer @container (max-width:300px) والذي لا يسري إلا عندما تكون الحاوية أضيق من 300 بكسل.

• علاوة على ذلك ، أعلى @container at-rule مباشرة ، يعرض جزء الأنماط ارتباطًا بالعنصر الذي تحل القاعدة إليه ، ويؤدي التمرير فوقه إلى عرض معلومات إضافية حول حجمه. بهذه الطريقة تعرف بالضبط سبب مطابقة استعلام الحاوية.

يعمل فريق Chrome DevTools بنشاط على هذه الميزة ويمكنك توقع المزيد في المستقبل.

تعاون الكروم

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

اثنان من المساهمين الأكثر نشاطًا في هذا المشروع هما Google و Microsoft ، وعندما يتعلق الأمر بـ DevTools ، فقد تعاونا في بعض الميزات المثيرة للاهتمام التي أود الانتقال إليها الآن.

أدوات تصحيح تخطيط CSS

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

شارك في هذا المشروع التعاوني مهندسين ومديري منتجات ومصممين من Microsoft و Google ، يعملون من أجل تحقيق هدف مشترك (تعرف على المزيد حول المشروع نفسه في حديثي في ​​BlinkOn).

من بين أشياء أخرى ، تمتلك DevTools الآن ميزات تصحيح أخطاء التخطيط التالية:

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

• محررات مرنة وشبكة للتلاعب بصريًا بالخصائص المختلفة.

• تسهل رموز المحاذاة في الإكمال التلقائي لـ CSS اختيار الخصائص والقيم.

• قم بتمييز مؤشر الماوس فوق الخاصية لفهم أجزاء الصفحة التي تنطبق عليها الخاصية.

يمكنك قراءة المزيد من المعلومات حول هذا الموضوع على مواقع وثائق Microsoft و Google.

الموقع

كان هذا مشروعًا تعاونيًا آخر تشارك فيه Microsoft و Google ، مما يجعل من الممكن الآن ترجمة جميع أدوات DevTools المستندة إلى Chromium إلى لغات أخرى غير الإنجليزية.

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

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

فيما يلي لقطة شاشة لما يبدو عليه في Chrome DevTools:

وإليك كيف تبدو Edge باللغة اليابانية:

Edge DevTools

تحولت Microsoft إلى Chromium لتطوير Edge منذ أكثر من عامين حتى الآن. بينما ، في ذلك الوقت ، تسبب في الكثير من المناقشات في مجتمع الويب ، لم يُكتب أو يُقال الكثير عنه منذ ذلك الحين. كان الأشخاص الذين يعملون على Edge (بما في ذلك DevTools) مشغولين على الرغم من ذلك ، ويحتوي المتصفح على الكثير من الميزات الفريدة الآن.

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

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

أدوات الفتح والإغلاق والتحريك

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

من ناحية أخرى ، من الصعب اكتشاف اللوحات التي لا يتم عرضها افتراضيًا ، حتى لو كانت مفيدة حقًا لك.

أضافت Edge 3 ميزات صغيرة لكنها قوية لمعالجة هذا الأمر:

• زر إغلاق في علامات التبويب لإغلاق الأدوات التي لم تعد بحاجة إليها ،
• زر + (زائد) في نهاية شريط علامات التبويب لفتح أي أداة ،
• خيار قائمة السياق لتحريك الأدوات.

يوضح GIF التالي كيف يمكن عمل أدوات الإغلاق والفتح في كل من منطقتي الدرج والرئيسية في Edge.

يمكنك أيضًا نقل الأدوات بين المنطقة الرئيسية ومنطقة الدرج:

• يؤدي النقر بزر الماوس الأيمن فوق علامة تبويب في الجزء العلوي إلى إظهار عنصر "نقل إلى أسفل" ، و
• يؤدي النقر بزر الماوس الأيمن على علامة تبويب في الدرج إلى إظهار عنصر "الانتقال إلى أعلى".

الحصول على مساعدة سياقية مع تلميحات أدوات DevTools

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

لمعالجة هذا الأمر ، أضافت Edge طريقة للانتقال مباشرة من الأدوات إلى وثائقها على موقع Microsoft على الويب.

تعمل ميزة Tooltips الجديدة هذه كتراكب قابل للتبديل يغطي الأدوات. عند التمكين ، يتم تمييز اللوحات وتقديم المساعدة السياقية لكل منها ، مع روابط إلى الوثائق.

يمكنك بدء تلميحات الأدوات بثلاث طرق مختلفة:

• باستخدام اختصار لوحة المفاتيح Ctrl + Shift + H في نظامي التشغيل Windows / Linux ( Cmd + Shift + H في نظام Mac) ؛
• بالانتقال إلى القائمة الرئيسية ( ... ) ، ثم الانتقال إلى "تعليمات" واختيار "Toggle the DevTools Tooltips" ؛
• باستخدام قائمة الأوامر وكتابة "تلميحات الأدوات".

تخصيص الألوان

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

أضافت Edge للتو عددًا من السمات الجديدة إلى DevTools ، بالإضافة إلى السمات الداكنة والفاتحة المتوفرة بالفعل. تم إضافة ما مجموعه 9 مواضيع جديدة. تأتي هذه من VS Code وبالتالي ستكون مألوفة للأشخاص الذين يستخدمون هذا المحرر.

يمكنك تحديد السمة التي تريد استخدامها من خلال الانتقال إلى الإعدادات (باستخدام F1 أو رمز الترس في الزاوية العلوية اليمنى) ، أو باستخدام قائمة الأوامر وكتابة theme .

Firefox DevTools

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

تصحيح أخطاء أشرطة التمرير غير المرغوب فيها

هل سألت نفسك يومًا: "من أين يأتي شريط التمرير هذا؟" أعلم أن لديّ ، والآن لدى Firefox أداة لتصحيح هذه المشكلة بالذات.

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

يمكنك العثور على مزيد من الوثائق حول هذا الموضوع هنا.

تصور ترتيب الجدولة

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

يحتوي Firefox على لوحة Accessibility Inspector مفيدة توفر معلومات حول شجرة إمكانية الوصول ، وتكتشف مشكلات إمكانية الوصول المختلفة وتقاريرها تلقائيًا ، وتتيح لك محاكاة أوجه القصور المختلفة في رؤية الألوان.

علاوة على هذه الميزات ، توفر اللوحة الآن تراكب صفحة جديدًا يعرض ترتيب الجدولة للعناصر القابلة للتركيز.

لتمكينه ، استخدم مربع الاختيار "إظهار ترتيب الجدولة" في شريط الأدوات.

يمكنك العثور على مزيد من الوثائق حول هذا الموضوع هنا.

أداة أداء جديدة تمامًا

لا تعتمد العديد من مجالات تطوير الويب على الأدوات بقدر ما يعتمد عليه تحسين الأداء. في هذا المجال ، تعد لوحة أداء Chrome DevTools هي الأفضل في فئتها.

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

اليوم ، تحل أداة الأداء الجديدة هذه محل لوحة أداء Firefox DevTools القديمة في الإصدارات السابقة للإصدار (Nightly and Developer Edition). خذها في جولة عندما تسنح لك الفرصة.

من بين أشياء أخرى ، يدعم ملف تعريف Firefox الجديد مشاركة ملفات التعريف مع الآخرين حتى يتمكنوا من مساعدتك في تحسين أداء حالة الاستخدام المسجلة الخاصة بك.

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

Safari Web Inspector

أخيرًا وليس آخرًا ، دعنا نتعرف على بعض ميزات Safari الحديثة.

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

تصحيح أخطاء شبكة CSS

مع Firefox و Chrome و Edge (وجميع المتصفحات القائمة على Chromium) التي تحتوي على أدوات مخصصة لتصور شبكات CSS وتصحيح أخطاءها ، كان Safari آخر متصفح رئيسي لا يمتلك هذا. حسنًا ، الآن يفعل!

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

• يتم عرض شارات الشبكة في لوحة Elements للبحث عن الشبكات بسرعة.
• يؤدي النقر فوق الشارة إلى تبديل تراكب التصور على الصفحة.
• يتم الآن عرض لوحة Layout جديدة في الشريط الجانبي. يسمح لك بتكوين تراكب الشبكة ، والاطلاع على قائمة جميع الشبكات على الصفحة وتبديل التراكب لهم.

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

الشيء الآخر المثير للاهتمام هو أن Safari قدم لوحة عناصر من 3 أجزاء ، تمامًا مثل Firefox ، والتي تتيح لك رؤية DOM ، وقواعد CSS للعنصر المحدد ، ولوحة Layout كلها مرة واحدة.

اكتشف المزيد حول CSS Grid Inspector في منشور مدونة WebKit.

عدد كبير من تحسينات المصحح

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

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

لكن Safari ركز أيضًا مؤخرًا على إضافة ميزات مبتكرة إلى مصحح الأخطاء الذي لا تمتلكه DevTools الأخرى.

البرنامج النصي Bootstrap:
يتيح لك Safari كتابة تعليمات JavaScript البرمجية التي يتم ضمان تشغيلها أولاً قبل أي نصوص على الصفحة. هذا مفيد جدًا للوظائف المضمنة في الأداة لإضافة عبارات debugger أو التسجيل على سبيل المثال.

تكوينات نقاط التوقف الجديدة:
تدعم جميع المتصفحات أنواعًا متعددة من نقاط التوقف مثل نقاط التوقف الشرطية ونقاط توقف DOM ونقاط توقف الأحداث والمزيد.

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

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

queryInstances وحدة التحكم queryHolders :
هاتان الوظيفتان مفيدتان حقًا عندما يبدأ موقعك في استخدام الكثير من كائنات JavaScript. في بعض المواقف ، قد يكون من الصعب تتبع التبعيات بين هذه الكائنات ، وقد يبدأ تسرب الذاكرة في الظهور أيضًا.

يحتوي Safari على أداة ذاكرة يمكنها المساعدة في حل هذه المشكلات عن طريق السماح لك باستكشاف لقطات كومة الذاكرة. لكن في بعض الأحيان تعرف بالفعل أي فئة أو كائن يسبب المشكلة وتريد معرفة الحالات الموجودة أو ما يشير إليها.

إذا كان Animal عبارة عن فئة JavaScript في تطبيقك ، queryInstances(Animal) مصفوفة من جميع مثيلاتها.

إذا كان foo كائنًا في تطبيقك ، queryHolders(foo) مصفوفة من جميع الكائنات الأخرى التي لها مراجع إلى foo .

خواطر ختامية

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

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

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

تجدر الإشارة إلى أن فرق DevTools في Microsoft و Mozilla و Apple و Google عادة ما تكون صغيرة إلى حد ما وتتلقى الكثير من التعليقات ، لذا فإن الإبلاغ عن مشكلة لا يعني أنه سيتم إصلاحها بسرعة ، لكنها تساعد ، وهذه الفرق تستمع .

فيما يلي بعض الطرق التي يمكنك من خلالها الإبلاغ عن الأخطاء أو طرح الأسئلة أو طلب الميزات:

• Firefox DevTools
  • يستخدم Firefox Bugzilla كمتعقب للأخطاء العامة وأي شخص مرحب به للإبلاغ عن الأخطاء أو طلب ميزات جديدة من خلال إنشاء إدخال جديد هناك. كل ما تحتاجه هو حساب GitHub لتسجيل الدخول.
  • يمكن الاتصال بالفريق إما على Twitter باستخدام حسابFirefoxDevTools أو تسجيل الدخول إلى دردشة Mozilla (ابحث عن وثائق حول الدردشة هنا).
• Safari Web Inspector
  • يستخدم Safari أيضًا تتبع الأخطاء العامة لأخطاء WebKit الخاصة بهم. فيما يلي وثائق حول كيفية البحث عن الأخطاء والإبلاغ عن أخطاء جديدة.
  • يمكنك أيضًا التواصل مع الفريق على Twitter باستخدامwebkit.
  • أخيرًا ، يمكنك أيضًا الإشارة إلى أخطاء حول Safari و Safari Web Inspector باستخدام مساعد الملاحظات.
• Edge DevTools
  • أسهل طريقة للإبلاغ عن مشكلة أو طلب ميزة ما هي باستخدام زر التعليقات في DevTools (الشكل الصغير الموجود في الزاوية العلوية اليمنى من الأدوات).
  • يعمل طرح الأسئلة على الفريق بشكل أفضل عبر Twitter من خلال ذكر حسابEdgeDevTools.
• Chrome DevTools
  • يستمع الفريق إلى التعليقات على القائمة البريدية لـ devtools-dev وكذلك على Twitter علىChromeDevTools.
• الكروم
  • نظرًا لأن Chromium هو مشروع مفتوح المصدر يعمل على تشغيل Google Chrome و Microsoft Edge (وغيرهما) ، يمكنك أيضًا الإبلاغ عن مشكلات في متتبع أخطاء Chromium.

مع ذلك ، شكرا لك على القراءة!