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:
Please install Monaca Debugger on your device.
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
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.
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.
Try and test your project by adding a new memo. If a new memo appears, your project is running properly.
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.
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.
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.
From the Debugger Menu button, click on Inspector button (see the screenshot below).