Debugging mit Blockly und Blockly-Beispielen

Manchmal müssen Sie bei der Entwicklung eines Plug-ins in Blockly-Beispielen die entsprechenden Änderungen in Blockly selbst vornehmen. Die meisten Plug-ins sind so eingerichtet, dass sie Blockly aus der npm-Registry abrufen, sodass Sie nur Code verwenden können, der bereits auf npm freigegeben wurde. Dies würde die Fehlerbehebung für Ihre Blockly-Änderungen erschweren. Wenn Sie Änderungen sowohl an blockbasierten als auch blockbasierten Stichproben vornehmen und testen möchten, können Sie eine der folgenden Methoden verwenden, um Ihre nicht freigegebenen Änderungen zusammen zu verwenden.

Sie können npm anweisen, ein Paket von Ihrem Computer zu verwenden, anstatt es aus der npm-Registry abzurufen. Mit dieser Methode sollten Sie Zugriff auf Sourcemaps haben, die das Debugging von „blockly_komprimiert“ vereinfachen. Sie können diese Methode mit Änderungen im Kern verwenden, die noch nicht an GitHub übertragen wurden.

  1. In Ihrer Verzweigung von Blockly:

    $ npm run package
    $ cd dist
    $ npm link
    

    Mit diesen Schritten wird Blockly für den Kern erstellt, verpackt und anschließend ein Symlink zu den gepackten Dateien erstellt.

  2. In der Fork der Blockly-Samples:

    $ npm link blockly
    

    Dieser Schritt weist npm an, nach dem zuvor erstellten Symlink zu suchen, anstatt das Paket von npm abzurufen.

  3. npm run start, um das Plug-in zu testen.

Wenn Sie Änderungen im Kern vornehmen, müssen Sie ihn neu erstellen und verpacken.

Methode 2: Daten von GitHub abrufen

Sie können npm anweisen, ein Paket von GitHub statt aus der npm-Registry abzurufen. Mit dieser Methode sollten Sie Zugriff auf Sourcemaps haben, die das Debuggen von „blockly_komprimiert“ vereinfachen. Sie müssen eine Version von blockly verwenden, die bereits auf GitHub veröffentlicht ist.

  1. Achten Sie darauf, dass der Abschnitt scripts in package.json für Ihr Plug-in Folgendes enthält:

    "postinstall": "blockly-scripts postinstall"
    

    Dieses Script erstellt Blockly automatisch, nachdem es in einem späteren Schritt über GitHub installiert wurde.

  2. Geben Sie anstelle einer Versionsnummer für blockly in package.json eine Git-Adresse und einen Zweignamen an:

    "blockly": "git://github.com/google/blockly.git#develop"
    

    Dies kann auch ein Link zu Ihrer eigenen Abspaltung von Blockly sein, wenn Sie noch nicht zusammengeführte Änderungen haben.

  3. npm install wie gewohnt

  4. npm run start zum Testen des Plug-ins

Wenn Sie Änderungen in Blockly-Kern vornehmen, müssen Sie sie im angegebenen Branch an GitHub übertragen. Wenn Sie möchten, dass npm eine neue Version von GitHub abruft, müssen Sie npm uninstall blockly (oder anderweitig aus node_modules entfernen) und dann wie oben beschrieben neu installieren.

Methode 3: Für Profis

Du kannst den erweiterten Playground (in der Hauptversion von Blockly) verwenden, um Fehler in deinem Plug-in zu beheben. Mit dieser Methode verwenden Sie blockly_uncompressed. Damit ist die Fehlerbehebung möglicherweise einfacher, da Sie sich nicht auf Sourcemaps verlassen. Verwenden Sie diese Methode, wenn Sie Probleme mit der Fehlerbehebung mit Sourcemaps haben oder Ihr Plug-in mit den Features des erweiterten Playgrounds testen möchten.

  1. Im Plug-in-Verzeichnis in blockly-samples:

    $ npm run build
    $ cd dist
    $ pwd
    

    Dadurch wird Ihr Plug-in erstellt und verpackt. Dann wird der vollständige Verzeichnispfad des dist-Verzeichnisses für Ihr Plug-in ausgegeben. Kopieren Sie diesen Pfad. Wir benötigen ihn im nächsten Schritt.

  2. In Blockly, in advanced_playground.html:

    <script src="$PATH_TO_DIST_DIR/index.js">
    

    Anschließend müssen Sie alle erforderlichen Einstellungen für Ihr Plug-in vornehmen. Beispielsweise müssen Sie möglicherweise bestimmte Werte im Optionsobjekt angeben. Führen Sie diese Einrichtung in der vorhandenen Arbeitsbereichseinrichtung durch.

  3. Öffnen Sie im Browser den erweiterten Playground, um das Plug-in zu testen.

Wenn Sie Änderungen in einem Block vornehmen, müssen Sie nur eine Aktualisierung vornehmen. Wenn Sie Änderungen an Ihrem Plug-in vornehmen, müssen Sie npm run build noch einmal ausführen.