ドラック中の要素のスタイルをデバッグする

困っていること

React で react-sortable-hoc を使っているとき、ドラック中の要素のスタイルが崩れてしまったのですが、どのスタイルが効かなくなったのか特定したいという状況でした。ドラック中だけスタイルが崩れるので、掴んでいる状態のままデバックしたいのですが、マウスで要素を掴んだままデベロッパーツールは操作できないので困っていました。

解決方法

1. Chrome のデベロッパーツールの ソース > イベントリスナー ブレークポイント > マウス > mouseup にチェックを入れる。
2. 要素を掴んで離すと、離した瞬間にブレークポイントで停止する（掴んだ状態で画面が止まる）
   
3. Chrome のデベロッパーツールの 要素 を開いてドラック中の要素に適用されているCSSを確認する。

そもそもなぜスタイルが崩れてしまうのか

結論から言うと、ドラックできるようにしている要素にカスケーディングを使用している場合、ドラック中はそのカスケーディングが効かなくなってしまうからです。

例えば、ドラック可能な draggable-item クラスの付いた要素に下記のようなスタイルを当てているとします。

<div class="draggable-area">
  <div class="draggable-item">
    <p>掴んでいいよ</p>
  </div>
  <div class="draggable-item">
    <p>掴んでいいよ</p>
  </div>
</div>

.draggable-area > .draggable-item {
  background-color: red;
}

この状態で draggable-item をドラックをすると、ドラックされている要素は draggable-area の外にマウントされます。そうすると、カスケーディングで指定されていたスタイルが効かなくなってしまいます。

<div class="draggable-area">
  <div class="draggable-item">
    <p>掴んでいいよ</p>
  </div>
</div>
<div class="draggable-item">
  <p>掴んでいいよ</p>
</div>

スタイルを上手く当てるために、カスケーディングを使用することがあると思いますが、こういった実装をする箇所では気をつける必要がありそうです。