📜

[Google Chrome 拡張機能] Code Path Tracker でコードリーディングを効率化 !

2024/11/02に公開

JavaScript

 Code Path Tracker とはCode Path Tracker は OpenGrok などのソースコードの閲覧サイトでクリックした関数をサイドバーの履歴に残し、それらをカスタムテンプレートを使用してコピーができる Google Chrome 拡張機能です。
!OpenGrok はソースコードの関数などを検索/閲覧が行えるツールです。
(追記)簡単に試したい方用に構築方法を記事にしました!

https://zenn.dev/apo_space81/articles/deab4ed1ad5d35
ソースコードを読んでいる時には関数名をクリックしてどこからその関数が呼ばれているかや次はどのコードへと進んでいるかを確認することがあると思います。

読んでいた部分が間違っていた時に見ていたページに戻りたいのでそのページを残すために別タブで開くことはよくあるでしょう。

ただ、これだとタブを開きすぎてどれがどのタブだったかわからくなって探すのに時間を費やすこともありました...
それを解決するのがこの拡張機能です!
この拡張機能はコードを効率的にレビューしたり、履歴で処理を追跡することでコードの流れを深く理解するための強力なツールです。

 【主な機能】関数名のクリックで自動的に履歴に追加
サイドバーでの履歴管理(階層変更、削除、コピー、URL の変更)
+, - ボタンで階層の調整
↑, ↓ ボタンで関数の順番の変更
x ボタンでその関数の履歴を削除
✎ ボタンで URL 編集

設定でカスタムテンプレートやインデント、各関数に URL を含めるかの有無を指定可能
URL パターンを指定して拡張機能を特定のサイトでのみ有効化

 Code Path Tracker の使用方法Chrome ウェブストアから拡張機能をインストールします。
拡張機能のオプションページを開きます。
"Enabled URLs (Enter each URL on a new line): "と表示されたフィールドに拡張機能を有効にする URL パターンを入力します。

3-1. 例えば、http://example.com/ の下にあるすべてのリソースで有効にするには、http://example.com/* と入力します。

*注：は、指定したドメイン配下のすべてのリソースへのアクセスを許可するために必須です。
[保存]ボタンをクリックし、指定したURLで有効化されたコード閲覧サイトに移動し、コード内の関数の追跡と分析を開始します！

 出力例Output Example:
systemd-v239-44
--------------------
_nss_resolve_gethostbyname4_r
  +-> sd_bus_message_new_method_call
    +-> sd_bus_message_new
      +-> allow_interactive_authorization
  +-> count_addresses
    +-> sd_bus_message_enter_container
--------------------
Code Path Tracker をぜひ使ってみてください !!!

Code Path Tracker とは

【主な機能】

Code Path Tracker の使用方法

出力例

Discussion