ionic: where to see the displayed console log

2019-03-01 18:25发布

问题:

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?

回答1:

To check console log you can use browser after below command :

Step 1: $ionic serve (will run you 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 screen shot.

Step 3: You will get window with HTML elements on right side window and on left your app screen where you can check you designed code at right side.

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

EDIT:

For real-device or emulator or genymotion console log check below steps & screen shots.

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

$ionic cordova run android

Step 2: After successfully launch 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 devices list click on "Inspect" button on right side of that device name(check screen shot for same) will open new window with your device mirror now all console is yours play around this debugger.

Hope this will help you to debug your app.