DevTools Showdown Edge's F12 vs Firefox vs Chrome

حصلت أدوات المطور من Microsoft Edge ، المستعرض الافتراضي الجديد لنظام التشغيل Windows 10 ، على تصميم حديث وبعض الميزات الجديدة مقارنةً بسابقه ، أدوات تطوير F12 الخاصة بـ Internet Explorer 11.

إن مسألة ما إذا كانت أدوات تطوير Microsoft Edge تصل إلى مستوى منافسيها المشهورين - أدوات التطوير في المتصفحات الحديثة الأخرى مثل Mozilla Firefox و Google Chrome - من الطبيعي أن تثار في أذهان العديد من المطورين.

في هذا المنشور ، نحاول الإجابة على هذا السؤال ، ومعرفة ما إذا كانت أدوات تطوير F12 من Edge جاهزة حقًا للاستخدام. سنقارن ميزاته بميزات أدوات مطوري Firefox و DevTools من Google Chrome.

افتح أدوات Dev

يؤدي الضغط على المفتاح F12 إلى فتح أدوات المطورين في جميع الحالات الثلاث: أدوات المطور في Firefox و DevTools في Chrome و F12 Dev Tools في Microsoft Edge. هذا هو اختصار لوحة المفاتيح حيث الاسم الرسمي لأدوات تطوير F12 الخاصة بـ Edge يأتي من.

عندما تفتح أدوات Dev's Dev ، يمكنك تجربة واحدة من أكثر أوجه القصور المعروفة: إنها حاليًا من المستحيل تثبيت الأدوات في نافذة موجودة. بينما يمكنك متابعة ما يحدث على الشاشة على أدوات مطوري Firefox و Chrome DevTools عن طريق تثبيت نافذة أدوات dev في أسفل الشاشة ، لا يمكنك (حاليًا) أن تفعل الشيء نفسه مع Edge.

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

فحص DOM

ال دوم إكسبلورر الأداة (اختصار: CTRL + 1) هي أول علامة تبويب في أدوات تطوير F12 من Microsoft Edge. تصميمها وتصميمها العام يشبه إلى حد كبير جزء علامة التبويب كروم و مفتش علامة التبويب في فايرفوكس ، ولكن القدرات تختلف بصر.

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

يمكنك تجربة مع قواعد CSS عن طريق حذف الحالية الحالية وإضافة جديدة ، ويمكنك أن ترى الخاص بك التغييرات الملخصة على علامة تبويب منفصلة تسمى “التغييرات” (وهي تقع على الجانب الأيسر). هذه الميزة الأخيرة ليست ميزة مضمّنة في Firefox Developer أو Chrome DevTools. يمكن أن يعطي خلاصة سريعة للمستخدم ، لذلك هو خيار مفيد حقا.

هناك بعض الميزات في أدوات مطوري Firefox التي لا توفرها Edge ولا Google Chrome حاليًا ، ولكنها يمكن أن تساعد بشكل كبير في حياة المصمم: أدوات محلل الخط والرسوم المتحركة.

في الحافة هناك منتقي اللون بارد على الرغم من أن هذا قد يعوض المستخدم إلى حد ما عن ذلك.

التفاعل مع جافا سكريبت

ال وحدة التحكم تتيح لك علامة التبويب (اختصار: CTRL + 2) في Microsoft Edge التفاعل مع جافا سكريبت لموقعك ، تمامًا مثل أدوات Firefox و Chrome Dev. يسمح لك الثلاثة باتباع أخطاء JavaScript في الوقت الفعلي ويمكنك أيضًا تحليلها عن طريق إدخال المدخلات الخاصة بك.

تتميز أداة Console من أدوات F12 Dev من Edge بإطلالة رائعة ميزة الإكمال التلقائي هذا يساعدك مع الأوامر ، ولكن يبدو أن يكون أقل دراية بالمقارنة مع أدوات Firefox و Chrome Dev.

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

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

فهم ما يفعله الكود الخاص بك

