Document TOP » Products Guide » Monaca Cloud IDE » Monaca Cloud IDE Tutorial » Part 2: Running Monaca Debugger with Monaca Cloud IDE

Part 2: Running Monaca Debugger with Monaca Cloud IDE

Monaca Debugger is a powerful application for testing and debugging your Monaca applications on real devices in real time.

When developing Monaca apps in Monaca Cloud IDE, assuming that the Internet connection is available, all changes made to your project files will be pushed into your Monaca Debugger in real-time as soon as you save those changes.

Before Getting Started

Please install Monaca Debugger on your device.

App Store Logo
Google play logo

Note

Please refer to Monaca Debugger Installation for other platforms.

Step 1: Running a Project on Monaca Debugger

  1. Launch Monaca Debugger app and sign in using your Monaca account information. Make sure you are using the same account information you use for Monaca Cloud IDE.
../../../_images/11.png
  1. Then, a project list will appear. All Monaca Cloud IDE projects are listed under Monaca.io Projects. To run a project, you can just click on the project name in Monaca Debugger or click Run on Device button in Monaca Cloud IDE menu.
../../../_images/21.png
  1. Then, your project should be running in the debugger. To go back to the Project List screen, go to Debugger Menu and click Back button.
../../../_images/34.png
../../../_images/6.png
  1. Try and test your project by adding/deleting a memo.
../../../_images/4.png

Step 2: Real-time Updates between Monaca Cloud IDE and Debugger

By now, you are able to run your Monaca project on the debugger. Next, let’s try to edit this project and see how it is reflected on the debugger.

  1. Run the project on the debugger.
  2. On Monaca Cloud IDE, make some changes in a project file and save them (please refer to Edit Project Files). In this example, we edit index.html and change the title of page from “Monaca Memo” to “My Memo”. Then, save the change.
../../../_images/71.png
  1. The saved changes will be sent to Monaca Debugger on your device. You can also click on Reload button to retrieve the latest updates of your app in case the changes are not reflected.
../../../_images/51.png

Updated Page Title

../../../_images/8.png

Reload Button

Note

Please refer to Functionalities to explore the other functions provided by Monaca Debugger.

That’s it! That’s how easy it is to use Monaca Debugger. Please try to make more changes to your project and see how it runs on the debugger.

PRACTICE MAKES PERFECT! Enjoy developing with Monaca!