اضافة اداة Eruda على متصفحك في هاتفك و انطلق في اختبار فحص صفحات مواقعك

Eruda هي أداة تطوير JavaScript مفتوحة المصدر تُستخدم لتسهيل عمليات تطوير صفحات الويب على الأجهزة المحمولة. تُوفر Eruda واجهة مستخدم بديهية ومجموعة من الأدوات المتقدمة، مما يمكن المطورين من فحص الأخطاء، وتحليل العناصر، ورصد أداء الشبكة بكل سهولة. يمكن إضافة Eruda إلى صفحات الويب باستخدام كود JavaScript بسيط، وتتيح للمطورين تحسين تجربة المستخدم على الأجهزة المحمولة بشكل فعال.

فهم أعماق أداة Eruda لتطوير صفحات الويب على الهواتف المحمولة

السلام عليكم ورحمة الله وبركاته

اداة فحص صفحات الويب

تُعتبر "Eruda" أحد الأدوات الرائدة في مجال تطوير صفحات الويب على الهواتف المحمولة، حيث توفر مجموعة شاملة من الأدوات والميزات لتسهيل عملية التطوير وتحسين تجربة المستخدم. سنلقي نظرة على وظائفها، وأهميتها، وكيفية إضافتها إلى متصفح Chrome، بالإضافة إلى التحديثات الأخيرة والمستقبل المتوقع لها.

فهم Eruda

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

أهمية Eruda

1. تحسين التجربة: تُعزز Eruda تجربة مطوري الويب في فحص وتحسين صفحاتهم للأجهزة المحمولة، مما يسهم في تحسين تجربة المستخدم النهائي.
2. تصحيح الأخطاء بسرعة: تساعد الأدوات المتقدمة في Eruda في تحديد وتصحيح الأخطاء بسرعة، مما يقلل من وقت التطوير.
3. رصد الأداء: توفر Eruda أدوات لرصد أداء الصفحة، مما يتيح للمطورين تحسين سرعة التحميل واستجابة الصفحة.

التوافق والتطور:

- التوافق: Eruda متوافقة مع متصفحات الويب الشائعة على الهواتف المحمولة، مثل Chrome وFirefox وSafari.
- تاريخ الإطلاق: تم إصدار Eruda لأول مرة في [مارس 11, 2017].
- الاصدارات و التحديثات: ولقد شهدت الاداة سلسلة من التحديثات التي أضافت ميزات جديدة وتحسينات في الأداء, اول اصدار للمستخدمين كان تحت رقم [1.2.2] مازال سلسلة التحديثات مستمرة الى حين نشر هدا المقال متوفر اصدار [3.0.1] بتاريخ [دجنبر 9, 2023].
- المطور والمجتمع: تم تطوير Eruda بواسطة [RedHoodSu]، ويتمتع بدعم نشط من المجتمع الواسع على منصة جيتهب.

Eruda وأدوات الفحص على متصفحات الحواسيب

Eruda تقدم وظائف تشبه تلك المتوفرة في أدوات الفحص لمتصفحات الحواسيب، مما يسمح للمطورين بتحليل وتحسين صفحات الويب على الأجهزة المحمولة بطريقة تشبه تجربة الفحص على الحواسيب.
لمزيد من التفاصيل حول مشروع Eruda وللوصول إلى الشيفرة المصدرية والتحديثات الأخيرة، يُفضل زيارة صفحته على GitHub عبر الرابط التالي: [Eruda on GitHub].
في هذا المستودع، يمكنك العثور على جميع التفاصيل المتعلقة بالأداة، بما في ذلك المساهمات، والقضايا المفتوحة، والتحديثات الأخيرة التي تم إجراؤها على المشروع.

استنتاج

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

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

شرح تضمين الاداة

استعد لاستكشاف عالم Eruda من خلال تضمين هذا السحر البرمجي! يُعد الكود التالي بوابة فعّالة للدخول إلى قلب أداة Eruda، حيث يقوم بتحميل وتفعيل الأداة بسهولة. استمتع بفحص السجلات وتحليل حالة العناصر ومراقبة شبكة الطلبات، مما يمنحك نافذة لافتراضية لتحسين تجربة تطوير صفحات الويب على الأجهزة المحمولة. انغمس في عالم Eruda واستمتع برحلة تطوير مذهلة!

javascript: (function() {
    var script = document.createElement('script');
    script.src = "//cdn.jsdelivr.net/npm/eruda";
    document.body.appendChild(script);
    script.onload = function() {
        eruda.init()
    }
})();

يمكنك استخدام هذا الكود فهو امن لدرجة قصوى و لا يحيل او يجلب اي اكواد تتطلب ادونات خاصة المكتبة تطبيق الاوامر الخاصة باداة Eruda لا تطلب الوصول الى مدير كلمات المرور فس المتصفح

رغم ان الكود امن و المكتبة امنة الى انه يجب الحذر من تركيب اي سكربت مشابه دون مراجعة روابط الجلب و ادونات المتطلبة لافلات الاوامر اذا كان هناك اي كود يطلب امر وصول الى مدير كلمات المرور فالمتصفح انصحك بتفاديه

