リアクティビティの分析 {🚀}
デバッグに`trace`を使用する
Trace は、計算値、リアクション、またはコンポーネントが再評価される理由を特定するのに役立つ小さなユーティリティです。
`import { trace } from "mobx"` をインポートし、リアクションまたは計算値の中に配置するだけで使用できます。 現在の導出が再評価される理由を出力します。
オプションで、最後の引数に `true` を渡すことで、自動的にデバッガーに入ることができます。 この方法では、リアクションの再実行を引き起こす正確なミューテーションがスタックに残ります（通常は約8スタックフレーム上）。 下の画像を参照してください。
デバッガーモードでは、デバッグ情報は現在の計算/リアクションに影響を与えている完全な導出ツリーも表示します。
ライブ例
シンプルな CodeSandbox `trace` 例。
スタックを探索するためのデプロイされた例はこちらです。 Chromeデバッガーのブラックボックス機能を試してみてください！
使用例
`trace()` を呼び出す方法はいくつかあります。いくつか例を挙げます。
import { observer } from "mobx-react"
import { trace } from "mobx"
const MyComponent = observer(() => {
trace(true) // Enter the debugger whenever an observable value causes this component to re-run.
return <div>{this.props.user.name}</name>
})
リアクション/autorunの `reaction` 引数を使用してトレースを有効にする
mobx.autorun("logger", reaction => {
reaction.trace()
console.log(user.fullname)
})
計算プロパティのプロパティ名を渡す
trace(user, "fullname")
イントロスペクションAPI
デバッグ中にMobXの内部状態を検査したい場合、またはMobXの上にクールなツールを構築したい場合は、次のAPIが役立ちます。 また、さまざまな `isObservable*` API も関連しています。
`getDebugName`
使用方法
getDebugName(thing, property?)
オブザーバブルオブジェクト、プロパティ、リアクションなどの（生成された）わかりやすいデバッグ名を返します。 例えば、MobX開発者ツールで使用されます。
`getDependencyTree`
使用方法
getDependencyTree(thing, property?).
指定されたリアクション/計算が現在依存しているすべてのオブザーバブルを含むツリー構造を返します。
`getObserverTree`
使用方法
getObserverTree(thing, property?).
指定されたオブザーバブルを監視しているすべてのリアクション/計算を含むツリー構造を返します。
`getAtom`
使用方法
getAtom(thing, property?).
指定されたオブザーバブルオブジェクト、プロパティ、リアクションなどのバッキング *Atom* を返します。
スパイ
使用方法
spy(listener)
MobXで発生するすべてのイベントをリッスンするグローバルスパイリスナーを登録します。 *すべて* のオブザーバブルに `observe` リスナーを一度にアタッチするのと似ていますが、実行中の（トランザクション/リアクション）と計算についても通知します。 例えば、MobX開発者ツールで使用されます。
すべてのアクションをスパイする使用例
spy(event => {
if (event.type === "action") {
console.log(`${event.name} with args: ${event.arguments}`)
}
})
スパイリスナーは常に1つのオブジェクトを受け取ります。このオブジェクトには通常、少なくとも `type` フィールドがあります。 以下のイベントは、spy によってデフォルトで発行されます。
| タイプ | observableKind | その他のフィールド | ネスト |
|---|---|---|---|
| action | name、object（スコープ）、arguments[] | はい | |
| scheduled-reaction | name | いいえ | |
| reaction | name | はい | |
| エラー | 名前、メッセージ、エラー | いいえ | |
| add、update、remove、delete、splice | インターセプトとオブザーブ {🚀} をチェックしてください | はい | |
| report-end | spyReportEnd=true、time? （合計実行時間（ミリ秒）) | いいえ |
`report-end` イベントは、以前に `spyReportStart: true` を持っていたイベントの一部です。 このイベントはイベントの終了を示し、このようにしてサブイベントを持つイベントのグループが作成されます。 このイベントは、合計実行時間も報告する場合があります。
オブザーバブル値のスパイイベントは、`observe` に渡されるイベントと同じです。 本番ビルドでは、`spy` API は最小限に抑えられるため、ノーオペレーションです。
詳細な概要については、インターセプトとオブザーブ {🚀} セクションを参照してください。