先日発見したのだが、styled-componentsをproductionモードでビルドするとchromeのdevtool上からいじれないらしい。

devtoolから編集することを求めている場合はdevelopmentモードでビルドするか、SC_DISABLE_SPEEDYをつけてビルドしよう。

styled-componentsは下記のような形でビルドモードを切り分けている

makeBrowserTagとmakeSpeedyTagを読み解くのはなかなか難しいのだが微妙にCSSのルール挿入の仕方が変わっている。（この詳細まで調べたかったが、残念ながら読み解ききれてない）

そしてchromiumにこれに関連しそうな下記のようなバグが報告されている。
dynamicにinsertされたCSSが編集不可であるというものだ。一方、スレッドの流れを見ていると修正されない可能性もありそうだ。

そして、これはSC_DISABLE_SPEEDYという変数をenvなどで与えることで変更することもできるようなので、productionモードは保ちつつこの挙動を変えたいという場合はこの値をビルド時にわたす手もありそうだ（これは未検証）

当然、パフォーマンスは落ちることが予測されるので、例えばstaging環境用にのみこのビルドをするなどが良いだろう。