Einführung der Discourse-Entwickler-Toolbar

Entwickler
1

Wenn Sie die neueste Version von Discourse Core in einer Entwicklungsumgebung ausführen, werden Sie eine neue Symbolleiste auf der linken Seite des Bildschirms bemerken:

Developer Tools
Developer Tools804×536 21.7 KB

Diese bietet Ein-Klick-Zugriff auf häufig benötigte Entwicklertools. Bisher haben wir:

:electric_plug: Plugin Outlet Debug

Dies zeigt alle Plugin-Outlets an, wobei Tooltips Echtzeitwerte aller verfügbaren @outletArgs anzeigen.

Dies wurde durch die beliebte Theme-Komponente Plugin Outlet Locations und das Plugin davor inspiriert. Aber im Gegensatz zu diesen kann die enge Integration mit dem Kern immer zu 100 % mit den neuesten Outlets und Argumenten auf dem neuesten Stand gehalten werden.

:ambulance: Sicherer Modus

Schaltet den sicheren Modus ein und aus.

:scroll: Ausführliche Lokalisierung

Schaltet die ausführliche Lokalisierungsfunktion ein und aus.

In der Entwicklung ist dies standardmäßig aktiviert und kann über die Schaltfläche ‘X’ deaktiviert werden.

In der Produktion kann es durch Ausführen von enableDevTools() in der Browserkonsole aktiviert werden. Sie können es sogar hier auf Meta ausprobieren! Wenn enableDevTools() nicht verfügbar ist, liegt es wahrscheinlich daran, dass Sie sich auf einer Fehlerseite befinden, die nicht die vollständige Ember-App lädt.

Wir hoffen, in den kommenden Wochen/Monaten weitere Tools hinzuzufügen, also bleiben Sie dran! Wenn Sie Feedback oder Ideen für Tools haben, lassen Sie es uns unten wissen!

49 „Gefällt mir“
2

Wenn man auf das :electric_plug: Symbol klickt, um Steckdosen anzuzeigen, stürzt Chrome ab, wodurch die Seite/der Tab nicht mehr reagiert. Ich habe meine Chrome-Erweiterungen deaktiviert, aber es stürzt immer noch ab.

Genauer gesagt stürzt es ab, wenn man auf das Symbol klickt, während man sich in einem Thema befindet (nicht nur auf Meta).

Unter Firefox/Edge funktioniert es, aber es gibt einen Fehler in der Konsole:

Multiple connectors were registered for the discovery-list-area outlet. Using the first. 
Array [ undefined, "discovery-list-area/kanban-board (discourse/theme-351/discourse/connectors/discovery-list-area/kanban-board)" ]
3 „Gefällt mir“
3

Ich kann es auch auf Meta reproduzieren.

Auf Firefox kann man sehen, dass es auch eine Rendering-Endlosschleife gibt:

Die Abbildung zeigt eine JavaScript-Konsolenfehlermeldung „Uncaught (in promise) Error: infinite rendering invalidation detected“ neben einer Liste von Zahlen und Zeichenfolgen: „7“, „29“, „_trigger“, „end“, „endor;“, die Teil einer Codezeile zu sein scheinen. (Beschriftet von KI)
Die Abbildung zeigt eine JavaScript-Konsolenfehlermeldung „Uncaught (in promise) Error: infinite rendering invalidation detected“ neben einer Liste von Zahlen und Zeichenfolgen: „7“, „29“, „_trigger“, „end“, „endor;“, die Teil einer Codezeile zu sein scheinen. (Beschriftet von KI)518×206 2.51 KB

Es funktioniert einwandfrei auf einer lokalen Entwicklungsumgebung, auch mit aktiviertem Kanban. Ich sehe denselben Fehler, aber keine Rendering-Schleife.

Übrigens, danke, dass Sie dieses Tool vorgestellt haben, es ist wirklich praktisch, ich liebe es!

3 „Gefällt mir“
4

Huh! Vor ein paar Tagen hat es definitiv funktioniert, aber jetzt sehe ich denselben Fehler. Ich werde das untersuchen – danke für die Berichte!

6 „Gefällt mir“
6

Gerade diesen Commit zusammengeführt, der das unendliche Rendern auf der Topic-Seite beheben wird.

8 „Gefällt mir“
8

Da ich keine Möglichkeit sehe, dies mobil zu tun, arbeite ich an einem einfachen TC, um eine Schaltfläche zum Header hinzuzufügen (inspiriert vom Plugin Outlets TC).

9

Wenn Sie eine Entwicklungsumgebung auf einem Mobilgerät betrachten, wird die Symbolleiste auf der linken Seite des Bildschirms angezeigt, sodass Sie sie wie gewohnt verwenden können.

In Produktionsumgebungen müssen Sie enableDevTools() von der Konsole (oder aus dem JavaScript des Themes/Themenkomponenten) aufrufen, um die Symbolleiste zu aktivieren. Beachten Sie, dass dies mit Leistungseinbußen verbunden ist, sodass Sie dies nicht für alle Benutzer auf einer echten Produktionswebsite tun sollten.

2 „Gefällt mir“
10

Ja. Benutzer können auf die Schaltfläche klicken, um die Entwicklertools für sie zu aktivieren. Nicht für alle Benutzer.

1 „Gefällt mir“
11

Hier ist es:

1 „Gefällt mir“
12

Können wir einen Schalter für mobile_view haben? Manchmal möchte ich diese Ansicht schnell überprüfen.
Ich kann einen PR machen, wenn ja!

3 „Gefällt mir“
13

Warum nicht die Umschaltfunktion in der Seitenleiste?

1 „Gefällt mir“
14

Sie haben den mobilen Schalter nicht im Desktop-Modus. Ich glaube, er erscheint nur auf Mobilgeräten oder Tablets.
Außerdem geht es hier um den Komfort, alle Schaltflächen am selben Ort zu haben.

2 „Gefällt mir“
15

Sicher, der mobile Modus klingt gut :+1:

3 „Gefällt mir“
16

Da haben wir es:

2 „Gefällt mir“
17

Ich wollte nur kurz Bescheid geben und mich für dieses praktische Entwickler-Tool bedanken.

Das Identifizieren der verfügbaren Plugin-Outlets ist jetzt ein Kinderspiel, oder das Auffinden der Lokalisierungszeichenfolgen…

Danke! :smiley:

6 „Gefällt mir“
18

Aber es funktioniert nicht auf der 404-Seite?

Besuchen Sie https://meta.discourse.org/ewfsezfef, drücken Sie F12, aktivieren Sie die Entwicklertools und

image
image270×115 5.77 KB

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

Ich hatte gehofft, dieser Seite etwas Text hinzuzufügen.

3 „Gefällt mir“
19

Derzeit laden die 404-Seiten keine der Ember-App-JS. Es gibt eine versteckte Site-Einstellung bootstrap_error_pages, die Sie aktivieren können, um sie zu vollständigen Ember-App-Seiten zu machen.

Vielleicht machen wir das in Zukunft zum Standard, aber es steht im Moment nicht ganz oben auf unserer Prioritätenliste.

2 „Gefällt mir“
20

Macht Sinn. Füge das vielleicht zum OP hinzu? Es sieht so aus, als ob ich das tun kann.

1 „Gefällt mir“
21

Sicher! Hinzugefügt:

3 „Gefällt mir“