7 日目の記事です。

window の blur イベントや document の visibilitychange イベントなどを用いた制御をしている場合、通常のデバッグ作業の邪魔になってしまうことがあります。

DevTools を使ってこれを無効化することができます。

常時フォーカス状態にする

Rendering パネルに設定があります。まずはパネルを表示して、その中から探してください。

  1. Rendering パネルを表示
    1. 右上の “…” ボタン → More tools → Rendering
  2. “Emulate a focused page” を探して、チェックを入れる

More toolsを開いたところと、”Emulate a focused page” にチェックを入れたところ。

使い終わったら解除を忘れない

そのままだと blur で消えるものが残ったりして「あれ?」とかなるので忘れないようご注意。どこにも表示されないしうっかりしそう。

使いどころ

blur イベントで消える UI をデバッグ

基本的には blur 系イベントを発火させたくない場合です。

  • window の blur
  • button や input などのフォーム要素、及び focusable な要素の blur
  • document の visibilitychange (タブ切り替え時など)

blur は主に他のウィンドウへフォーカスを移したときに発火しますが、DevTools へフォーカスを移した際にも同様に発火してしまいます。ちなみに逆は focus イベント。

「フォーカスしている間だけツールチップを表示」みたいなのしてると、そのツールチップは DevTools で見ようとすると消えちゃうので困りものですね。

あとはドロップダウンの UI も同様でしょうか。組み込みのドロップダウン(<select> とか)が消えるは回避できないですしする必要もなさそうですが、UI ライブラリーで出してるやつはいけそうです。

CSS の :focus 擬似クラスをデバッグ?

:focus で指定したスタイルが外れてしまう問題も解決できます。

できますが、まあこちらは Elements パネルで :focus 状態を強制するやつ使った方が良いです。

Elements パネルで要素に :focus 状態を与えることができる。

おまけ

フォーカス状態を取得

document.hasFocus() でフォーカスを得ているか判断できます。エミュレートすると常時 true になります。

ちなみに focus, blur イベントは window で発火しますが、このメソッドは document です。

可視状態を取得

document.visibilityState で可視状態を得られます。エミュレートすると常時 "visible" になります。

おしまい

情報が少ない。

参考