ionic: where to see the displayed console log

Issue

I am new to ionic I am following ionic framework documents to learn it.

Here is my method's code: hello-ionic.ts

  openActionSheet(){
    let actionSheet=this.actionsheetCtrl.create(
    {
        title: 'Modify your album',
        cssClass: 'page-hello-ionic',
        buttons:[
          {
            text: 'Delete',
            role: 'destructive', //will always sort to be on top
            icon: !this.platform.is('ios') ? 'trash' : null,
            handler: () => {
              console.log('Delete clicked');
            }
          },
          {
          text: 'Play',
          icon: !this.platform.is('ios') ? 'arrow-dropright-circle' : null,
          handler: () => {
            console.log('Play clicked');
          }   
        },
        {
          text: 'Favorite',
          icon: !this.platform.is('ios') ? 'heart-outline' : null,
          handler: () => {
            console.log('Favorite clicked');
          }
        },
        {
          text: 'Cancel',
          role: 'cancel', // will always sort to be on the bottom
          icon: !this.platform.is('ios') ? 'close' : null,
          handler: () => {
            console.log('Cancel clicked');
          }
        }
      ]});
    actionSheet.present();
  }
  

The code works fine. But I want to know that where is console.log() printed. Can anyone help me with that?

Solution

To check the console log you can use browser and run the below command:

Step 1: $ionic serve (will run your app on localhost)

Step 2: In your respective browser (chrome, safari, etc...) where your app is running Right + click and inspect your app as per below screenshot.

Step 3: You will get a window with HTML elements on the right side of your browser window and on the left your app screen.

Step 4: On the right side window, you can find "Console" menu option on the top bar. Click on that you will get your console where you find your app logs or error or warning which ionic generated.

EDIT: Real Device or Emulator debugging

To check real-device or emulator or genymotion console logs follow the below steps & screenshots.

Step 1: Run this command to run your app on real-device or emulator

$ionic cordova run android

Step 2: After successfully launch the app on device or emulator Go to Chrome browser and Right + click and click on "Inspect" and you will get below screen at bottom of your browser.

Step 3: Click on "Remote devices" will show connected real device or emulator list.

From that device list click on "Inspect" button on the right side of that device name(check screenshot for the same) will open a new window with your device mirror now console is yours play around with this debugger.

Hope this will help you to debug your app.

Answered By - CodeChanger