Monaca Docs
  • Monaca
  • Create Your First App
  • Release Notes and Updates
    • Privacy Manifest Requirement for iOS Apps
    • Plugin uses-permission Tag Deduplication Feature
    • iOS Monaca Debugger Discontinuation & Alternative Features
    • Error submitting to iOS App Store (ITMS-90165)
    • Build error in cordova-custom-config
    • Cordova 11 changes
    • Cordova 10 changes
    • Cordova 9 changes
    • New Monaca CLI and Localkit
    • Migration from Cordova to Capacitor
  • Product Guides
    • Monaca Development Overview
    • Monaca Cloud IDE
      • Overview
      • Features in the Monaca Cloud IDE
      • Integrated Terminal
      • Editor Shortcuts
      • Project Dependencies
        • File and Folder Structure
        • JS/CSS Components
        • Cordova Plugins
        • Custom Cordova Plugins
      • Version Control
        • Introduction
        • GitHub Integration
        • Git SSH Integration
      • Monaca CI
        • Overview
        • Deploy Services
        • Deploy to Appetize.io
        • Deploy to DeployGate
        • Deploy to Firebase
      • Build
        • Building for iOS
          • Building an iOS App
          • Build Settings between Monaca and Xcode
        • Building for Android
        • Building for Electron
          • Building on Windows
        • Building for PWA
        • Building for Windows
        • Build Environment Settings
        • Common Build and Application Upload Errors
        • Build History
      • Distribution
        • App Store Distribution
          • App Store Connect Guide
          • iOS App Upload Feature
        • Google Play Distribution
        • Amazon Appstore Distribution
        • Non-market App Distribution
      • Download App Package
      • Tutorial
    • Monaca Localkit
      • Overview
      • Pairing and Debugging
      • Remote Building and Publishing
      • Troubleshooting Guide
      • Tutorial
    • Monaca CLI
      • Overview
      • Monaca CLI Commands
      • Pairing and Debugging
      • Project Dependencies
        • File and Folder Structure
        • JS/JSS Components
        • Cordova Plugins
        • Custom Cordova Plugins
      • Remote Building and Publishing
      • Troubleshooting Guide
      • Tutorial
    • Monaca Debugger
      • Functionalities
      • Installation
        • Monaca Debugger for Android
        • Monaca Debugger for iOS
        • Monaca Debugger for Android Emulator
      • Usage
      • Custom Build Debugger for iOS
      • iOS App Simulator Build
      • Troubleshooting Guide
      • Tutorials
    • Team Dashboard
    • Quick Viewer
    • Migrating from Other Platforms
      • Key Points
      • Cloud IDE preview function settings
      • Migrating from Angular
      • Migrating from Ionic
      • Migrating from React
      • Migrating from Vue
      • Migrating from PhoneGap
        • Key Differences
        • Guide for PhoneGap Build Users
        • Guide for PhoneGap CLI Users
        • Guide for PhoneGap Desktop App Users
      • Migrating from Telerik
  • Build App
    • Build for iOS
      • Creating a Private Key and CSR
      • Creating a Certificate
      • Updating Provisioning Profiles
  • Tutorials
    • Monaca Cloud IDE Tutorial
      • Part 1: Starting a Project
      • Part 2: Running Monaca Debugger with Monaca Cloud IDE
      • Part 3: Building a Monaca App
      • Part 4: Publishing a Monaca App
    • Monaca Localkit Tutorial
      • Part 1: Starting a Project
      • Part 2: Running Monaca Debugger with Monaca Localkit
      • Part 3: Building a Monaca App
      • Part 4: Publishing a Monaca App
    • Monaca CLI Tutorial
      • Part 1: Starting a Project
      • Part 2: Running Monaca Debugger with Monaca CLI
      • Part 3: Building a Monaca App
      • Part 4: Publishing a Monaca App
    • Electron Tutorial
      • How to Use a NPM Package
      • How to Use a Web API
    • Barcode Scanner Plugin
    • Cordova SQLite Storage Plugin
    • Cordova Google Analytics Plugin
    • Cordova Firebase Plugin
    • Cordova In-app Purchase Plugin
    • Cordova AppVersion Plugin
    • Cordova Ionic Keyboard Plugin
    • Cordova Social Sharing Plugin
    • NIFCLOUD mobile backend
    • Phonegap Push Plugin
  • API Reference
    • Monaca API
      • Monaca Cloud & Remote Build API Guide
      • Utilities
    • Core Cordova Plugins
      • Cordova 11.0
        • Battery Status Plugin
        • Camera Plugin
        • Device Plugin
        • Device Motion Plugin
        • Device Orientation Plugin
        • Dialogs Plugin
        • File Plugin
        • Geolocation Plugin
        • InAppBrowser Plugin
        • Media Plugin
        • Media Capture Plugin
        • Network Information Plugin
        • Splashscreen Plugin
        • Vibration Plugin
        • StatusBar Plugin
      • Cordova 10.0
        • Battery Status Plugin
        • Camera Plugin
        • Device Plugin
        • Device Motion Plugin
        • Device Orientation Plugin
        • Dialogs Plugin
        • File Plugin
        • Geolocation Plugin
        • InAppBrowser Plugin
        • Media Plugin
        • Media Capture Plugin
        • Network Information Plugin
        • Splashscreen Plugin
        • Vibration Plugin
        • StatusBar Plugin
        • Whitelist Plugin (Android Only)
      • Cordova 9.0
        • Battery Status Plugin
        • Camera Plugin
        • Contacts Plugin
        • Device Plugin
        • Device Motion Plugin
        • Device Orientation Plugin
        • Dialogs Plugin
        • File Plugin
        • File Transfer Plugin
        • Geolocation Plugin
        • Globalization Plugin
        • InAppBrowser Plugin
        • Media Plugin
        • Media Capture Plugin
        • Network Information Plugin
        • Splashscreen Plugin
        • Vibration Plugin
        • StatusBar Plugin
        • Whitelist Plugin (Android Only)
    • Third-party Cordova Plugins
      • Advanced HTTP Plugin
      • PhoneGap BarcodeScanner Plugin
      • Cordova Custom Config Plugin
      • DatePicker Plugin
      • Share Plugin (Android)
      • WebIntent Plugin (Android)
    • Monaca Power Plugins
      • Monaca HTML5 Resource Encryption
      • Monaca In-App Updater
      • Monaca Secure Storage
      • Barcode Scanner Plugin
      • Android build memory size setting
    • Service Integration
      • Repro
      • AppsFlyer
    • Configuration Files
      • Android
        • Android Configuration
        • config.xml
        • AndroidManifest.xml
      • iOS
        • iOS Configuration
        • config.xml
        • MonacaApp-Info.plist
  • Samples & Tips
    • Sample Apps
      • AdMob
      • Twitter Single Sign-on App
      • Facebook Single Sign-on App
      • Flickr
      • TODO App
      • BirthYear App
      • Break the Bricks
      • Train Catalog App
      • Omikuji Fortune Telling App
      • Clock App
      • Memo Application
      • RSS Reader App
      • Hello World App
    • Tips & Tricks
      • Playing Sound and Music
      • Control the Splash Screen
      • Using Database
  • Features
    • Push Notification
    • SNS Authentication
    • Database
  • FAQ
    • General
    • IDE
    • Build
    • Release
    • Subscription
      • How to Use Activation Code
    • Application
    • Usage
    • Debugger
  • Supported Environments
  • Trouble Shooting
    • Preview Log repeats to reload (Vue packages version mismatch error)
  • Monaca Product Website
  • 日本語