ال المصحح تساعدك الأداة (اختصار: CTRL + 3) على فهم ما يحدث في التعليمات البرمجية أثناء العثور على الأخطاء المحتملة. يمكنك ضبط الساعات ونقاط التوقف ، وعرض مكدسات المكالمات.

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

أدوات تطوير F12 من Edge تتيح لك توقف الشفرة الخاصة بك في منتصف التنفيذ ، وخطو خطوة بخطوة. لديك أيضا خيار ل تحسين إمكانية قراءة ملف JavaScript المترجم أو المصغر, ويمكنك تصحيح الموارد المختلفة (JavaScript ، امتدادات ، إلخ) واحدة تلو الأخرى.

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

ألقِ نظرة على متصفح خادم الاتصالات

ال شبكة الاتصال تم إعادة تصميم الأداة (اختصار: CTRL + 4) بالكامل لـ Microsoft Edge منذ Internet Explorer 11. بمساعدة هذه الأداة المفيدة ، يمكنك اتبع التواصل بين الخادم والمستعرض, وفحص الطلبات الفردية.

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

توفر علامة تبويب Edge's و Firefox's Network قدرات متشابهة تمامًا وواجهة مستخدم. يحتوي كلاهما على جزء من الشريط الجانبي سهل الاستخدام يتيح لك إلقاء نظرة على رأس HTTP للمورد المحدد ، ونص HTTP ، والمعلمات ، وملفات تعريف الارتباط ذات الصلة والتوقيتات عنصرًا تلو الآخر.

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

تعقب الصفحات البطيئة

ال أداء تساعدك علامة التبويب (اختصار: CTRL + 5) في فهم الأسباب الكامنة وراء صفحة ويب بطيئة. باستخدام أداة الأداء ، قفزت Microsoft قفزة هائلة للأمام من خلال الجمع بين السابقة استجابة واجهة المستخدم وملف التعريف أدوات لإنشاء طريقة عرض شاملة لجميع برامجك النصية وتصور الأداء.

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

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

تشخيص مشاكل الذاكرة

ال ذاكرة أداة (اختصار: CTRL + 6) تجعل من الممكن العثور على تسرب الذاكرة يمكن أن تبطئ أيضا صفحة الويب الخاصة بك ، علاوة على ذلك تؤثر على الاستقرار من موقعك.

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

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

اختبار موقعك على أحجام مختلفة للشاشة

ال محاكاة تتيح لك الأداة (اختصار: CTRL + 7) اختبار موقعك في ظل ظروف مختلفة. يمكنك الاختيار من بين ملفي تعريف المتصفح ، Desktop و Windows 10 Mobile ، ومن العديد من وكلاء المستخدمين المختلفين ، بما في ذلك جميع إصدارات سطح المكتب والأجهزة المحمولة من Internet Explorer إلى IE6 ، إلى جانب العديد من منافسي Edge ، Chrome ، Firefox ، Safari ، إلخ..

من المثير للاهتمام أن لديك خيار لاتخاذ إلقاء نظرة على صفحتك باعتبارها بوت بنج. بامكانك ايضا محاكاة GPS, وحدد قرارات وتوجهات مختلفة.

لا تحتوي أدوات مطوري Firefox على أداة مضاهاة للأجهزة ، ولكن Chrome DevTools لديه محاكي متطور لا يمكن أن تتنافس معه Edge معه.

على سبيل المثال ، تحتوي شاشة مضاهاة Chrome على شبكة دقيقة حيث يتم إدراج طريقة العرض التي تمت مضاهاتها فيها, ولا يمكنك فقط الاختيار من بين ملفات تعريف المتصفح ووكلاء المستخدم ، ولكن أيضًا من العديد من الأجهزة مثل إصدارات مختلفة من iPhone أو Samsung Galaxy وغيرها الكثير. يتميز محاكي Chrome DevTools أيضًا بأنه مفيد خيار التكبير ويمكنك اختبار موقعك على شبكات مختلفة مثل 3G ، 4G ، DSL ، WiFi ، إلخ.

ملخص

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

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