تقديم شريط أدوات مطور Discourse

عند تشغيل أحدث إصدار من Discourse core في بيئة تطوير، ستلاحظ شريط أدوات جديد على الجانب الأيسر من الشاشة:

يوفر هذا وصولاً بنقرة واحدة إلى أدوات المطور الشائعة. حتى الآن، لدينا:

:electric_plug: تصحيح مخرج الإضافات (Plugin Outlet Debug)

يعرض هذا جميع مخارج الإضافات، مع تلميحات تعرض القيم في الوقت الفعلي لجميع @outletArgs المتاحة.

كان هذا مستوحى من مكون السمة الشهير plugin outlet locations، و الإضافة التي سبقته. ولكن على عكس تلك، فإن التكامل الوثيق مع النواة يعني أنه يمكن دائمًا أن يكون محدثًا بنسبة 100٪ بأحدث المخارج والحجج.

:ambulance: الوضع الآمن (Safe mode)

يقوم بالتبديل بين الوضع الآمن وتشغيله وإيقافه.

:scroll: الترجمة المطولة (Verbose localization)

يقوم بالتبديل بين ميزة الترجمة المطولة.


في بيئة التطوير، يتم تمكين هذا افتراضيًا، ويمكن تعطيله باستخدام زر ‘X’.

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

نأمل في إضافة المزيد من الأدوات خلال الأسابيع/الأشهر القادمة، لذا تابعوا هذا الفضاء! إذا كان لديك أي ملاحظات، أو أفكار للأدوات، فأخبرنا أدناه!

49 إعجابًا

يؤدي النقر على أيقونة :electric_plug: لإظهار المنافذ إلى تعطل Chrome، مما يجعل الصفحة/علامة التبويب غير مستجيبة. قمت بتعطيل إضافات Chrome الخاصة بي، لكنها لا تزال تتعطل.

بشكل أكثر تحديدًا، يتعطل عند النقر على الأيقونة أثناء التواجد في موضوع (ليس فقط على Meta).

على Firefox/Edge، يعمل ولكن هناك خطأ في وحدة التحكم:

تم تسجيل موصلات متعددة للمخرج discovery-list-area. استخدام الأول.
Array [ undefined, "discovery-list-area/kanban-board (discourse/theme-351/discourse/connectors/discovery-list-area/kanban-board)" ]
3 إعجابات

يمكنني إعادة إنتاجه على ميتا أيضًا.

على فايرفوكس، يمكنك رؤية وجود حلقة لا نهائية في التصيير أيضًا:

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


بالمناسبة، شكرًا على تقديم هذه الأداة، إنها مريحة حقًا، أحبها!

3 إعجابات

بالتأكيد! لقد نجحت بالتأكيد قبل بضعة أيام، ولكن الآن أرى نفس الخطأ. سأقوم بالتحقيق - شكراً على التقارير!

6 إعجابات

تم دمج هذا الالتزام للتو والذي سيصلح إعادة العرض اللانهائية في صفحة الموضوع

8 إعجابات

نظرًا لعدم وجود طريقة للقيام بذلك على الهاتف المحمول، فأنا أعمل على TC بسيط لإضافة زر إلى الرأس (مستوحى من TC الخاص بـ Plugin Outlets).

عند عرض بيئة تطوير على الهاتف المحمول، سيظهر شريط الأدوات على يسار الشاشة حتى تتمكن من استخدامه كالمعتاد.

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

إعجابَين (2)

نعم. يمكن للمستخدمين النقر فوق الزر لتنشيط أدوات المطور لهم. ليس لجميع المستخدمين.

إعجاب واحد (1)

ها هي:

إعجاب واحد (1)

هل يمكننا الحصول على تبديل لـ mobile_view؟ أحيانًا، أرغب في التحقق بسرعة من هذا العرض.
يمكنني تقديم طلب سحب (PR) إذا كان الأمر كذلك!

3 إعجابات

لماذا ليس التبديل في الشريط الجانبي إذن؟

إعجاب واحد (1)

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

إعجابَين (2)

بالتأكيد، يبدو وضع الهاتف المحمول خيارًا جيدًا للإضافة :+1:

3 إعجابات

ها نحن ذا:

إعجابَين (2)

أردت فقط أن أصرخ، وأشكركم على أداة المطور المفيدة هذه.

أصبح تحديد منافذ المكونات الإضافية المتاحة أمرًا سهلاً الآن، أو تحديد سلاسل الترجمة…

شكرًا! :smiley:

6 إعجابات

ولكنه لا يعمل في صفحة 404؟

قم بزيارة https://meta.discourse.org/ewfsezfef، اضغط F12، قم بتمكين أدوات المطور، و

VM190:1 Uncaught ReferenceError: enableDevTools is not defined
    at <anonymous>:1:1

كنت آمل في إضافة بعض النصوص إلى تلك الصفحة.

3 إعجابات

في الوقت الحالي، لا تقوم صفحات 404 بتحميل أي من JavaScript لتطبيق Ember. يوجد إعداد موقع مخفي bootstrap_error_pages يمكنك تمكينه لجعله صفحات تطبيق Ember كاملة.

ربما سنجعل هذا هو الافتراضي في المستقبل، ولكنه ليس على رأس قائمة أولوياتنا في الوقت الحالي.

إعجابَين (2)

منطقي. ربما تضيف ذلك إلى المنشور الأصلي؟ يبدو أنني أستطيع فعل ذلك.

إعجاب واحد (1)

بالتأكيد! تمت الإضافة:

3 إعجابات