困っていたこと
React用のSelectコンポーネント React-Select をテストするときに、コンポーネント以外の箇所をクリックすると選択肢が閉じちゃうんですが、 DeveloperToolをクリックしても反応する ので、開いた状態のDOM要素がどうなっているか見られず困っていました。
解決方法
DOM Breakpointを使う
Elements タブで、Breakpointを仕込みたい要素を右クリックして、 Break on > subtree modification を選択します。
この状態で当該要素をクリックすると、画面全体が暗転して、上の方にPaused in Debugger と出てきます。
一番右の
をクリックするとステップ実行されます。
DOMの状態を確認したいところまでポチポチ進めていきましょう。
Debuggerを解除したいときは
をクリックすると次のBreakpointまで実行されます（他にBreakpointが無ければ最後まで実行されます）。