Skip to main content

Debugging

Just as we can debug our own project, we can also debug the LiveUI project from within our main project.

How to Debug

To debug the Javascript code of your React app do the following:

React

For more information on debugging, you can follow the React Debugging

For Windows and Linux

1. Run your application.
2. Press Ctrl + Shift + I to open the Chrome Developer tools, or open it via View -> Developer -> Developer Tools.
3. You should now be able to debug as you normally would.

For macOS

1. Run your application.
2. Press Command + Option + I to open the Chrome Developer tools, or open it via View -> Developer -> Developer Tools.
3. You should now be able to debug as you normally would.

Example

As live components, we launch the page we started from the parent project in debug mode. We see that the page starts in debug mode without any further action.

We are opening our page by searching that we created in LiveUI. We debug by selecting the lines we want to debug.

React Native

For more information on debugging, you can follow the React Native Debugging

For Android

1. Run your application in the android simulator.
2. Press Ctrl + M and a webpage should open up at http://localhost:8081/debugger-ui
3. Enable Pause On Caught Exceptions for a better debugging experience.
4. Press Ctrl + Shift + I to open the Chrome Developer tools, or open it via View -> Developer -> Developer Tools.
5. You should now be able to debug as you normally would.

For iOS

1. Run your application in the iOS simulator.
2. Press Command + D and a webpage should open up at http://localhost:8081/debugger-ui
3. Enable Pause On Caught Exceptions for a better debugging experience.
4. Press Command + Option + I to open the Chrome Developer tools, or open it via View -> Developer -> Developer Tools.
5. You should now be able to debug as you normally would.

Example

As live components, we launch the page we started from the parent project in debug mode. We see that the page starts in debug mode without any further action.

  

We are opening our page by searching that we created in LiveUI. We debug by selecting the lines we want to debug.

If the debug page you requested is not loaded, you cannot find the page.