وصف شامل

هذا الكود هو كود JavaScript يقوم بإضافة أداة تسمى "eruda" إلى صفحة الويب الحالية. هذه الأداة تستخدم أساسًا لتطوير وفحص صفحات الويب على الأجهزة المحمولة. الكود يقوم بإنشاء عنصر `script` ويربطه بمكتبة "eruda" المستضافة على CDN، ثم يقوم بإضافة هذا العنصر إلى نهاية جسم الصفحة. عندما تحمل النص البرمجي بنجاح، يتم تشغيل وظيفة `eruda.init()` لبدء استخدام أدوات التطوير التي تقدمها "eruda".

شرح العناصر

إليك شرح لكل عنصر ضمن هذا الكود JavaScript:

1. `(function () {...})();`: هي وظيفة فورية (Immediately Invoked Function Expression - IIFE) تقوم بتحديد نطاق الأكواد وتنفيذها فوراً دون الحاجة إلى استدعاءها. تبدأ الوظيفة بفتح وغلق القوسين.
2. `var script = document.createElement('script');`: يتم إنشاء عنصر `script` باستخدام `document.createElement('script')`. هذا العنصر سيتم استخدامه لتحميل ملف النص البرمجي.
3. `script.src = "//cdn.jsdelivr.net/npm/eruda";`: يُعيّن مصدر الملف النصي (`src`) ليكون `//cdn.jsdelivr.net/npm/eruda`، وهو مسار المكتبة "eruda" المستضافة على شبكة التوزيع السريعة (CDN).
4. `document.body.appendChild(script);`: يتم إضافة عنصر النص البرمجي (`script`) إلى نهاية جسم الصفحة باستخدام `appendChild`، مما يؤدي إلى تحميل مكتبة "eruda" على الصفحة.
5. `script.onload = function () { eruda.init() }`: يضيف حدث تحميل (`onload`) لعنصر النص البرمجي. عندما يتم تحميل النص البرمجي بنجاح، يتم استدعاء وظيفة التهيئة `eruda.init()` لبدء استخدام أدوات التطوير المقدمة من "eruda".

كيفية إضافة Eruda إلى متصفح Chrome:

1. انسخ كود جافاسكربت من صندوق الاكواد اعلاه و اتبع الخطوات.
2. قم بفتح متصفح Chrome انقر على 3 نقط فالاعلى
3. انقر على النجمة لاضافة مرجع .
4. الصق السكربت في مكان الرابط و قم بتسمية المرجع الى Mobile Dev Tool.
5. احفظ الكل و ادخل لاي موقع مباشرة في لسان البحت اكثب التسمية التي اخترتها لاستدعاء الاداة.
6. بعد 3 ثواني ستظهر ايقونة اداة Eruda داخل الصفحة.
7. اخيرا قم بفحص الصفحة من هاتفك و اخبر مواقعك.

هكذا نكون قد تعلمنا كيفية اضافة سكربت اداة Eruda و فهمنا الة السكربت و العناصر المكونة له.

المفاجأة

اذا كنت تجد صعوبة في اضافة الاداة يدويا ابتهج بهذا الخبر! متوفر تطبيق Eruda Browser Console على متجر Google Play، مما يجعل تجربة تطوير صفحات الويب على الأجهزة المحمولة أكثر يسرًا. يُقدم التطبيق نسخة مجانية للاستخدام العام، بينما يتيح للمستخدمين الاستفادة من الميزات المتقدمة من خلال النسخة المدفوعة. استمتع بتحليل الأكواد وتحسين تجربة تطويرك أثناء التنقل مع Eruda Browser Console!

خاتمة

منشورات ذات صل

مع تسليط الضوء على سحر JavaScript وقوة أداة Eruda، نكون قد استكشفنا عالمًا مدهشًا لتطوير صفحات الويب على الهواتف المحمولة. الكود السحري الذي نُقدمه يفتح أمام المطورين بوابة الإمكانيات اللامحدودة، مما يتيح لهم فحص وتحليل صفحاتهم بكل يسر وفعالية.
في تفاعل متناغم، يتيح لنا JavaScript التحكم في تفاصيل الصفحة، بينما تقف Eruda كرفيق مخلص يُبسط ويُسهِّل رحلة التطوير. تجمع الخصائص القوية لكل منهما لتوفير تجربة فريدة للمطور، حيث يمكنه الاستمتاع بمرونة البرمجة وفاعلية الفحص والتحليل.
استعد للمزيد من التحسينات والتجارب الرائعة مع JavaScript وEruda، ففي عالم التطوير، لا يوجد حد للإبداع وتطوير تجربة المستخدم على الأجهزة المحمولة. انطلق بثقة في رحلتك واجعل JavaScript وEruda شريكين مثاليين في تحسين وتحسين صفحات الويب الخاصة بك.

شكرًا لمساعدة ChatGPT في إعداد هذا المقال

المصادر:
https://github.com/liriliri/eruda

بتصريف:
SiwaneXYZ©
https://www.siwane.xyz/2023/12/eruda-mobile-dev-tool.html