Hexo 内部探訪 (6) DevToolsを使ったデバッグ

恥ずかしながらデバッカーを使い慣れておらず、こういった実行時コンテキストの解析に、手間取っていました。
今回は、DevToolsプロトコルを使って解析してみよう。

$ cd <path-to-your-blog-dir>
$ hexo clean
$ node --inspect-brk node_modules/hexo-cli/bin/hexo g --debug

このようにinspectを有効化してから、ブラウザ(Chromiumを利用)でchrome://inspectを開き、Remote Targetの中に現れるinspect thisから、デバッカーを開始する。

これだと、デバッカーに馴れていない私にとっては、見たいところにたどり着くまでに手間取ってしまった。

そこで、自身で開発中のプラグインの中に、任意のブレークポイントをあらかじめ挿入してしまう。

debugger;

そして

$ node --inspect node_modules/hexo-cli/bin/hexo g --debug

-brk の有無が異なる点に注意。

これで、ようやく調査がやりやすくなりました。
デバッカーの使い方は、これが詳しい。

コードをステップ実行する方法 | Tools for Web Developers | Google Developers