CODEWITHSUNDEEP
javascriptreactjsdebugginggoogle-chrome-devtools
ANewGuyInTown
ANewGuyInTown

Reputation: 6467

How to run chrome devtools snippets for ReactJS application?

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?

Upvotes: 1

Views: 320

Answers (1)

Vikrant
Vikrant

Reputation: 898

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.

enter image description here

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

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

Upvotes: 1

Related Questions