Présentation de la barre d'outils pour développeurs Discourse

Lorsque vous exécutez la dernière version de Discourse core dans un environnement de développement, vous remarquerez une nouvelle barre d’outils sur le côté gauche de l’écran :

Ceci fournit un accès en un clic aux outils de développement couramment nécessaires. Jusqu’à présent, nous avons :

:electric_plug: Débogage des points d’insertion de plugins

Ceci affiche tous les points d’insertion de plugins, avec des info-bulles montrant les valeurs en temps réel de tous les @outletArgs disponibles.

Ceci a été inspiré par le populaire composant de thème plugin outlet locations, et le plugin avant lui. Mais contrairement à ceux-ci, l’intégration étroite avec le cœur signifie qu’il peut toujours être 100% à jour avec les derniers points d’insertion et arguments.

:ambulance: Mode sans échec

Active et désactive le mode sans échec

:scroll: Localisation détaillée

Active et désactive la fonctionnalité de localisation détaillée


En développement, ceci est activé par défaut, et peut être désactivé en utilisant le bouton ‘X’.

En production, il peut être activé en exécutant enableDevTools() dans la console du navigateur. Vous pouvez même l’essayer ici sur Meta ! Si enableDevTools() n’est pas disponible, c’est probablement parce que vous êtes sur une page d’erreur qui ne charge pas l’application Ember complète.

Nous espérons ajouter plus d’outils dans les semaines/mois à venir, alors restez à l’écoute ! Si vous avez des commentaires, ou des idées d’outils, faites-le nous savoir ci-dessous !

49 « J'aime »

Cliquer sur l’icône :electric_plug: pour afficher les prises fait planter Chrome, rendant la page/l’onglet non réactif. J’ai désactivé mes extensions Chrome, mais cela plante toujours.

Plus précisément, cela plante lors du clic sur l’icône lorsque l’on est sur un sujet (pas seulement sur meta).

Sur Firefox/Edge, cela fonctionne mais il y a une erreur dans la console :

Plusieurs connecteurs ont été enregistrés pour la sortie discovery-list-area. Utilisation du premier.
Array [ undefined, "discovery-list-area/kanban-board (discourse/theme-351/discourse/connectors/discovery-list-area/kanban-board)" ]
3 « J'aime »

Je peux aussi le reproduire sur Meta.

Sur Firefox, vous pouvez voir qu’il y a aussi une boucle infinie de rendu :

Cela fonctionne bien sur une installation de développement locale, même avec Kanban activé. Je vois la même erreur, mais il n’y a pas de boucle de rendu.


Au fait, merci d’avoir apporté cet outil, il est vraiment pratique, je l’adore !

3 « J'aime »

Huh ! Ça a marché il y a quelques jours, mais maintenant je vois la même erreur. Je vais enquêter - merci pour les signalements !

6 « J'aime »

Je viens de fusionner ce commit qui corrigera le problème de rendu infini sur la page du sujet.

8 « J'aime »

Comme je ne vois aucun moyen de le faire sur mobile, je travaille sur un simple TC pour ajouter un bouton à l’en-tête (inspiré par le TC des Plugin Outlets).

Lorsque vous visualisez un environnement de développement sur mobile, la barre d’outils apparaît sur le côté gauche de l’écran pour que vous puissiez l’utiliser normalement.

Dans les environnements de production, vous devrez appeler enableDevTools() depuis la console (ou depuis le javascript du thème/composant de thème) pour activer la barre d’outils. Notez que cela a un coût de performance, vous ne devriez donc pas le faire pour tous les utilisateurs sur un site de production réel.

2 « J'aime »

Oui. Les utilisateurs peuvent cliquer sur le bouton pour activer les outils de développement pour eux. Pas pour tous les utilisateurs.

1 « J'aime »

Voici :

1 « J'aime »

Pouvons-nous avoir un interrupteur pour mobile_view ? Parfois, je veux vérifier rapidement cette vue.
Je peux faire une PR si c’est le cas !

3 « J'aime »

Pourquoi pas le commutateur dans la barre latérale alors ?

1 « J'aime »

Vous n’avez pas le sélecteur mobile en mode bureau. Je crois qu’il n’apparaît que sur mobile ou tablette.
De plus, il s’agit de la commodité d’avoir tous les boutons au même endroit.

2 « J'aime »

Bien sûr, le mode mobile semble être une bonne fonctionnalité à ajouter :+1:

3 « J'aime »

Voilà :

2 « J'aime »

Je voulais juste crier, et vous remercier pour cet outil de développement pratique.

Identifier les points de sortie de plugin disponibles est un jeu d’enfant maintenant, ou localiser les chaînes de localisation…

Merci ! :smiley:

6 « J'aime »

Mais ça ne fonctionne pas sur la page 404 ?

Visitez https://meta.discourse.org/ewfsezfef, appuyez sur F12, activez les outils de développement, et

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

J’espérais ajouter du texte à cette page.

3 « J'aime »

Pour le moment, les pages 404 ne chargent aucun des JS de l’application Ember. Il existe un paramètre de site caché bootstrap_error_pages que vous pouvez activer pour en faire des pages complètes de l’application Ember.

Peut-être que nous en ferons la valeur par défaut à l’avenir, mais ce n’est pas en haut de notre liste de priorités pour le moment.

2 « J'aime »

Ça a du sens. Peut-être l’ajouter à l’OP ? Il semble que je puisse le faire.

1 « J'aime »

Bien sûr ! Ajouté :

3 « J'aime »