🔥

【個人開発】1年かけてデバッガを自作した話

2022/05/07に公開

Python

作ったもの

コード実行時の状態を記録し、変数の値を検索したり、ステップ実行を後戻りしたりできます

変数の変更履歴を検索
- コード変数なしでできるprintfデバッグみたいなものです
特定のステップへジャンプ& 前のステップに移動。次のステップももちろん可能

ブレークポイントを張ったステップに飛ぶこともできます

vscodeの拡張からインストールできます
リポジトリはこちらです

開発動機

デバッグがつらかったからです！

printfをいろんな箇所に仕掛けて実行したら大量のログが出てよくわからない
printf仕掛けたけど呼ばれてない
ブレークポイント張ったら見たいところを通り過ぎていたり
・・・

あげだしたらきりがないですが、これもっとなんとかならないかな、というのが開発の動機です

アーキテクチャ

言語やエディタは将来追加可能な形にしたいと思い、それらのコードを分離する形にしました。
初期サポートとして自分の慣れているvscodeとpythonを選びました。
言語はvscode拡張なので基本的にtypescriptで、デバッグ実行する部分だけpythonにしています

dumper

デバッグ対象の実行時の状態（変数の値）を1ステップ実行するごとに記録します。
pythonだと、sys.settraceというデバッグ用のAPIが最初から用意されています。
この関数の引数にコールバックを渡せば自分の関数を1ステップごとに呼び出してくれるので、そこで状態を記録しています。
コールバック登録したら、ユーザーのスクリプトを実行します。

結果はSQLiteに保存します。

感のいい人はお気づきだと思いますが、データサイズが大きかったりするとすごく重くなります。大きいデータはそもそもデバッグに向かないので、「巨大データなためスキップした」旨だけSQLiteに記録するようにするなどの妥協案を取っています

core

dumperの書き込んだSQLiteを読み込んで、
検索やステップ実行の制御を行います
vscodeに依存するようなコードは入れないようにしています
SQLiteも将来変更する可能性があるのかどうか読み切れないため、
DIで直接依存しないような構造にしています。

vscode(webview)

表示はWeb Viewで行います。WebView側ではReactとMUIを使っています。

VSCodeは拡張機能がelectronで実行され、WebViewはパネルやサイドバーで独立しています。それらの通信はpostMessageなどのvscodeの用意した関数を用います。

複数のwebviewで共通の値を参照するようにするため、
データはいったんelectron側に送り付けて、ほかのwebviewに再送するようにしています。
webview側では受け取った値をReactのcontextに入れます。
あとはそのcontextから通常のReactのように表示するだけになります

失敗談

ファーストリリース直後ですが、すでにたくさん失敗をしちゃったなーという状況です
どれもよくあるやつだと思いますが、当事者になるとついやってしまいますね

作るのに時間かけすぎ

作ろう！と思ってから1年近くたってしまいました。
vscodeのエディター拡張ってどう作るんだ、となって時間が解けたり
なんかしっくりこないので作り直したり、オレオレフレームワークを作りこんだり。。。
リーンスタートアップの知識自体はあったので、早くリリースすべきという意識はあったのですが、つい作りこみたくなってなかなか実践できませんでした

アーキテクチャは将来のことを気にしすぎな面がありますが、そこまでコストがかからないのでやっておこうか、というスタンスでした。実際のところどうすべきなのか（こういうのも良くないのか）判断ついていません

いきあたりばったり開発

なんとなくこれやってみると便利じゃね？でついつい開発してしまいます。
上記の作るのに時間かけすぎにも関連しますね
開発動機の課題は自分の中では明確でしたが、どう解決するか？の部分がふわふわしていたため、右往左往してしまいました。
個人開発なんだし、とだらだらしてしまいましたが、ちゃんと計画立ててやれればよかったなーと思ってます

何度もモチベーションを失う

1年間高いモチベーションを保つなんて無理で、かなりダラダラ開発していました。
もっと短時間に集中してやれればよかったです

あせってリリース

そうこうしているうちに似たコンセプトのデバッガがリリースされているのを見つけました。
https://www.bug.video/
(intelij専用かつpython未サポートっぽいので今はかぶってません)

そこで慌ててリリースしようとしたのですが・・・

CIやテストを後回しにしてるのでぐちゃぐちゃ
そもそもVSCode拡張ってどうリリースするんだっけ => productionビルド動かない😂

などなど大慌てでリリースしました。
細かいバグが残ったままです😅

理想とスキルとのギャップ

私自身はインフラSEで職業プログラマではないため、アーキテクチャやテスト等のスキルがあまりありませんでした。
個人開発でちょっとreactとか触ってみた、ぐらいです。
なのでいいアーキテクチャにしたい！とかCIとかテストをちゃんとしたい！とかいろいろ考えたり、本をいろいろ読んで勉強してはいたのですが、まだまだだなという状況です

今後に向けて

なにはともあれ、リリースはしたので何等かの方法でニーズを確かめつつ改善していきたいと思っています。まだ始まったばかり！だと思ってやっていきたいと思ってます。
また、自分で使いながら改善していこうと思っています。
いろいろスキル足りてないなーという部分はむしろ勉強する機会ととらえてスキルアップしていこうと思ってます

ここまで読んでいただきありがとうございました

もし使ってもらってフィードバックもらえたりするとすごくうれしいです