أدوات تطوير الويب

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

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

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

قام مطورو الويب الأوائل بتصحيح أخطاء مواقع الويب الخاصة بهم يدويًا عن طريق التعليق على التعليمات البرمجية واستخدام وظائف JavaScript . كانت إحدى أدوات تصحيح أخطاء المتصفح الأولى التي ظهرت هي ملحق Firebug من Mozilla ، والذي امتلك العديد من الميزات الأساسية الحالية لأدوات المطورين اليوم، مما أدى إلى انتشار Firefox بين المطورين في ذلك الوقت. قدم محرك WebKit الخاص بـ Safari أيضًا أدوات المطورين المتكاملة الخاصة به في تلك الفترة، والتي أصبحت في النهاية الأساس لكل من أدوات Safari و Chrome الحالية. ^{[1] [2] [3]} أصدرت Microsoft شريط أدوات للمطورين لـ Internet Explorer 6 و 7؛ ثم دمجتهما في المتصفح من الإصدار 8 فصاعدًا. ^{[4] [5]} في عام 2017، أوقفت Mozilla Firebug لصالح أدوات المطورين المتكاملة. ^[6]

في الوقت الحاضر، تدعم جميع متصفحات الويب الحديثة أدوات مطوري الويب التي تسمح لمصممي ومطوري الويب بالاطلاع على مكونات صفحاتهم. وهذه كلها أدوات مدمجة في المتصفح ولا تتطلب وحدات إضافية أو تكوينًا. ^[7]

• Firefox – F12يفتح Firefox DevTools. ^[8]
• Google Chrome و Opera – أدوات المطور (DevTools) ^{[9] [10]}
• Microsoft Edge – يفتح أدوات مطوري الويب. ^{[11] [12]} تتضمن Microsoft ميزات إضافية غير مضمنة في Chromium الرئيسي . ^[13]F12
• Safari – يجب تمكين Safari Web Inspector من جزء الإعدادات الخاص به. ^{[14] [15] [3]}

يمكن الوصول إلى أدوات مطور الويب المضمنة في المتصفح عادةً عن طريق تحريك المؤشر فوق عنصر على صفحة ويب وتحديد "فحص العنصر" أو خيار مماثل من قائمة السياق . بدلاً من ذلك، يميل المفتاح إلى أن يكون اختصارًا شائعًا آخر. ^[7]F12

يتم تضمين عارض ومحرر HTML و DOM بشكل شائع في أدوات تطوير الويب المضمنة. الفرق بين عارض HTML وDOM وميزة عرض المصدر في متصفحات الويب هو أن عارض HTML وDOM يسمح لك برؤية DOM كما تم تقديمه بالإضافة إلى السماح لك بإجراء تغييرات على HTML وDOM ورؤية التغيير المنعكس في الصفحة بعد إجراء التغيير. ^{[16] [3] [7]}

بالإضافة إلى التحديد والتحرير، ستعرض لوحات عناصر HTML عادةً أيضًا خصائص كائن DOM، مثل أبعاد العرض وخصائص CSS. ^[17]

يسمح كل من Firefox وSafari وChrome وEdge للمستخدمين بمحاكاة المستند على جهاز محمول عن طريق تعديل أبعاد منفذ العرض وكثافة البكسل . ^[18] بالإضافة إلى ذلك، يتمتع كل من Firefox وChrome بخيار محاكاة عمى الألوان للصفحة. ^[19]

عادةً ما تقوم صفحات الويب بتحميل محتوى إضافي في هيئة صور ونصوص وخطوط وملفات خارجية أخرى وتتطلب ذلك. كما تسمح أدوات تطوير الويب للمطورين بفحص الموارد المحملة والمتاحة على صفحة الويب في قائمة هيكلية شجرية، ويمكن اختبار مظهر أوراق الأنماط في الوقت الفعلي. ^{[20] [21] [7]}

تتيح أدوات تطوير الويب للمطورين أيضًا عرض معلومات حول استخدام الشبكة، مثل عرض وقت التحميل واستخدام النطاق الترددي ورؤوس HTTP التي يتم إرسالها واستلامها. ^[22] يمكن للمطورين معالجة طلبات الشبكة وإعادة إرسالها. ^{[23] [18]}

يتيح إنشاء ملف تعريف للمطورين التقاط معلومات حول أداء صفحة ويب أو تطبيق ويب. وباستخدام هذه المعلومات، يمكن للمطورين تحسين أداء نصوصهم البرمجية. وقد توفر ميزات التدقيق للمطورين اقتراحات، بعد تحليل الصفحة، لتحسينات لتقليل وقت تحميل الصفحة وزيادة الاستجابة. كما توفر أدوات تطوير الويب عادةً سجلاً للوقت الذي يستغرقه عرض الصفحة واستخدام الذاكرة وأنواع الأحداث التي تحدث. ^{[24] [25] [3]}

تسمح هذه الميزات للمطورين بتحسين صفحة الويب أو تطبيق الويب الخاص بهم. ^[26]

تُستخدم JavaScript بشكل شائع في متصفحات الويب. ^[16] تشتمل أدوات تطوير الويب عادةً على لوحة تصحيح أخطاء للبرامج النصية من خلال السماح للمطورين بإضافة تعبيرات المراقبة ونقاط التوقف وعرض مكدس النداء والإيقاف المؤقت والمتابعة والخطوة أثناء تصحيح أخطاء JavaScript. ^{[7] [3]}

غالبًا ما يتم تضمين وحدة تحكم أيضًا، والتي تسمح للمطورين بكتابة أوامر JavaScript واستدعاء الوظائف، أو عرض الأخطاء التي ربما تم مواجهتها أثناء تنفيذ البرنامج النصي. ^{[7] [3] [16]}

devtoolsتسمح واجهة برمجة التطبيقات لإضافات المتصفح بإضافة ميزاتها الخاصة إلى أدوات المطور. ^{[27] [28]}

• دورة حياة تطوير الويب