React DevTools Theme

[markbrouch]

I would love it if there was support for the React DevTools panel that gets added by the React plugin.

This is what it looks like currently:

[mauricecruz]

I'll give it a whirl but from what I remember of devtools plugins, any css written inside the plugin takes precedence. There's a good chance any of my changes will get overwritten by their stylesheet. I'll post my findings.

[mauricecruz]

So I got good news and bad news.

Bad news

CSS inside an extension is totally walled off. Makes sense since extensions shouldn't be affected by other extensions. So any changes I make to my theme to support React won't work.

Good news

It can be themed if you're willing to put in some work.

1. navigate to the directory where Chrome extensions are installed (on windows it's /%APPDATA%/Local/Google/Chrome/User Data/<profile>/Extensions
2. navigate to the react folder extension. You can find the name by going to the extensions menu on your browser and enabling developer mode (checkbox on top right).
3. search for inspectorSyntaxHighlight.css and append the contents of stable.css.
4. in the css stylesheet, replace chrome-devtools://devtools/bundled/Images/statusbarButtonGlyphs.png with chrome-extension://<extension_path>/blink/Source/devtools/front_end/Images/statusbarButtonGlyphs.png. Make sure you replace the <extension_path>.

NOTE: Anytime the React extension updates, all the steps above will be undone so you may want to save a copy you can paste back.

Enjoy!

[sebmarkbage]

This is cool. Is there any way to get this working by default in the React DevTools extension? Do we have to do anything?

[mauricecruz]

@sebmarkbage you could bundle the css from my theme with the extension. That would make it 'default'. But devtools users that use other themes or stock will have a disjointed experience.

I guess you can't make everyone happy 😏 . Maybe implementing a css switch to toggle stock/this theme in the extension is a good medium.

[markbrouch]

Awesome! That worked great - thanks for taking the time to figure this out and write up the steps.

[mauricecruz]

FYI... made this an injectable so you don't have to dig into the filesystem.

https://gist.github.com/mauricecruz/f53c932961a04c01a096#file-zdm-react-devtools-md

[dqisme]

I found the way above doesn't work any more, so I hacked the react devtools packed chrome extension and re-design it into Tomorrow theme.

https://github.com/dqisme/react-devtool-with-tomorrow-theme

[mauricecruz]

@dqisme awesome! Wonder if react devtools works with the native dark theme as well.

[dqisme]

@mauricecruz I looked into the extension package and the color is hard-coded in it. Facebook made devtools as inline styling for some React Native reason. so i think it doesn't work either.