DevTools は独立ウィンドウで表示することができます。外部モニターもあるのでそうやって別に出して使うことが多いんですが、複数のページを並行して開いていて「あれどのタブだっけ」みたいになることがあるかもしれません。いやないか? あるでしょ、あるということにします。

そんなときは “Focus debuggee” を実行すると、DevTools で見ているページのタブにフォーカスが移ります。たとえ他のデスクトップ(左右にひゅんひゅん動くやつ)にあったとしても見つけてくれます。

DevTools が見ているページのタブを開く

独立ウィンドウの右上 “…” からすぐです。なお DevTools をブラウザーのウィンドウに格納している場合は出てきません。

メニューの中にある “Focus debuggee” の項目。(こんなのあったんだ。)

ショートカット

Settings → Shortcuts の一覧には載ってるんですが、設定されたキーはないです。

自分でショートカットを設定すれば良いんですが、残念ながらまだショートカット設定の機能は一般開放されてません。Settings → Experiments から有効化すると使えるようになります。

ショートカット一覧の “Focus debuggee” の行。

変更するやつはこちら。

使えない場面も?

ショートカット設定したんですが、コンソールの入力欄にフォーカスがある状態だと、この Focus debuggee を利用できませんでした。不具合なのか制限なのかは判断付かない。

ブラウザー側から DevTools を探す

逆にページを開いている側から対応する DevTools のウィンドウを探す場合、通常の DevTools を開く操作、ショートカット (Ctrl+Shift+I) でフォーカスを移せます。

おしまい

昔は DevTools を同じブラウザーのウィンドウに格納した状態で使ってましたが、常時外部モニターを利用するようになった現在では別ウィンドウで利用しています。