Benutzer:PerfektesChaos/js/jsonDebug

JavaScript Gadget – zeige zu JSON-Code innerhalb der momentanen Seite Fehleranalyse und Syntaxhervorhebung.

Zweck

Syntaxprobleme im JSON-Code werden aufgefunden, und der Quellcode (ggf. resultierend nach Vorlageneinbindungen) wird im Seitenkopf angezeigt. Versteckter JSON-Code wird sichtbar und mit Syntaxhervorhebung dargestellt, der erste Fehler (sofern vorhanden) auffallend markiert.

Einbindung

Füge die folgenden Zeilen in die persönliche common.js, global.js etc. ein:

mw.loader.load( "https://en.wikipedia.org/w/index.php?title=User:PerfektesChaos/js/jsonDebug/scout/r.js&action=raw&maxage=86400&ctype=text/javascript" );
mw.hook( "ext.gadget.jsonDebug.namespaces" ).fire( "Vorlage" );

• Die erste Anweisung lädt ein kleines „Scout“-Skript, das die momentanen Bedingungen prüft, ob das eigentliche Script sinnvoll ist.
• Die zweite Anweisung sendet eine Anforderung für den Vorlagen-Namensraum, dass JSON-Code auf manchen dieser Seiten erwartet wird.
  • Das kann jederzeit und beliebig oft erfolgen.
  • Der Parameter bei .fire() kann die Nummer eines Namensraums sein oder jeder Alias des Namens. Auch ein Array solcher Bezeichner ist möglich.
  • Seiten in diesen Namensräumen werden untersucht und bei Bedarf wird das eigentliche Skript geladen.

Verhalten

Wenn Elemente gefunden wurden, wird jedes mit einem vorangestellten Button ausgestattet.

Wenn der Button angeklickt wurde, wird oben auf der Seite ein Kasten eingefügt.

• Der Kasten enthält den Quellcode in JSON.
• Der Kasten kann vertikal vergrößert werden.
• Wenn im JSON-Code ein Syntaxfehler festgestellt wurde, werden zum ersten Problem Details angezeigt und auf die fragliche Quelltextzeile fokussiert und diese markiert.
• In der rechten oberen Ecke des eingefügten Kastens befindet sich ein kleiner Button mit einem X zum Verstecken des Kastens. Jeder Button an einem JSON-Element öffnet dies wieder für den jeweiligen Quellcode.
• Beim ersten Mal könnte es einige Sekunden dauern, aber die Syntaxelemente werden dann mit Syntaxhervorhebung gezeigt.

<span class="error">{ ... }</span>
<pre class="json-code-lint" style="display:none">{ "u": "X }</pre>

Das Beispiel zeigt eine typische Situation, für die das Gadget ausgelegt ist:

• Das schließende " nach X fehlt.
• Eine noch unspezifische Fehlermeldung wurde durch eine Anwendung angezeigt.
• Der problematische Quellcode ist noch versteckt.
• Die betroffene Quelltextzeile wird dann durch das Gadget dargestellt.

API

Erfahrene Bentzer können die folgende Anweisung ausführen:

mw.hook( "jsonDebug.ready" ).add( myFun );

Dabei ist myFun eine function, die aufgerufen wird, sobald das eigentliche Gadget geladen wurde.

• Diese Funktion wird mit einem Parameter aufgerufen: app
• app ist ein Anwendungs-object.
• Es kann inspiziert werden und listet unter anderem Versionsinformationen.
• Außerdem gibt es darin eine function als app.feed(), die einen Parameter erwartet: JSON-Quellcode, der analysiert und im Seitenkopf angezeigt wird.

Auslösung

Es wid erwartet, dass die Wiki-Seite gültigen oder gelegentlich auch ungültigen JSON-Code enthält. Dieser kann sichtbar oder versteckt sein.

Wenn detektiert, wird ein Button unmitttelbar vor dem Element eingefügt. Es kann beliebig viele derartige Elemente geben.

Das Element wird identifiziert durch:

1. class="json-code-lint" wurde dem Element zugewiesen.
2. Das Element ist ein <pre> oder <div>.
3. Das Element enthält unmittelbar den JSON-Code.

Dann wird ein Button direkt vor dem Element eingefügt.

Ebenfalls sind automatisch alle Quelltextbearbeitungen von Seiten aktiviert, deren Seiteninhaltsmodell die Zeichenkette json enthält (Groß- und Kleinschreibung ignoriert).

Weitere Selektoren für Elemente können jederzeit mit der folgenden Anweisung kommuniziert werden:

mw.hook( "ext.gadget.jsonDebug.selectors" ).fire( others );

Dabei ist others ein object mit optionalen Komponenten:

• classes – Array mit den Namen von Klassen
• tags – Array mit den Namen von Tags, die über <pre> und <div> hinaus berücksichtigt werden sollen.

Codes

Siehe User:PerfektesChaos/js/jsonDebug.