Part 2: Running Monaca Debugger with Monaca Localkit

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 (running Monaca Localkit), assuming that the local PC is successfully paired with Monaca Debugger, all changes made to project files will be pushed into Monaca Debugger as soon as you save those changes.

Before Getting Started

Please install Monaca Debugger on your device.

Please refer to Monaca Debugger Installation for other platforms.

Step 1: Running a Project on Monaca Debugger

  1. Pair the Monaca Debugger with the PC hosting Monaca Localkit. Please refer to Pairing and Debugging.

  2. If your pairing is successful, a project list will appear in Monaca Debugger and the connected debugger will appear in the Monaca Localkit (see screenshots below as an example). However, if you failed the pairing, please refer to Troubleshoot the Pairing.

    Monaca Debugger & Monaca Localkit

  3. Then, run the project on Monaca Debugger. To do this, you can either click on the project name in Monaca Debugger or click Run button in Monaca Localkit.

  4. Now the screen on your device should look like a screenshot below. Use Back button within Debugger Menu button to go back to the Project List screen.

  5. Try and test your project by adding a new memo. If a new memo appears, your project is running properly.

Step 2: Real-time Update between Monaca Localkit and Monaca Debugger

  1. Run the project on the debugger.
  2. Let’s make some changes in a project file and save them (read more on Edit Project Files). For example, try to change the title of the application in index.html file or the style of page in style.css file. Please notice that, Live Reload toggle button is enable by default. This allows the real-time updates between the debugger and Monaca Localkit. Turn this off if you want to disable this real-time update.

  3. The saved changes should be updated simultaneously to your app in Monaca Debugger on your device. You can also click on Refresh button to retrieve the latest updates of your app in case the changes are not reflected.

Step 3: Debug the project with Monaca Debugger

Monaca Localkit allows you to debug your application with Chrome DevTools using USB connection. Before starting this USB debugging, please make sure to enable USB Debugging option on your device with appropriate version of Monaca Debugger.

  1. Run the project on the debugger.
  2. From the Debugger Menu button, click on Inspector button (see the screenshot below).

  3. The Chrome DevTools should be opened in the host PC. Then, you can start inspecting and debugging your app right away. For more information, please refer Inspecting and JavaScript Debugging with Chrome DevTools. However, if the Chrome DevTools failed to open, please refer to Inspector Isn’t Loaded.

You can also open the Chrome DevTools directly from Monaca Localkit. Select a project you want to debug and then click on Inspector button of the paired debugger (see the screenshot below).
Please refer to Debugger Functionalities to explore the other functions provided by Monaca Debugger.
You can also use USB debugging with Monaca CLI. Please refer to USB Debugging with Monaca .

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. Enjoy developing with Monaca!