跳到主要内容
知仓学习社ZHICANG

click-path-audit

ユーザー向けボタン/タッチポイントを完全な状態変更シーケンスを通して追跡し、機能が個別に機能するが互いにキャンセルされたり、間違った最終状態を生成したり、UIを矛盾した状態にしたままにするバグを見つけます。次の場合に使用します:体系的なデバッグがバグを見つけたが、ユーザーは壊れたボタンを報告する…

不碰外部(只输出文字)无严重或高危命中affaan-m/ECC

它会碰到什么

扫了多少1 个文本文件,2 KB
它会碰到什么不碰外部(只输出文字)
命中总数0 处
命中统计严重 0 · 高 0 · 中 0 · 低 0

这一栏是扫描器报的事实,不是结论。命中多不等于有毒(安全工具、规则库、示例脚本本来就会包含危险写法),命中少也不等于干净。它和你手上的凭据、文件、网络有什么关系,需要你自己看。

技能内容

/click-path-audit — 行動フロー監査

静的コード読み取りが見落とすバグを見つけ:状態相互作用の副作用、順序を付けられた呼び出し間の競合状態、および互いに静かに取り消すハンドラー。

この解決する問題

従来のデバッグチェック:

  • 関数が存在しますか?(不足している配線)
  • クラッシュしますか?(ランタイムエラー)
  • 正しいタイプを返しますか?(データフロー)

しかし、それはチェックしません

  • 最終UI状態がボタンラベルが約束したものと一致しますか?
  • 関数Bが関数Aが行ったばかりをサイレンス的に取り消しますか?
  • 共有状態(Zustand/Redux/context)に意図した操作をキャンセルする副作用がありますか?

実例:「新しいメール」ボタンがsetComposeMode(true)を呼び出してからselectThread(null)。両方は個別に機能しました。しかし、selectThreadにはcomposeMode: falseをリセットする副作用がありました。ボタンは何もしなかった。54のバグは体系的なデバッグによって見つかりました — これは見落とされました。


動作方法

対象領域のすべてのインタラクティブなタッチポイントについて:

1. ハンドラーを特定(onClick、onSubmit、onChangeなど)
2. ハンドラーのすべての関数呼び出しを**順序で**追跡
3. 各関数呼び出し**について**:
   a. どの状態を読んでいますか?
   b. どの状態を書き込んでいますか?
   c. 共有状態に副作用がありますか?
   d. 副作用として状態をリセット/クリアしますか?
4. チェック:後の呼び出しが以前の呼び出しからの状態変更を取り消しますか?
5. チェック:最終状態はユーザーがボタンラベルから期待するもの?
6. チェック:競合状態がありますか(非同期呼び出しが間違った順序で解決される)?

実行ステップ

ステップ1:マップ状態ストア

任意のタッチポイントを監査する前に、すべての状態ストアアクションの副作用マップを構築:

範囲内の各Zustand ストア / React コンテキストについて:
  各アクション/セッター:
    - どのフィールドをセットしますか?
    - 副作用として他のフィールドをリセットしますか?
    - ドキュメント:actionName → {sets: [...], resets: [...]}

これは重要な参照です。「新しいメール」バグはselectThreadcomposeModeをリセットしていることを知らないと見えなくなりました。

出力形式:

STORE: emailStore
  setComposeMode(bool) → sets: {composeMode}
  selectThread(thread|null) → sets: {selectedThread, selectedThreadId, messages, drafts, selectedDraft, summary} RESETS: {composeMode: false, composeData: null, redraftOpen: false}
  setDraftGenerating(bool) → sets: {draftGenerating}
  ...

DANGEROUS RESETS(所有していない状態をクリアするアクション):
  selectThread → composeMode をリセット(setComposeModeで所有)
  reset → すべてをリセット

ステップ2:各タッチポイントを監査

対象領域の各ボタン/トグル/フォーム送信について:

TOUCHPOINT: [ボタンラベル] in [Component:line]
ハンドラー:[関数呼び出しの完全なシーケンス]
最終状態:[これが達成されるべきもの]

詳細については、ドキュメントを参照してください。

想直接用这个技能?

本站把开放许可(MIT / Apache 等)的技能按仓库打包整理到网盘,点一下转存到你自己的网盘,不用一个个从 GitHub 拉。许可未声明的技能只给原始仓库链接,不打包。

同名技能的其他版本

有 3 个不同仓库或目录里都有叫 click-path-audit 的技能。它们内容并不相同,别混用:

  • affaan-m/ECC — 追踪每个面向用户的按钮/触点的完整状态变化序列,以发现功能单独工作但相互抵消、产生错误最终状态或使UI处于不一致状态的错误。适用于:系统调试未发现错误但用户报告按钮失效,或在任何涉
  • affaan-m/ECC — Trace every user-facing button/touchpoint through its full state change sequence to find b