tips chips

日々の作業で出てきた技術メモの切れ端を置いておくページ

focusを外すと消えてしまうDOM要素をDevToolsで確認したい

blurで消えるDOM要素をインスペクトする方法

例えばinputにfocusを当てると、オートコンプリート的な要素が表示され、blurイベントでオートコンプリートをunmountするみたいなコンポーネントのデバッグをしていると、DevToolsを操作しようとしてデバッグ対象のコンポーネントが消えてしまって困るということがある。(僕は react-select のカスタマイズをしたくてその問題にぶち当たった)

CSSで実装されていればいいが、JavaScriptで実装されていると実装を触らずに出しっぱなしにするのが難しかったりする。

何かスマートな解消方法があるのかもしれないが、自分はDevToolsのコンソールに

setTimeout(() => {debugger}, 5000)

というようなコードを貼り付けて、5秒以内にインスペクトしたいDOM要素を出現させる→ debuggerが実行されてJavaScriptが止まったらインスペクトするという方法で対応した。