こんにちは、エンジニアの遠藤です。

こんなことはありませんか?

Chrome で DevTools を使って解析している途中で、別タブが開いてしまい

  • Network のログが消えてしまった!
  • 何のリクエスト投げて遷移してるか見れない!
  • ロード時に実行されるJSをデバッグできない!

といったことが。

開発中だとあまり気にならないのですが、運用後に発覚したバグの調査とか、急に担当者がいなくなって仕様がよく分からない、といった時に、ログがパッと消えるとイラァッとしますよね。

こういう時は焦っていることもあり、地味に手順を見つけるのに時間がかかってしまったり...。

開発者ツールを別タブで開く記事ばかりヒットして、これもイライラを増長させます。
(逆にそっちを知りたい人が訪れた時のために、最後にその方法も載せておきます。)

設定自体は数クリックでできます。

環境

Mac OS: 13.0.1(22A400)
Chrome: バージョン: 107.0.5304.110

DevTools を開く

Chrome のメニューから開く方法

[表示] -> [開発/管理] -> [要素の検証]

----------2022-11-21-20.56.00

または右クリックから開く方法

----------2022-11-21-20.56.07

DevTools の Settings (歯車アイコン)を押す

----------2022-11-08-22.32.46

[Preferences]→[Network]→[Preserve log]をONにする

network-1

[Preferences]→[Global]→[Auto-open DevTools for popups]をONにする

auto_open-1

終わりです。
知っていればなんてことはないですね。

もしwindow.openで確定なら

ちなみに、別タブ遷移が window.open で確定していて、かつ URL だけ見たいという場合は、 DevTools のコンソールから上書きして URL だけ覗いてみる方法も取れます。
どんな需要があるんだ、と思われるかもしれませんが、画面遷移時にリダイレクトが何度も走るような環境で、最初にどこを表示してるんだ?ということを知りたかったのです。

window.open = function(url, target, features) {
    console.log(url);
}

----------2022-11-21-21.12.13

こちらはあまり有用な解決策ではありませんが、既存の関数も上書きできるんだな、ということを知っていると、いつか何かの役に立つ日が来るかもしれません。

他にもWireshark 使うとか、 オレオレなプロキシサーバをたてて中身を見るといった、仰々しい方法もありそうですね。
もっと、他にいい方法やツールがありましたら、教えてください。

(おまけ) 開発者ツールを別タブで開く方法

こっちを知りたい人が訪れた時のために...

3点アイコンから四角が重なったようなアイコンをクリック

----------2022-11-21-20.56.42

以上。