Debugowanie za pomocą Blockly i blockly-samples

Czasami podczas tworzenia wtyczki w próbkach blokowych trzeba wprowadzić odpowiednie zmiany w samej aplikacji Blockly. Większość wtyczek jest skonfigurowana tak, aby pobierała Blockly z rejestru npm, więc można używać tylko kodu, który został już udostępniony w npm. Utrudnia to debugowanie zmian Blockly. Jeśli chcesz wprowadzić i przetestować zmiany zarówno w próbkach blokowych, jak i w blokach, możesz użyć dowolnej z poniższych metod, aby jednocześnie wykorzystać nieopublikowane zmiany.

Możesz poprosić npm, aby używał pakietu z Twojego komputera, zamiast pobierać go z rejestru npm. Jeśli skorzystasz z tej metody, musisz mieć dostęp do map źródłowych, które ułatwią debugowanie blockly_compressed. Tej metody możesz używać ze zmianami w rdzeni, które nie zostały jeszcze przekazane do GitHuba.

  1. W rozwidleniu bloków:

    $ npm run package
$ cd dist
$ npm link

    Te kroki tworzą podstawową usługę Blockly, spakują ją, a następnie tworzą dowiązanie symboliczne do plików w pakietach.

  2. W rozwidleniu próbek blokowych:

    $ npm link blockly

    Ten krok informuje npm, aby szukał utworzonego wcześniej dowiązania symbolicznego zamiast pobierać pakiet z npm.

  3. npm run start, aby przetestować wtyczkę.

Po wprowadzeniu zmian trzeba go przebudować i na nowo przygotować.

Metoda 2. Pobierz z GitHuba

Możesz poprosić npm, aby pobierał pakiet z GitHuba, a nie z rejestru npm. Korzystając z tej metody, musisz mieć dostęp do map źródłowych, które ułatwiają debugowanie blockly_compressed (blokowanie bloku metody blockly_compressed). Użyj wersji Blockly, która jest już opublikowana gdzieś na GitHubie.

  1. Upewnij się, że sekcja scripts w package.json wtyczki zawiera te elementy:

    "postinstall": "blockly-scripts postinstall"

    Ten skrypt automatycznie skompiluje Blockly po zainstalowaniu z GitHuba w następnym kroku.

  2. Zamiast podawać numer wersji dla blockly w package.json, podaj adres Git i nazwę gałęzi:

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

    Może to też być link do Twojego rozwidlenia bloku, jeśli masz niescalone zmiany.

  3. npm install jak zwykle

  4. npm run start, aby przetestować wtyczkę

Po wprowadzeniu zmian w Core Blockly musisz przekazać je do GitHuba w określonej gałęzi. Dodatkowo, jeśli chcesz, aby npm pobrał nową wersję z GitHuba, musisz npm uninstall blockly (lub w inny sposób usunąć ją z node_modules), a następnie ponownie zainstalować w sposób opisany powyżej.

Metoda 3. Zaawansowany etap

Do debugowania wtyczki możesz użyć zaawansowanego narzędzia (w zasadzie Blockly). W przypadku tej metody wykorzystamy obiekt blockly_uncompressed, który może być łatwiejszy do debugowania, ponieważ nie wymaga map źródłowych. Użyj tej metody, jeśli masz problemy z debugowaniem z mapami źródłowymi lub jeśli chcesz przetestować wtyczkę, korzystając z zaawansowanych funkcji.

  1. W katalogu wtyczek w przykładach blockly:

    $ npm run build
$ cd dist
$ pwd

    Spowoduje to skompilowanie i zapakowanie wtyczki. Następnie wyświetla pełną ścieżkę do katalogu dystowego wtyczki. Skopiuj tę ścieżkę. Będzie nam potrzebna w następnym kroku.

  2. W bloku, w advanced_playground.html:

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

    Następnie należy skonfigurować wtyczkę. Może być na przykład konieczne podanie pewnych wartości w obiekcie options. Wykonaj tę konfigurację w obecnej konfiguracji obszaru roboczego.

  3. Aby przetestować wtyczkę, otwórz w przeglądarce zaawansowane narzędzie do testowania.

Gdy wprowadzasz zmiany w bloku, musisz tylko odświeżyć widok. Po wprowadzeniu zmian w wtyczce musisz ponownie uruchomić npm run build.