How to run chrome devtools snippets for ReactJS application?

Question

If I have to run the stopBefore snippet as in the gist, how do I use it for ReactJS application?

The example shows for global object like document, but if I have to say stop before ComponentX.SomeMethod, how do I do it?

When trying

stopBefore(ComponentX,'SomeMethod')

It says, Uncaught ReferenceError: ComponentX is not defined

Am I missing something?

Vikrant · Accepted Answer · 2020-11-04 06:08:02Z

1

React components are not globally available.

Hence can't be accessed directly in the console. But you can open Components tab in react-dev-tools than select the desired component and now open the console at the same time if not already using Esc key and type in $r in console to get the component's instance.

Now you can do whatever you desire-
stopBefore($r, 'setState')

As soon as you type $r.setState({})
You will be taken to the debugger.

answered Nov 4, 2020 at 6:08

Vikrant

9088 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to run chrome devtools snippets for ReactJS application?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related