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

تصفح التاريخ تفاعليًا

[مراجعة غير مفحوصة]

[نسخة منشورة]

→ التعديل السابق

تم حذف المحتوى تمت إضافة المحتوى

مرئينص الويكي

نسخة 20:25، 8 يوليو 2018 عدل JarBot (نقاش \| مساهمات) 17٬592٬533 تعديل ط بوت:تحويل http إلى https للوصول للنسخة الآمنة) → التعديل السابق		النسخة الحالية 09:32، 29 فبراير 2024 عدل تراجع MenoBot (نقاش \| مساهمات) بوتات 3٬024٬450 تعديل ط بوت: إصلاح أخطاء فحص ويكيبيديا من 1 إلى 104 وسم: أوتوويكي براوزر
(23 مراجعة متوسطة بواسطة 9 مستخدمين غير معروضة)
سطر 1: ~~{{يتيمة\|تاريخ=يوليو 2018}}~~ ~~'''~~ == أدوات تطوير المواقع == ~~'''~~ أدوات تطوير المواقع تسمح ل[[مطور ويب\|مطوري المواقع]] لإختبار و اصلاح اخطاء أكوادهم. هناك إختلاف بين إنشاء مواقع و بيئات التطوير المتكاملة. بيئات التطوير المتكاملة لا تساعد مباشرةً في بناء صفحات المواقع بل هي أدوات تستخدم لإختبار واجهة المستخدم للموقع و [[تطبيق ويب\|تطبيقات المواقع]]. ▼ ▲أدوات تطوير المواقع تسمح ل[[مطور ويب\|مطوري المواقع]] ~~لإختبار~~لاختبار ~~و اصلاح~~واصلاح اخطاء أكوادهم. هناك ~~إختلاف~~اختلاف بين إنشاء مواقع ~~و بيئات~~وبيئات التطوير المتكاملة. بيئات التطوير المتكاملة لا تساعد مباشرةً في بناء صفحات المواقع بل هي أدوات تستخدم ~~لإختبار~~لاختبار واجهة المستخدم للموقع و [[تطبيق ويب\|تطبيقات المواقع]]. أدوات تطوير المواقع عبارة عن وظائف إضافية أو مميزات مدمجة في متصفحات المواقع. من أشهر المتصفحات المتعارف عليها: [[قوقل]] كروم، [[فايرفوكس]]، [[أوبرا]]، [[انترنت اكسبلورر]]، متصفح اليو سي و [[سفاري]]. متصفحات المواقع تمتلك أدوات مدمجة تساعد مطوري المواقع و العديد من المميزات الإضافية يستطيع المطور أن يجد المميزات و يحملها من مواقع التحميل الخاصة في كل ميزة. ▼ ▲أدوات تطوير المواقع عبارة عن وظائف إضافية أو مميزات مدمجة في متصفحات المواقع. من أشهر المتصفحات المتعارف عليها: [[جوجل\|قوقل]] كروم، [[فايرفوكس]]، [[أوبرا (توضيح)\|أوبرا]]، [[إنترنت إكسبلورر\|انترنت اكسبلورر]]، متصفح اليو سي و [[سفاري]]. متصفحات المواقع تمتلك أدوات مدمجة تساعد مطوري المواقع ~~و العديد~~والعديد من المميزات الإضافية يستطيع المطور أن يجد المميزات ~~و يحملها~~ويحملها من مواقع التحميل الخاصة في كل ميزة. إضافة إلى أن أدوات تطوير المواقع تسمح لمطور النواقع على العمل على تقنيات مختلفة، من ضمنها اللغات الخاصة بالتصميم واجهات المواقع (html “hypertext markup language) [[لغة ترميز النص الفائق\|لغة ترميز النص التشعبي]] , [[صفحات الطرز المتراصة]] Cascading style sheets ( لغة تنسيق لصفحات الويب تهتم بشكل وتصميم المواقع ), "( DOM “ Document Object Model) نموذج كائن المستند و لغة البرمجة [[جافا سكريبت]].▼ ، و العديد من المكونات التي يمكن أن يتعامل معها متصفح الموقع. و هناك طلب متزايد من متصفحات المواقع لإضافة مميزات أخرى لذلك شملت المتصفحات المواقع الشائعة مميزات أكثر موجهة للمطورين. ▼ ▲إضافة إلى أن أدوات تطوير المواقع تسمح لمطور النواقع على العمل على تقنيات مختلفة، من ضمنها اللغات الخاصة بالتصميم واجهات المواقع (html “hypertext markup language) [[لغة ~~ترميز~~توصيف النص الفائق\|لغة ترميز النص التشعبي]]، [[أوراق ,الأنماط [[المتتالية\|صفحات الطرز المتراصة]] Cascading style sheets ( لغة تنسيق لصفحات الويب تهتم بشكل وتصميم المواقع ), "( DOM “ Document Object Model) نموذج كائن المستند ~~و لغة~~ولغة البرمجة [[جافا سكريبت]]. ▲، ~~و العديد~~والعديد من المكونات التي يمكن أن يتعامل معها متصفح الموقع. ~~و هناك~~وهناك طلب متزايد من متصفحات المواقع لإضافة مميزات أخرى لذلك شملت المتصفحات المواقع الشائعة مميزات أكثر موجهة للمطورين. ~~'''~~ == دعم أدوات المطورين == ~~'''~~ أشهر خمسة متصفحات مواقع لديها دعم لأدوات مطوري المواقع<ref>[~~https~~http://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> ~~و تسمح~~وتسمح لمصممين ~~و مطورين~~ومطورين المواقع لنظر في تكوين صفحاتهم. جميع هذه الأدوات تم بنائها في المتصفحات ~~و لا~~ولا تتطلب تكوين أو وحدات إضافية. * قوقل كروم - أدوات مطوري المواقع " «أو أدوات تطوير البرامج"». <ref>[https://~~developer~~developers.~~chrome~~google.com/web/tools/chrome-devtools Chrome DevTools Overview - Google Chrome<!-- عنوان مولد بالبوت -->] {{Webarchive\|url=https://web.archive.org/web/20180911115422/https://developer.chrome.com/devtools \|date=11 سبتمبر 2018}}</ref> * إنترنت اكسبلورر ~~و مايكروسفت~~ومايكروسفت إيدج - أدوات مطوري المواقع ( من الإصدار ٨ 8).<ref>[https://~~msdn~~docs.microsoft.com/en-us/~~library~~previous-versions/windows/internet-explorer/ie-developer/dev-guides/hh673541(v=vs.85)~~.aspx~~?redirectedfrom=MSDN 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~~edgehtml/ 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 “لإكتشفاف أن هنا لك خطأ ". * أوبرا - Opera Dragonfly ~~'''~~ == الخصائص المشتركة == ~~'''~~ يتم الوصول إلى أدوات مطوري المواقع في المتصفح بصفة عامة من خلال صفحة الموقع و اختبار " فحص عنصر " أو خيار مشابهة من القائمة. و بدلًا من ذلك، يوجد اختصار مشترك أيضًا و هو مفتاح F12. <ref>https://developers.google.com/chrome-developer-tools/docs/overview#access</ref>▼ ▲يتم الوصول إلى أدوات مطوري المواقع في المتصفح بصفة عامة من خلال صفحة الموقع ~~و اختبار "~~واختبار «فحص عنصر "» أو خيار مشابهة من القائمة. ~~و بدلًا~~وبدلًا من ذلك، يوجد اختصار مشترك أيضًا ~~و هو~~وهو مفتاح F12. <ref>[https://developers.google.com/web/tools/chrome-devtools/#access Not Found - Google Chrome<!-- عنوان مولد بالبوت -->] {{Webarchive\|url=https://web.archive.org/web/20130403085039/https://developers.google.com/chrome-developer-tools/docs/overview~~#access~~ \|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<!-- عنوان مولد بالبوت -->]</ref>▼ ▲~~‎محرر~~محرر ~~و مشاهد~~ومشاهد لغة ترميز النص التشعبي ~~و نموذج~~ونموذج كائن المستند يتم تضمينها بشكل مشترك في أدوات تطوير المواقع. الفرق بين ترميز النص التشعبي ~~و عارض~~ وعارض نموذج كائن المستند هو ميزة المصدر في متصفحات المواقع في حين أن عارض ترميز النص التشعبي ~~و نموذج~~ونموذج كائن المستند يسمح لك بمشاهدة نموذج كائن المستند كما تم تقديمه بالإضافة إلى أنه يسمح لك بإجراء تغييرات على ترميز النص التشعبي ~~و ترميز~~وترميز النص التشعبي ~~و مشاهدة~~ومشاهدة التغييرات المنعكسة في الصفحة بعد إجراء التغييرات.<ref>[https://~~msdn~~docs.microsoft.com/en-us/~~library~~previous-versions/windows/internet-explorer/ie-developer/samples/gg589512(v=vs.85)~~.aspx~~?redirectedfrom=MSDN 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 ▼ ▲بالإضافة ~~لإختيار~~لاختيار التغييرات، فعادة تعرض عناصر ترميز النص التشعبي خصائص كائن نموذج كائن ~~المستند ،~~المستند، مثل بُعد العرض ~~و خصائص~~وخصائص css == أصول صفحة الموقع ووالمصادر ~~المصادر و معلومات~~ومعلومات الشبكة ==▼ ~~'''~~ ▲== أصول صفحة الموقع و المصادر و معلومات الشبكة == ~~'''~~ عادة يتم تحميل صفحات المواقع و تتطلب محتوى إضافي مثل صور و مخطوطات و خط و ملفات خارجية أخرى. أيضا أدوات تطوير المواقع تسمح للمطورين بفحص المصادر التي يتم تحميلها على صفحة الموقع على هيكلة شجرة. <ref>[https://developers.google.com/chrome-developer-tools/docs/resources Resources Panel - Google Chrome<!-- عنوان مولد بالبوت -->]</ref><ref>[https://blog.mozilla.org/blog/2012/10/09/firefox-debuts-new-developer-toolbar/ Firefox Debuts New Developer Toolbar - The Mozilla Blog<!-- عنوان مولد بالبوت -->]</ref>▼ أدوات تطوير المواقع تسمح أيضا للمطورين في إمكانية عرض معلومات حول استعمال الشبكة، مثل عرض مدة التحميل و استخدام النطاق الترددي و رؤوس [[بروتوكول نقل النص الفائق]] التي يتم إرسالها و استقبالها. <ref>[https://developers.google.com/chrome-developer-tools/docs/network Measure Resource Loading Times \| Tools for Web Developers \| Google Developers<!-- عنوان مولد بالبوت -->]</ref>▼ ▲عادة يتم تحميل صفحات المواقع ~~و تتطلب~~وتتطلب محتوى إضافي مثل صور ~~و مخطوطات و خط~~ومخطوطات ووخط ~~ملفات~~وملفات خارجية أخرى. أيضا أدوات تطوير المواقع تسمح للمطورين بفحص المصادر التي يتم تحميلها على صفحة الموقع على هيكلة شجرة. <ref>[https://developers.google.com/web/tools/chrome-~~developer-tools~~devtools/~~docs/resources~~dom 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/web/tools/chrome-~~developer-tools~~devtools/~~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<!-- عنوان مولد بالبوت -->]</ref><ref>[https://msdn.microsoft.com/en-us/library/hh180764(v=vs.85).aspx F12 developer tools console error messages (Windows) \| Microsoft Docs<!-- عنوان مولد بالبوت -->]</ref>▼ ▲تزود خصائص التعديل للمطورين ~~اقتراحات ،~~اقتراحات، بعد تحليل الصفحة، للتحسينات لتقليل وقت تحميل الصفحة ~~و زيادة~~وزيادة الاستجابة . تتيح هذه المميزات للمطورين تحسين صفحات المواقع و تطبيقات المواقع. ▼ ▲توفر أدوات تطوير المواقع أيضا عادة ميزات جدول زمني توفر سجلًا للوقت ~~و المدة~~والمدة التي يستغرقها في عرض ~~الصفحة ، و استخدام الذاكرة~~الصفحة، ،واستخدام والذاكرة، ~~أنواع~~وأنواع الأحداث التي تحدث. <ref>[https://developers.google.com/web/tools/chrome-~~developer-tools~~devtools/~~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~~docs.microsoft.com/en-us/~~library~~previous-versions/windows/internet-explorer/ie-developer/samples/hh180764(v=vs.85)~~.aspx~~?redirectedfrom=MSDN 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 حتى تتمكن من تحرير ملفات تعريف الارتباط بسهولة أكبر.▼ ▲تستخدم جافا سكريبت بشكل شائع في متصفحات المواقع. تتضمن أدوات تطوير الموقع عادة لوحة ل[[~~تنقيح~~تصحيح برمجي\|تصحيح أخطاء]] البرامج من خلال السماح للمطورين بإضافة تعبيرات ~~و نقاط~~ونقاط التوقف ~~و الإيقافات~~والإيقافات المؤقتة ~~و الخروج~~والخروج من الدالات أثناء تصحيح أخطاء الجافا سكريبت. ▲تتضمن الجافا سكريبت لوحة تحكم. لوحة التحكم تسمح للمطورين لكتابة أوامر ~~و استدعاء~~واستدعاء دوال الجافا سكريبت أو مشاهدة الأخطاء التي قد تكون واجهتها أثناء تنفيذ البرنامج النصي. ▲== الإضافات ~~و المكونات~~والمكونات الإضافية == ▲تدعم المتصفحات المواقع الحديثة استخدام [[برنامج مساعد (حوسبة)\|إضافات]] ووظائف أخرى. هناك العديد من المكونات الإضافية الشائعة التي تضيف ميزات غير تلك التي تدعمها أدوات مطوري المواقع. يمكن أن تتراوح الميزات من إمكانية تعطيل جافا سكريبت و CSS حتى تتمكن من تحرير ملفات تعريف الارتباط بسهولة أكبر. ~~'''== المصادر =='''~~ ~~[[مراجع]]~~ == ~~مراجع~~انظر أيضًا == * [[دورة حياة تطوير الأنظمة]] * [[الشبكة العنكبوتية العالمية\|شبكة عنكبوتية عالمية]] == المراجع == {{مراجع}} {{روابط شقيقة}} {{شريط بوابات\|إنترنت\|تقانة}} {{ضبط استنادي}} [[تصنيف:أدوات برمجة]] ~~{{غير مصنفة\|تاريخ=يوليو 2018}}~~ [[تصنيف:تطوير الويب]]