私がサーバーを管理してないウェブページで うまく動かないところがありました
ページの内容を見たかったので devtools で簡単に対応して画面を見ようかなと思いました
breakpoint を設置して原因になってる変数を上書きして その場限りの簡単な修正をする感じです

こういうことはたまにあるのですが 今回は予想外の問題がありました

URL が毎回変わる

ボタンを押したときなどじゃなくて ページロード時の処理でエラーになっていたので ロード時の処理に breakpoint をつけてリロードしました
しかし breakpoint で止まりません
何度か試しても同じです
よく見るとリロード後に breakpoint が消えています

原因を探すと 毎回異なる URL の JavaScript ファイルをロードしていました
正確にはクエリパラメータに現在時刻のタイムスタンプを追加した URL でアクセスしていました

キャッシュ防止のために昔はよくみたものですね
最近はビルドツールが生成するハッシュ値になってあまりみなくなりましたけど

PHP のページで ページにアクセスするたびに動的にタイムスタンプが HTML に埋め込まれてるようでした

<script src="/page.js?12345"></script>

みたいな形になってました
devtools からすると毎回別の URL なので breakpoint は引き継がれず停止無しで実行してるようでした
すごくデバッグし辛いと思うのですが 作った人はどうやってるのでしょうね

開発した人だとサーバー側で console.log をソースコードに追加するとかできるので 都度ファイルを書き換えてるのでしょうか

対処方法

楽に対処できるいい方法無いかなーと考えていて久々に Local Overrides の機能を使うことにしました
devtools の Sources タブで原因となる HTML のファイルを探します
ここでは page.php とします

page.php を右クリックして Override content を選びます
フォルダが未設定ならフォルダを選択することになるので 適当なフォルダを作ってそれを選びます
devtools のヘッダーに確認が出てくるので許可します
これで作ったフォルダの中に page.php が作られます
devtools を開いてる間はサーバーから受け取る page.php ではなくローカルフォルダの page.php を受け取ったものとして動作します

今回はレスポンスを書き換えるのが目的ではなく JavaScript ファイルを毎回同じ URL にすることが目的なので変える必要はなくこのままリロードするだけです
リロードするとタイムスタンプが前回と同じ JavaScript ファイルを取得するので breakpoint が有効になります

便利ですね

終わったら Sources タブの左側サイドバーで Overrides タブを選んで Enable Local Overrides の右側にあるクリアしてくれそうなアイコンを押して設定をクリアします
作ったフォルダも削除すれば完了です

他の方法

他の考えた方法だと ひとつは拡張機能を使う方法です
page.js?12345 だろうと page.js?67890 だろうとリダイレクトして page.js に飛ばせば解決です
page.php のレスポンスを 304 にして前回から変更なしと扱わせることもできそうです
ただリクエストを書き換える拡張機能が必要で 準備するのも面倒なのでやめました

もうひとつは ServiceWorker を使う方法です
ですが ServiceWorker はそんなに詳しくないのと サーバーに実在しないスクリプトを devtools だけでインストールできるのかわからなかったのでやめました

これらに比べると devtools の機能だけで完結できる Local Overrides は簡単です

Edge のバグ？

この機能は Chrome でも Edge でも動くなずなのですが Edge (122) だと Sources タブの左サイドバーに Overrides タブがなかったです
Page しかなく Workspace や Content Scripts もなかったです
しかし 右クリックで Override content は選べてそこからフォルダ選択もできました

最近 Edge は devtools の見た目を変更したのでそれの影響でおかしくなってるのかもしれません
有効にしたら無効にできない気もするので Edge ではやらないほうがいいかもです