JavaScript
Chrome
test

`onBlur` がテストしづらい時はBreakpointを使おう


困っていたこと

https://jedwatson.github.io/react-select/

Peek 2019-03-10 11-11.gif

React用のSelectコンポーネント React-Select をテストするときに、コンポーネント以外の箇所をクリックすると選択肢が閉じちゃうんですが、 DeveloperToolをクリックしても反応する ので、開いた状態のDOM要素がどうなっているか見られず困っていました。


解決方法


DOM Breakpointを使う

image.png

Elements タブで、Breakpointを仕込みたい要素を右クリックして、 Break on > subtree modification を選択します。

この状態で当該要素をクリックすると、画面全体が暗転して、上の方にPaused in Debugger と出てきます。

image.png

一番右のimage.pngをクリックするとステップ実行されます。

DOMの状態を確認したいところまでポチポチ進めていきましょう。

Debuggerを解除したいときはimage.pngをクリックすると次のBreakpointまで実行されます(他にBreakpointが無ければ最後まで実行されます)。