結局プリントデバッグが最強なのでライブラリもプリントデバッグする

😏 プリントデバッグは最強

エンジニアになって半年くらい経ったとき、プリントデバッグをしているのがなんだがスマートじゃない気がして、IDEのデバッグツールを使ったりしてみた。
最初は「こんな便利機能なんで今まで使わなかったんだろう」と思うのだが、数日経つと全てを忘れてプリントデバッグしていた。
結局console.logするのが一番手軽で最強のツールなのだ。

🎯 ライブラリをプリントデバッグする

普段はReactを書いているのだが、開発をする中でライブラリ側の挙動を知りたくなることがそこそこある。
そんなときnode_moduleから該当のライブラリを探し出して、変数をconsole.logしようとする。
けどnode_moduleにあるコードは基本minifyされており、どんな処理が書いてあるか全く読み取れず、どこにconsole.logを書けばいいかわからない。
そんなときに使うと便利なのがpnpm add linkというコマンドだ。

pnpm add link

yarnならこう。

yarn add link

これを使うとローカルにクローンしたプロジェクトを直接アプリ側で使うことができ、簡単にデバッグすることができる。

🤔 もっと詳しく

react-hook-formというライブラリを例にとって実際にデバッグしてみる。

まずは任意のディレクトリにreact-hook-formをクローンする。

git clone https://github.com/react-hook-form/react-hook-form.git

そしてプロジェクトをクローンしたディレクトリの絶対パスをコピーしておく。

次にreact-hook-formを使う側のアプリをセットアップする。今回は手軽にcreate viteでセットアップする。

pnpm create vite my-app --template react-ts
cd my-app

そして以下のコマンドを実行して、ローカルにクローンしたreact-hook-formのシンボリックリンクを作成する。

シンボリックリンク（symbolic link）とは、オペレーティングシステム(OS)のファイルシステムの機能の一つで、特定のファイルやディレクトリを指し示す別のファイルを作成し、それを通じて本体を参照できるようにする仕組み。

引用：https://e-words.jp/w/シンボリックリンク.html

pnpm add link <ローカルのreact-hook-formの絶対パス>

するとpackage.jsonにreact-hook-formが追加されているのがわかる。

+ "react-hook-form": "<ローカルのreact-hook-formの絶対パス>"

これだけで準備完了。試しにreact-hook-form側のsrc\index.tsにconsole.logを追加してみる。

export * from './controller';
export * from './form';
export * from './logic';
export * from './types';
export * from './useController';
export * from './useFieldArray';
export * from './useForm';
export * from './useFormContext';
export * from './useFormState';
export * from './useWatch';
export * from './utils';
+ console.log("hello");

ここでpnpm build:watchを実行して変更を反映させておく。

そして、アプリ側のsrc\App.tsxで以下のように任意のAPIを呼び出してサーバーを起動する。

import { useForm } from "react-hook-form";

const App = () => {
  const { register, handleSubmit } = useForm();
  // 略
};

pnpm dev

コンソールを確認するとhelloが出力されているのがわかる。

📝 まとめ

このようにpnpm add linkを使うとライブラリ側のコードも簡単にデバッグできる。デバッグだけでなく自由にコードを書き換えて動きを確認することもできるので、OSSのコードリーディングやバグ修正にも役立つ。知らなかった方はぜひ活用してみてほしい。