Powered by GitBook
On this page
  • Monaca Debugger with Monaca Cloud IDE
  • Monaca debug panel
  • USB debugging

Was this helpful?

  1. Product Guides
  2. Monaca Debugger

Usage

PreviousMonaca Debugger for Android EmulatorNextCustom Build Debugger for iOS

Last updated 1 year ago

Was this helpful?

On this page, we will describe how to use Monaca Debugger with Monaca Cloud IDE and Monaca local development tools Monaca Localkit and Monaca CLI.

Before starting, please install Monaca Debugger on your device or emulator. Please refer to for more information.

Monaca Debugger with Monaca Cloud IDE

There are 2 main debugging functionalities that can be used to debug Monaca apps with the Monaca Cloud IDE:

  • Monaca Debug Panel: DOM inspection and console debugging.

  • USB Debugging: DOM inspection, console and JavaScript debugging.

Monaca debug panel

A popular web debugging tool, , is embedded in the debug panel of the Monaca Cloud IDE. This tool allows you to debug your app using console debugging and DOM inspection.

To start debugging your app by using Monaca Debugger with Monaca Cloud IDE, follow these instructions:

  1. Open a project in the Monaca Cloud IDE.

  2. Run the project in the Monaca Debugger.

  3. Make sure your device is connected with the IDE. If your device appears in the debug panel, it is successfully connected to the IDE (see the screenshot below). Otherwise, please refresh the IDE or debugger until the connection is successfully made.

