chakokuのブログ(rev4)

テック・コミック・DTM・・・ごくまれにチャリ

Scratch3の拡張機能の開発にChromeのDevToolを使ってデバッグ

Scratch3の拡張機能を使って新しいブロックを作る時なかなかバグが取れない。実行環境がブラウザなので、ブラウザで表示されない場合に原因が特定しづらい。デバッグ*1する際、少し調べると、Chrome等のDevToolでデバッグするのが可能と分かった。ビルドは通ったけどブラウザ側で正しく動かないという場合、DevToolでコンソールを出しておくとどこでエラーになっているのかログが出されるので原因の特定が可能になる。さらに、JavaScriptのソース行にブレーク設定しておけばステップ実行することもできる。
以下は「拡張機能を作ってみよう」のサンプル(newblocks)のindex.jsにブレークを設定して、引数を確認しているところ

Scratchの拡張機能のソースがChormeのDevToolで参照する場合どのフォルダ配下なのか??パスが分からなかったが、Scratch3のサンプルに従った場合、以下のパスで参照できるようだ。

[v]top
   [v]GUI
      ./node_modules/scratch-vm/src/extensions/scratch3_newblocks/index.js

■追記
年賀状の逃避でScratchを触っていると、拡張機能の開発がどんどん進むという・・・

*1:正しいNode.js開発手法があるのだろうけど、それは調べるのが大変なのでおいといて