Engineで動かす。2019/02/24productionビルドするとstyled-componentsでChromeのdevtoolから値がいじれない話とその解決styled-componentsJavaScriptdevtool先日発見したのだが、styled-componentsをproductionモードでビルドするとchromeのdevtool上からいじれないらしい。結論(解決法)devtoolから編集することを求めている場合はdevelopmentモードでビルドするか、SC_DISABLE_SPEEDYをつけてビルドしよう。詳細(なぜそうなるのか?)styled-componentsは下記のような形でビルドモードを切り分けているhttps://github.com/styled-components/styled-components/blob/e1f75d04e51cdc5d8fd5e6bef9f40584f964b7c3/packages/styled-components/src/models/StyleTags.js#L400-L404makeBrowserTagとmakeSpeedyTagを読み解くのはなかなか難しいのだが微妙にCSSのルール挿入の仕方が変わっている。(この詳細まで調べたかったが、残念ながら読み解ききれてない)そしてchromiumにこれに関連しそうな下記のようなバグが報告されている。dynamicにinsertされたCSSが編集不可であるというものだ。スレッドの流れを見ていると修正されない可能性もありそうだ。https://bugs.chromium.org/p/chromium/issues/detail?id=387952そして、これはSC_DISABLE_SPEEDYという変数をenvなどで与えることで変更することもできるようなので、productionモードは保ちつつこの挙動を変えたいという場合はこの値をビルド時にわたす手もありそうだ(これは未検証)https://github.com/styled-components/styled-components/blob/c3eedbeb79621acd668e15ed2d63107528ed81c3/packages/styled-components/src/constants.js#L12-L14当然、パフォーマンスは落ちることが予測されるので、例えばstaging環境用にのみこのビルドをするなどが良いだろう。Github@terrierscript。