Javascriptのデバッグ

2021/9/15

☕ Javascriptのデバッグ  JS将棋のデバッグをしていると、結構複雑なシステムになってしまったため、何が原因でこうなっているのか、ワケがわからなくなることがあります。 まあ、大体は問題の箇所に alert を入れるか、ページのどこかにデバッグ用の input タグでも入れて、document.getElementById("id").value に変数を吐かせてみます。 もう少し複雑になってくると、Chrome ブラウザのデベロッパーツールを起動させ、そこに console.log() で現在の状況を表示させます。 これで、今までは大てい済んでいました。


 しかし、今回は複雑さが尋常ではないようです。 あまり使ったことのなかった、デベロッパーツールのデバッグ環境を使ってみました。 やり方は、Chrome で左上にある【⋮】をクリック、[その他のツール]-[デベロッパーツール]と選びます。 起動したウィンドウで[Sources]を選び、問題のページ(今はjsshogi.cgi)を開き、問題の行あたりまでスクロールします。 行番号をクリックすると、そこにブレークポイントができます。 画面右上に【◀】ボタンがあるので、それをクリックしてデバッガーを出し、ページでボタン操作をする度に変数の値を確認したりします。

デベロッパーツール

 今回はこれが役立ちました。 サッと確認するにはやはり、Console に出す console.log を使うのが早いですが、何が原因か皆目わからないような場面では、デバッガーで1つ1つの変数の状況をウォッチして確認できるのはありがたかったです。

……というわけで、JS将棋の最終的なバグフィックスが終りました。 やったことは、時々起こっていたフリーズ対策、明るさ調整、まいにち詰将棋の棋譜読込み、そして保存形式の変更です。

 一番手間どったのはバグフィックスですが、見た目上は、まいにち詰将棋の読込みが目出つでしょう。 日本将棋連盟のそれは、詰筋を決まった順で動かすしかないのですが、JS将棋では好きなように動かせます。 このため、手持ちの将棋盤がなくても詰将棋が楽しめます。

JS将棋

 先日の、藤井二冠が最年少で三冠を達成した叡王戦の棋譜を読みこんでみたのが次です。 熱戦を見ながらコーディングしていたのですが、藤井三冠達成の瞬間までにデバグを終わらせたいと思っていたところ、残念ながらそれを上回るスピードで藤井三冠が誕生してしまいました😂。

JS将棋

 このアプリ作成にはかなりの時間を取られましたが、ここまで多機能なものは大手アプリや公式サイト以外にはないと思われます。 Javascript と Perl の合わせ技です。 やはり Perl はすぐれています。 Javascript の数倍早くコーディングできる感じがします。 私は PHP や Python より Perl が好きです。 Ruby は悪くないと思いますが、慣れの問題でしょうか。

参考: JS将棋

twitterシェア Facebookシェア
  コメントの注意点