タイトル通り、Chrome DevToolsで、クリック時のみNodeが描画される要素の確認方法ほか、DevToolsの小ネタを投稿します。
クリック時のみの描画される例
以下のようなものがそれにあたります。
この場合、Elementsを調べようとしても、inputタグ以外をクリックすると削除されてしまい簡単には確認できません。
https://material-ui.com/components/autocomplete/#combo-box
ブレークポイントの指定
よって、このDOM要素にブレークポイントを指定する必要があります。
ブレークしたい要素をDevToolsにて右クリック後、下記画像の赤上矢印のnode removalをクリックしてください。
これは、指定した要素が削除された際にブレークする仕組みを提供してくれます。
こうすると、この例で出したmaterial-uiの例だと最下部に移動してしまうのですが、きちんと要素の確認ができます！
FYI:ホバー時のみの描画される例
これは同僚から教えていただいたのですが、ホバー時のみに描画が変わる場合は、
下記の画像にあるように、:hovをクリックした後に赤下矢印のチェックボックスをチェックしてください。
（ここではリンクテキストのホバー時のものが確認できます）
