Document TOP » Products Guide » Monaca for Visual Studio » Monaca for Visual Studio Tutorial » Part 2: Running Monaca Debugger with Monaca for Visual Studio

Part 2: Running Monaca Debugger with Monaca for Visual Studio

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

When developing Monaca apps on your local PC, assuming that your local PC is successfully paired with Monaca Debugger, all changes made to your project files will be pushed into your Monaca Debugger 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 the 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 within Visual Studio IDE.
../../../_images/18.png
  1. Pair the Monaca Debugger with the PC hosting Monaca for Visual Studio. Once logged in, Monaca Debugger should be able to detect the host PC as shown below. Then, click Pair button to start the pairing.
../../../_images/28.png
  1. If your pairing is successful, a project list will appear in Monaca Debugger and the connected debugger will appear in the Monaca panel (see screenshots below as an example). However, if Monaca Debugger is unable to detect the host PC automatically, please refer to troubleshooting the Pairing.
../../../_images/35.png

Monaca Debugger

../../../_images/46.png

Monaca Panel within Visual Studio

  1. In order to run your project in Monaca Debugger, you can just click on the project name in the debugger or click Run in Device button in Monaca panel within Visual Studio. Then, your project should be running in the debugger as shown below:
../../../_images/53.png

Step 2: Real-time Updates between Your Project and Monaca Debugger

  1. Run the project on the debugger.
  2. Let’s 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 each list item from “Rorem Ipsum” to “Monaca and OnsenUI”. Then, save the change.
../../../_images/65.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/74.png

Updated List Item Titles

../../../_images/82.png

Reload Button

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.

Note

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