[SOLVED] How do I configure React developer tool to work with CodePen?

1

How do I configure Firefox’s React developer tool to work with CodePen ? By default, it tells me it’s unable to find any React on the page.

1 Like
2

@harvey56 56 have you tried this way? https://www.youtube.com/watch?v=rCROKxJZfnk

3

There is a developer tool in Firefox, which ressembles very much Chrome developer tool, which you can open up by right clicking anywhere on your webpage and then clicking “inspect element”.

Now, by default, it gives you access to the console, debugger, style editor etc… but there is nothing about React. If you want to inspect the React code on your React app, you need to add an external plugin, which you can get from the Add-ons menu in Firefox. This plugin will embed with the Firefox developer tool.

However, if you attempt to use the React developer tool with Codepen, it tells you “unable to find React on the page”.

So, I was wondering if there was another way. Another tool, or a way to configure that specific tool.

4

In your codepen link replace full (or edit) with debug.

Works with Chrome React Tool.

1 Like
5

yay! Thanks jenovs! I didn’t know about the debug mode.

Works with Firefox React tool too.

6

Thank you! Works great now!