أفضل 20 إضافة للمتصفحات لتطوير الويب

[عاشق الصداقه 525]

هناك الكثير من الاضافات والملحقات للمتصفحات التي تساعد في جعل عملية التصفح أكثر سهولة ومتعة، ولكن هناك أيضا إضافات خاصة ل

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

 

 

Firefox

• Firebug
  لعلها تكون أهم أداة لتطوير وتحليل مواقع الويب، بالنسبة لي على الأقل. تتيح لك هذه الأداة التحليل العميق لكل ما يتعلق بصفحة الموقع، فحص وتعديل HTML، تعديل CSS مباشرة ورؤية التأثير على الفور، مراقبة حركة الشبكة، معرفة وتحليل المشاكل المتعلقة بالجافاسكربت، استكشاف عناصر ومحتويات DOM، والكثير من المزايا المثيرة.
  
• Web Developer toolbar
  لا يمكنني تخيل حياتي المهنية في مجال الويب بدون هذه الأداة الرائعة، فهي تجمع كل ما تريد عمله على صفحة الموقع في شريط toolbar، سواء كان تعطيل/تفعيل CSS على الصفحة، تعطيل/تفعيل Javascript، تغيير حجم المتصفح لرؤية الصفحة على عدد من حجم الشاشات 1024 * 768 على سبيل المثال.
  
• YSlow
  تم تطوير هذه الإداة من قبل مطوري شركة Yahoo! ليعمل بالتكامل مع إضافة Firebug لتحليل مواقع الويب من جهة المستخدم ليعطي تقرير كامل لكفائة أداء الموقع وبعض النصائح التي يجب اتباعها لرفع سرعة وكفاءة الموقع، والطريقة التي تعمل بها هذه الأداة هي عبر مقارنة الموقع مع نصائح Yahoo لرفع سرعة المواقع.
  
• ColorZilla
  تساعد هذه الإضافة مطوري ومصممي الويب في مهام تحديد الألوان على الصفحة وسهولة الحصول على أرقام الألوان المختلفة، وتساعد أيضا في معرفة أي عنصر في الصفحة يحوي اللون المعين مع إمكانية تصغير وتكبير ومعرفة القياس بين أي نقطتين على الصفحة، وبالمناسبة في النسخة الأخيرة تم دمج بعض الخصائص لتعمل بالتكامل مع إضافة Firebug.
  
• LiveHTTPHeaders
  تتيح هذه الإضافة لمتصفح Firefox معرفة مايدور خلف كواليس المواقع وتحليل طلبات/معطيات HTTP request/response headers والتي تكون جدا مفيدة في معرفة مشاكل المواقع، معرفة معلومات أكثر عن خادم المواقع، معرفة ما يزرع داخل Cookies من معلومات.
  
• Modify Headers
  يمكنك عن طريق هذه الإضافة من إضافة، تعديل وترشيح HTTP request headers.
  
• Firefox Accessibility Extension
  تمكن هذه الإضافة من مساعدة الأشخاص ذوي الاحتياجات الخاصة من التصفح بشكل مريح، وفي نفس الوقت تتيح لمطوري الويب من تعديل مواقعهم بما يتناسب مع هذه الفئة من الناس وجعل المواقع قابلة للوصول بشكل أفضل.
  
• FireFTP
  FireFTP يتيح استخدام بروتوكول FTP بطريقة سهلة ومريحة من دون الحاجة إلى استخدام أي برنامج آخر غير متصفحك.
  
• Fangs
  إداة Fangs تتيح لك تحويل الصفحة الحالية إلى صفحة نصية فقط كما يتم قرائتها من قبل متصفحات الشاشات أو ما تعرف Screen reader والتي يستخدمها المصابون بضعف أو انعدام الرؤية، وهي من الإضافات المهمة إذا كنت مهتم بأن يكون موقعك موافق لمعايير قابلية الوصول.
  

Internet Explorer

• Internet Explorer Web Developer Toolbar
  تعتبر هذه الإضافة بمثابة Firebug لمتصفح Internet Explorer، حيث تتيح لك هذه الإضافة من استكشاف عناصر DOM الموجودة في الصفحة وإماكنية تعديلها مباشرة، امكانية التعديل واكتشاف أخطاء Javascript، والكثير من المزايا الرائعة لتطوير أفضل على هذا المتصفح.
  
• Visual Web Developer Express Edition
  تمكنك هذه الأداة من تحليل واكتشاف أخطاء Javascript لمتصفح Internet Explorer بشكل أفضل، وهي أداة مكملة للأداة السابق ذكرها IE Web Developer Toolbar، ولمزيد من المعلومات حول كيفية استخدامها فإن Bernie يشرح الطريقة على موقعه.
  
• DebugBar
  تضيف هذه الإضافة لمتصفح Internet Explorer ميزة اكتشاف الأخطاء البرمجية المتعلقة بلغة Javascript وDOM، وهي مشابهة تقريبا لإضافة IE Web Developer Toolbar ولكن بمزايا مختلفة قليلا، ففيها محدد الألوان color picker، وإمكانية التقاط الصور للصفحة وارسالها عبر البريد الألكتروني.
  

Opera

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

Safari

• Web Inspector
  تستكشف هذه الأداة التسلسل الهرمي لعناصر DOM بشكل مباشر، ويمكنك أيضا البحث داخل هذه العناصر.
  

إضافات عامة (لكل المتصفحات)

• Firebug Lite
  لمحبي هذه الأداة الرائعة والموجودة على متصفح Firefox، فقد طور القائمون عليها أداة أخف من الأصلية تعمل عن طريق ملف Javascript يتم انشاءه وربطه داخل ملفات HTML أو عن طريق وضعه في المفضله لديك Bookmark.
  
• Fiddler Web Debugger
  تتيح لك إضافة Fiddler التحليل لما يحدث من معلومات متبادلة أو حركة المرور التي تحدث بين العميل والخادم HTTP traffic، ومن هذه المعلومات عدد طلبات HTTP requests، وزن الصفحة كاملة، تاريخ cache. وهو بالمناسبة مفيد جدا لمتابعة حركات AJAX التي تحدث خلف الكواليس وحل المشاكل المتعلقة بها.
  
• HttpWatch
  هذه أداة مشابهة إلى حد ما Fiddler التي سبق ذكرها، وتنفع لمتصفحات Firefox وInternet Explorer حيث وبالاضافة إلى مراقبة حركة مرور HTTP traffic تقوم أيضا بتقديم تقارير ورسوم بيانية وحفظ المعلومات على امتدادات XML وCSV مما يسهل عملية تحليلها لاحقا.
  
• Web Accessibility Toolbar
  هذه الإضافة لمتصفحات Internet Explorer وOpera والتي تتيح لك مزايا فحص مدى قابلية الوصول لموقعك، ومزايا أخرى غيرها.
  
• XRAY وMRI
  XRAY يمكن استخدامه لفحص نموذج الصندق لأي عنصر في الصفحة، بينما يقوم MRI بفحص selectors في الصفحة، هذه الأدوات تنفع لمتصفحات Internet Explorer والمتصفحات التي تعتمد على محركات Webkit وMozilla.
  

نقلاً عن المشروع

[MidooDj 11]

شكرا يا كرينكل على الاضافات الجميلة دى

وفعلا اضافات هامة جدا جدا ..

تقبل تحياتى