أدوات تطوير المواقع: الفرق بين النسختين

أدوات تطوير المواقع تسمح ل[[مطور ويب|مطوري المواقع]] لإختبارلاختبار و اصلاحواصلاح اخطاء أكوادهم. هناك إختلافاختلاف بين إنشاء مواقع و بيئاتوبيئات التطوير المتكاملة. بيئات التطوير المتكاملة لا تساعد مباشرةً في بناء صفحات المواقع بل هي أدوات تستخدم لإختبارلاختبار واجهة المستخدم للموقع و [[تطبيق ويب|تطبيقات المواقع]].

أدوات تطوير المواقع عبارة عن وظائف إضافية أو مميزات مدمجة في متصفحات المواقع. من أشهر المتصفحات المتعارف عليها: [[جوجل|قوقل]] كروم، [[فايرفوكس]]، [[أوبرا (توضيح)|أوبرا]]، [[إنترنت إكسبلورر|انترنت اكسبلورر]]، متصفح اليو سي و [[سفاري]]. متصفحات المواقع تمتلك أدوات مدمجة تساعد مطوري المواقع و العديدوالعديد من المميزات الإضافية يستطيع المطور أن يجد المميزات و يحملهاويحملها من مواقع التحميل الخاصة في كل ميزة.

إضافة إلى أن أدوات تطوير المواقع تسمح لمطور النواقع على العمل على تقنيات مختلفة، من ضمنها اللغات الخاصة بالتصميم واجهات المواقع (html “hypertext markup language) [[لغة ترميز النص الفائق|لغة ترميز النص التشعبي]] , [[أوراق الأنماط المتتالية|صفحات الطرز المتراصة]] Cascading style sheets ( لغة تنسيق لصفحات الويب تهتم بشكل وتصميم المواقع ), "( DOM “ Document Object Model) نموذج كائن المستند و لغةولغة البرمجة [[جافا سكريبت]].

