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

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.

In this page, we describe a step-by-step instruction of how to:

  • run the project on Monaca Debugger.
  • get real-time updates between Monaca Localkit and Monaca Debugger.
  • start debugging the project with Chrome DevTools.

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. 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.
../../../_images/114.png

Monaca Debugger

../../../_images/216.png

Monaca Localkit

  1. 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.
  2. 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.
../../../_images/37.png
../../../_images/55.png
  1. Try and test your project by adding a new memo. If a new memo appears, your project is running properly.
../../../_images/46.png

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 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.
../../../_images/74.png
  1. 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.
../../../_images/63.png

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).
../../../_images/81.png
  1. 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 are failed to open, please refer to Inspector Isn’t Loaded.
../../../_images/92.png

Note

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).

../../../_images/102.png

Note

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