4. After your device is connected to the IDE, you can start debugging your app.

Console debugging

Console API allows you to write and display messages to the console using Javascript.

Here are some commonly used commands to log text in the console:

  • console.log(): displays a message to the console.

  • console.debug(): displays a message on the debug level (you can see

    the message in the debug tab).

  • console.warn(): displays a message with a yellow warning icon.

Here is an example of using the console API:

  1. Copy and paste the following code to the index.html file.

    <!DOCTYPE HTML>
    <html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no">
        <script src="components/loader.js"></script>
        <link rel="stylesheet" href="components/loader.css">
        <link rel="stylesheet" href="css/style.css">
        <script>
            var a = 1;
            var b = 2;
    
            function debug(){
                var c = a + b;
                console.log("debug() function is executed!");
                console.log("executed! variable c is " + c);
            }
    
            debug();
        </script>
    </head>
    <body>
        <h1>Hello World!</h1>
    </body>
    </html>

2. Save the code and connect the Monaca Debugger with the Monaca Cloud IDE. Run the project in the Monaca Cloud IDE. Now you can see the messages on the debug panel in the Monaca Cloud IDE and in the app log inside the Monaca Debugger.

3. The debug panel allows you to see the error log of your app as well.

DOM inspection

DOM (Document Object Model) inspection allows you to:

  • view the DOM structure of the currently active page.

  • modify the DOM structure as well as the CSS of the page with live

    update.

USB debugging

With USB debugging, you can:

  • Console debugging: use the console to display messages and set debugging

    sessions.

  • DOM inspection: view and modify DOM structures with live updates.

  • JavaScript debugging: profile JavaScript performance, set

    breakpoint and use the execution control.

There are two ways to implement USB debugging depending on what kind of device you use:

Prerequisites for USB debugging with Monaca

Platform

iOS

Android

Monaca Debugger

Install driver

On Mac OS X, the necessary drivers should be already installed. The system will automatically find the device without any installation.

On Windows, you need to check the device manufacturer to find an appropriate driver for the device.

Enabling USB debugging

Enable the web inspector on an iOS device:

  • Go to Settings ‣ Safari

  • Scroll down and select Advanced.

  • Switch on Web Inspector.

Enable USB debugging on an Android device:

  • Go to Settings ‣ More

  • Select Developer options.

  • Tick USB Debugging.

Trust connection

The connected device should be displayed if you trust the host computer. Please trust the computer in order to get connected.

The connected device should be displayed if you trust the host computer. Please trust the computer in order to get connected.

Safari remote debugging (for iOS and Mac only)

  1. Connect your iOS device to your Mac via a USB cable.

  2. Run your Monaca project in its custom built debugger.

  3. Open Safari app and go to the Develop menu. Your iOS device’s name should show in the list. You can see the available pages of the Monaca app from the submenu of the device. Select the one you want to open.

Chrome remote debugging (for Android with Google Chrome browser)

  1. Connect your Android device to your PC via a USB cable.

  2. Run your Monaca project in the Monaca Debugger.

  3. In the Chrome address bar, enter chrome://inspect/.

  4. The Devices page appears as shown below. Your connected Android device should show there. Click inspect.

See Also:

For more information about console API, please refer to .

Debug panel in the Monaca Cloud IDE
App log in the Monaca Debugger

For more information, please refer to .

If you are using an iOS device, you can use the .

If you are using an Android device, you can use the .

only

Either store version or custom built

You are required to do some setups before using USB debugging with Monaca. Please refer to .

4. The web inspector window will appear. In this window, you can for example use timing HTTP requests, profile JavaScript and manipulate the DOM tree. In order to learn how to use the web inspector, please refer to .

You are required to do some setups before using USB debugging with Monaca. Please refer to .

5. The Chrome inspection page should open. Now you can start debugging your Monaca app. For more information, please refer to .

Console API references
DOM Inspection and Style Editing
Safari Web Inspector
How to Use Chrome DevTools
Functionalities
Installation
Debugger Troubleshooting Guide
Safari remote debugging
Chrome remote debugging
Prerequisites for USB debugging with Monaca
Prerequisites for USB debugging with Monaca
Custom built Monaca Debugger
Monaca Debugger
How to Install Monaca Debugger
Weinre (WEb INspector REmote)
Debug panel inside the Monaca Cloud IDE
DOM inspection inside the debug panel