ionic: where to see the displayed console log

问题

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 and run 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 screenshot.

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

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 & 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 devices list click on "Inspect" button on right side of that device name(check screenshot for the same) will open a new window with your device mirror now all console is yours play around this debugger.

Hope this will help you to debug your app.

回答2:

When I test websites on mobile using Ionic, I usually prefer not to run the Remote devices window as I need to choose the mobile, then tons of tabs in my mobile browser - then inspect and after a refresh on mobile - it disconnect ...

For real debugging purposes, I prefer running Ionic with -c like so, and then I see the console in the terminal w/o anything being disconnected.

my-server$ ionic serve -c --no-open --address 192.168.1.112

[INFO] Development server running!
       Local: http://192.168.1.112:8100    
       Use Ctrl+C to quit this process

Browsing in my mobile device to: http://192.168.1.112:8100

logs will appear in terminal where I run Ionic cli:

[app-scripts] [09:49:42]  console.log: Angular is running in the development mode. Call enableProdMode() to enable the production
[app-scripts]             mode.
[app-scripts] [09:49:42]  console.log: cookieEnabled: true

来源：https://stackoverflow.com/questions/49316634/ionic-where-to-see-the-displayed-console-log

标签

ionic-framework

console.log