こんにちは、エンジニアの遠藤です。
こんなことはありませんか?
Chrome で DevTools を使って解析している途中で、別タブが開いてしまい
- Network のログが消えてしまった!
- 何のリクエスト投げて遷移してるか見れない!
- ロード時に実行されるJSをデバッグできない!
といったことが。
開発中だとあまり気にならないのですが、運用後に発覚したバグの調査とか、急に担当者がいなくなって仕様がよく分からない、といった時に、ログがパッと消えるとイラァッとしますよね。
こういう時は焦っていることもあり、地味に手順を見つけるのに時間がかかってしまったり...。
開発者ツールを別タブで開く記事ばかりヒットして、これもイライラを増長させます。
(逆にそっちを知りたい人が訪れた時のために、最後にその方法も載せておきます。)
設定自体は数クリックでできます。
環境
Mac OS: 13.0.1(22A400)
Chrome: バージョン: 107.0.5304.110
DevTools を開く
Chrome のメニューから開く方法
[表示] -> [開発/管理] -> [要素の検証]
または右クリックから開く方法
DevTools の Settings (歯車アイコン)を押す
[Preferences]→[Network]→[Preserve log]をONにする
[Preferences]→[Global]→[Auto-open DevTools for popups]をONにする
終わりです。
知っていればなんてことはないですね。
もしwindow.openで確定なら
ちなみに、別タブ遷移が window.open で確定していて、かつ URL だけ見たいという場合は、 DevTools のコンソールから上書きして URL だけ覗いてみる方法も取れます。
どんな需要があるんだ、と思われるかもしれませんが、画面遷移時にリダイレクトが何度も走るような環境で、最初にどこを表示してるんだ?ということを知りたかったのです。
window.open = function(url, target, features) {
console.log(url);
}
こちらはあまり有用な解決策ではありませんが、既存の関数も上書きできるんだな、ということを知っていると、いつか何かの役に立つ日が来るかもしれません。
他にもWireshark 使うとか、 オレオレなプロキシサーバをたてて中身を見るといった、仰々しい方法もありそうですね。
もっと、他にいい方法やツールがありましたら、教えてください。
(おまけ) 開発者ツールを別タブで開く方法
こっちを知りたい人が訪れた時のために...
3点アイコンから四角が重なったようなアイコンをクリック
以上。