Do you wonder how to debug react-native applications during your app development? This is a crude way to do it as I am still cannot do it in debug mode. I do it using console.log way.

Run your metro bundler

First, run your metro bundler. If you have properly created the react-native project, then the normal npm run will be enough.

$ npm run start

Then run the app via Xcode.

React-native Debug Console

Open the link below in your browser.

http://localhost:8081/debugger-ui/

Then open debug console in your browser. This is easier to do in Chrome. Simple right click then select Inspect. If you see this message in your debugger web page.

Status: Waiting, press ⌘R in simulator to reload and connect.

Go to your iOS simulator and press Command+D. React Native Development menu will show. Then select Debug JS Remotely.

React Native: Development menu

The status should change to

Status: Debugger session #<number> active.

Ways to debug

The are 2 ways to debug

Adding console.log to your code.

Basically, you just need to add console.log(‘Log message’) inside your code. Then it will print in the Console tab of the Chrome debugger.

Add breakpoints

This is the ideal debugging way. However, be warned as this still crashes a lot in chrome debugger. My suggestion is to use console.log. But if you want this, you can add breakpoints in the source files.

Source Tab > Page SubTab > debuggerWorker.js Cogwheel > {project_folder} > src > ....

Leave a Reply

Your email address will not be published. Required fields are marked *