ionic: where to see the displayed console log - ionic-framework

Question

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?

Answer 1

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.

Answer 2

if you want to get Live console logs in the ionic application (real
device or emulator)
ionic cordova run android --livereload --consolelogs --serverlogs

Answer 3

you can use chrome inspect to get console logs while debugging with emulator.
open chrome and enter following :
chrome://inspect:device
you can see ionic device listed in the devices and you can use inspect and check the console.logs as described in this video

Answer 4

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

Answer 5

Test on iOs
Run ionic capacitor run ios --livereload, this will show you a list with the iPhone emulators options, choose the one that you want and it will be opened
After the application be opened in the emulator you have to go and open the Safari browser, then in the top options go-to develop->simulator->localhost and that will open a window which will show you the logs that you want
Test on Android
Run ionic capacitor run android --livereload this will show you a list with the Android device emulators that you have created on Android Studio (be sure to have Android Studio and adb properly installed, updated and configurated), choose the one that you want and it will be opened
After the application be opened in the emulator you have to go and open the Google Chrome browser, then go to chrome://inspect/#devices and find your emulated or physical device in the bottom list (some times could take a few minutes to appear) and then click on inspect after that, a console window will be open and you will be able to see all your logs
NOTE: This has been done and tested on Ionic 5

Answer 6

Please use web browser to see the console logs.
Run the ionic serve command by terminal to run the ionic in your browser.
If you couldn't see the console logs in your browser, simply use console.warn... it's a alternative solution to see the logs