أشهر خمسة متصفحات مواقع لديها دعم لأدوات مطوري المواقع<ref>[https://www.webdevelopersnotes.com/articles/popular-web-browsers.php Most popular web browsers<!-- عنوان مولد بالبوت -->] {{Webarchive|url=https://web.archive.org/web/20160322141133/http://www.webdevelopersnotes.com/articles/popular-web-browsers.php |date=22 مارس 2016}}</ref> و تسمح لمصممين و مطورينومطورين المواقع لنظر في تكوين صفحاتهم. جميع هذه الأدوات تم بنائها في المتصفحات و لاولا تتطلب تكوين أو وحدات إضافية.

* إنترنت اكسبلورر و مايكروسفتومايكروسفت إيدج - أدوات مطوري المواقع ( من الإصدار 8 ).<ref>[https://msdn.microsoft.com/en-us/library/ie/hh673541(v=vs.85).aspx F12 Developer Tools (Windows) | Microsoft Docs<!-- عنوان مولد بالبوت -->] {{Webarchive|url=https://web.archive.org/web/20141224070259/http://msdn.microsoft.com/en-us/library/ie/hh673541(v=vs.85).aspx |date=24 ديسمبر 2014}}</ref><ref>[https://docs.microsoft.com/en-us/microsoft-edge/f12-devtools-guide Microsoft Edge Developer Tools - Microsoft Edge Development | Microsoft Docs<!-- عنوان مولد بالبوت -->] {{Webarchive|url=https://web.archive.org/web/20171013221407/https://docs.microsoft.com/en-us/microsoft-edge/f12-devtools-guide |date=13 أكتوبر 2017}}</ref>

* سفاري - أدوات تطوير المواقع من سفاري<ref>[https://developer.apple.com/technologies/safari/developer-tools.html Tools - Safari for Developers - Apple Developer<!-- عنوان مولد بالبوت -->] {{Webarchive|url=https://web.archive.org/web/20140909193951/https://developer.apple.com/technologies/safari/developer-tools.html |date=09 سبتمبر 2014}}</ref> ( من الإصدار 3 )<ref>[[Safari version history]]</ref>

* فايرفوكس - وحدة تحكم الموقع / وحدة تحكم المتصفح ( من فايرفوكس 4 ). وحدة تحكم المواقع تنطبق على محتوى واحد من علامة التبويب ،التبويب، خلاف وحدة تحكم المتصفح تنطبق على المتصفح بأكمله و أيضًاوأيضًا توجد العديد من الإضافات مثل firebug “لإكتشفاف أن هنا لك خطأ ".

يتم الوصول إلى أدوات مطوري المواقع في المتصفح بصفة عامة من خلال صفحة الموقع و اختبارواختبار " فحص عنصر " أو خيار مشابهة من القائمة. و بدلًا من ذلك، يوجد اختصار مشترك أيضًا و هووهو مفتاح F12.<ref>[https://developers.google.com/chrome-developer-tools/docs/overview#access Not Found - Google Chrome<!-- عنوان مولد بالبوت -->] {{Webarchive|url=https://web.archive.org/web/20130403085039/https://developers.google.com/chrome-developer-tools/docs/overview |date=3 أبريل 2013}}</ref>

محرر و مشاهدومشاهد لغة ترميز النص التشعبي و نموذجونموذج كائن المستند يتم تضمينها بشكل مشترك في أدوات تطوير المواقع. الفرق بين ترميز النص التشعبي و عارض وعارض نموذج كائن المستند هو ميزة المصدر في متصفحات المواقع في حين أن عارض ترميز النص التشعبي و نموذجونموذج كائن المستند يسمح لك بمشاهدة نموذج كائن المستند كما تم تقديمه بالإضافة إلى أنه يسمح لك بإجراء تغييرات على ترميز النص التشعبي و ترميزوترميز النص التشعبي و مشاهدةومشاهدة التغييرات المنعكسة في الصفحة بعد إجراء التغييرات.<ref>[https://msdn.microsoft.com/en-us/library/gg589512(v=vs.85).aspx Introduction to F12 Developer Tools (Windows) | Microsoft Docs<!-- عنوان مولد بالبوت -->] {{Webarchive|url=https://web.archive.org/web/20171107112044/https://msdn.microsoft.com/en-us/library/gg589512(v=vs.85).aspx |date=07 نوفمبر 2017}}</ref>

بالإضافة لإختيارلاختيار التغييرات، فعادة تعرض عناصر ترميز النص التشعبي خصائص كائن نموذج كائن المستند ،المستند، مثل بُعد العرض و خصائصوخصائص css

== أصول صفحة الموقع و المصادروالمصادر و معلومات الشبكة ==

عادة يتم تحميل صفحات المواقع و تتطلبوتتطلب محتوى إضافي مثل صور و مخطوطاتومخطوطات و خط و ملفاتوملفات خارجية أخرى. أيضا أدوات تطوير المواقع تسمح للمطورين بفحص المصادر التي يتم تحميلها على صفحة الموقع على هيكلة شجرة.<ref>[https://developers.google.com/chrome-developer-tools/docs/resources Resources Panel - Google Chrome<!-- عنوان مولد بالبوت -->] {{Webarchive|url=https://web.archive.org/web/20140327013818/https://developers.google.com/chrome-developer-tools/docs/resources |date=27 مارس 2014}}</ref><ref>[https://blog.mozilla.org/blog/2012/10/09/firefox-debuts-new-developer-toolbar/ Firefox Debuts New Developer Toolbar - The Mozilla Blog<!-- عنوان مولد بالبوت -->] {{Webarchive|url=https://web.archive.org/web/20180907032243/https://blog.mozilla.org/blog/2012/10/09/firefox-debuts-new-developer-toolbar/ |date=07 سبتمبر 2018}}</ref>

أدوات تطوير المواقع تسمح أيضا للمطورين في إمكانية عرض معلومات حول استعمال الشبكة، مثل عرض مدة التحميل و استخدامواستخدام النطاق الترددي و رؤوسورؤوس [[بروتوكول نقل النص الفائق]] التي يتم إرسالها و استقبالهاواستقبالها.<ref>[https://developers.google.com/chrome-developer-tools/docs/network Measure Resource Loading Times | Tools for Web Developers | Google Developers<!-- عنوان مولد بالبوت -->] {{Webarchive|url=https://web.archive.org/web/20140210032943/https://developers.google.com/chrome-developer-tools/docs/network |date=10 فبراير 2014}}</ref>

== التنميط و التدقيقوالتدقيق ==

تزود خصائص التعديل للمطورين اقتراحات ،اقتراحات، بعد تحليل الصفحة، للتحسينات لتقليل وقت تحميل الصفحة و زيادةوزيادة الاستجابة .

توفر أدوات تطوير المواقع أيضا عادة ميزات جدول زمني توفر سجلًا للوقت و المدةوالمدة التي يستغرقها في عرض الصفحة ، و استخدام الذاكرةالصفحة، ،واستخدام والذاكرة، أنواعوأنواع الأحداث التي تحدث.<ref>[https://developers.google.com/chrome-developer-tools/docs/profiles Profiles Panel - Google Chrome<!-- عنوان مولد بالبوت -->] {{Webarchive|url=https://web.archive.org/web/20140327014108/https://developers.google.com/chrome-developer-tools/docs/profiles |date=27 مارس 2014}}</ref><ref>[https://msdn.microsoft.com/en-us/library/hh180764(v=vs.85).aspx F12 developer tools console error messages (Windows) | Microsoft Docs<!-- عنوان مولد بالبوت -->] {{Webarchive|url=https://web.archive.org/web/20171107113216/https://msdn.microsoft.com/en-us/library/hh180764(v=vs.85).aspx |date=07 نوفمبر 2017}}</ref>

تتيح هذه المميزات للمطورين تحسين صفحات المواقع و تطبيقاتوتطبيقات المواقع.

تستخدم جافا سكريبت بشكل شائع في متصفحات المواقع. تتضمن أدوات تطوير الموقع عادة لوحة ل[[تنقيح برمجي|تصحيح أخطاء]] البرامج من خلال السماح للمطورين بإضافة تعبيرات و نقاطونقاط التوقف و الإيقافاتوالإيقافات المؤقتة و الخروجوالخروج من الدالات أثناء تصحيح أخطاء الجافا سكريبت.

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

== الإضافات و المكوناتوالمكونات الإضافية ==

تدعم المتصفحات المواقع الحديثة استخدام [[برنامج مساعد (حوسبة)|إضافات]] ووظائف أخرى. هناك العديد من المكونات الإضافية الشائعة التي تضيف ميزات غير تلك التي تدعمها أدوات مطوري المواقع. يمكن أن تتراوح الميزات من إمكانية تعطيل جافا سكريبت و CSS حتى تتمكن من تحرير ملفات تعريف الارتباط بسهولة أكبر.