DevTools は独立ウィンドウで表示することができます。外部モニターもあるのでそうやって別に出して使うことが多いんですが、複数のページを並行して開いていて「あれどのタブだっけ」みたいになることがあるかもしれません。いやないか? あるでしょ、あるということにします。
そんなときは “Focus debuggee” を実行すると、DevTools で見ているページのタブにフォーカスが移ります。たとえ他のデスクトップ(左右にひゅんひゅん動くやつ)にあったとしても見つけてくれます。
DevTools が見ているページのタブを開く
独立ウィンドウの右上 “…” からすぐです。なお DevTools をブラウザーのウィンドウに格納している場合は出てきません。
ショートカット
Settings → Shortcuts の一覧には載ってるんですが、設定されたキーはないです。
自分でショートカットを設定すれば良いんですが、残念ながらまだショートカット設定の機能は一般開放されてません。Settings → Experiments から有効化すると使えるようになります。
変更するやつはこちら。
使えない場面も?
ショートカット設定したんですが、コンソールの入力欄にフォーカスがある状態だと、この Focus debuggee を利用できませんでした。不具合なのか制限なのかは判断付かない。
ブラウザー側から DevTools を探す
逆にページを開いている側から対応する DevTools のウィンドウを探す場合、通常の DevTools を開く操作、ショートカット (Ctrl+Shift+I
) でフォーカスを移せます。
おしまい
昔は DevTools を同じブラウザーのウィンドウに格納した状態で使ってましたが、常時外部モニターを利用するようになった現在では別ウィンドウで利用しています。