ionic：在哪里查看显示的控制台日志答案

【问题标题】：ionic: where to see the displayed console logionic：在哪里查看显示的控制台日志
【发布时间】：2018-08-25 06:40:41
【问题描述】：

我是 ionic 新手，我正在关注 ionic framework documents 来学习它。

这是我的方法的代码：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();
  }

代码运行良好。但我想知道console.log() 打印在哪里。谁能帮我解决这个问题？

【问题讨论】：

您正在开发移动应用程序或网络应用程序？
移动应用。但是，我也在使用ionic serve 命令在网络中检查它。

标签： ionic-framework console.log

【解决方案1】：

在 iOS 上测试

运行ionic capacitor run ios --livereload，这将显示一个包含 iPhone 模拟器选项的列表，选择你想要的，它将被打开
在模拟器中打开应用程序后，您必须打开 Safari 浏览器，然后在顶部选项中转到 develop->simulator->localhost，这将打开一个窗口，显示您想要的日志

在安卓上测试

运行 ionic capacitor run android --livereload 这将显示您在 Android Studio 上创建的 Android 设备模拟器的列表（确保已正确安装、更新和配置 Android Studio 和 adb），选择您想要的并安装它将被打开
在模拟器中打开应用程序后，您必须打开 Google Chrome 浏览器，然后转到 chrome://inspect/#devices 并在底部列表中找到您的模拟或物理设备（有时可能需要几分钟才能出现）然后点击inspect之后，控制台窗口将打开，您将能够看到所有日志

注意：这已在 Ionic 5 上完成并测试

【讨论】：

【解决方案2】：

您可以在使用模拟器进行调试时使用 chrome inspect 来获取控制台日志。打开 chrome 并输入以下内容：

chrome://inspect:device

您可以看到设备中列出的离子设备，您可以按照in this video 的描述使用检查和检查控制台日志

【讨论】：

【解决方案3】：

要检查控制台日志，您可以使用浏览器并运行以下命令：

第 1 步： $ionic serve（将在 localhost 上运行您的应用）

第 2 步：在您运行应用的相应浏览器（chrome、safari 等）中右 + 单击 和按照以下屏幕截图检查您的应用。

第 3 步：您将在浏览器窗口的右侧和应用程序屏幕的左侧看到一个带有 HTML 元素的窗口。

第 4 步： 在右侧窗口的顶部栏中，您可以找到“控制台”菜单选项。单击该按钮，您将在控制台中找到您的应用 logs 或 error 或 warning 这是 ionic 生成的。

编辑： 真实设备或模拟器调试

要检查real-device 或emulator 或genymotion 控制台日志，请按照以下步骤和屏幕截图。

第 1 步：运行此命令以在真机或模拟器上运行您的应用

$ionic cordova run android

第2步：在设备或模拟器上成功启动应用程序后转到Chrome浏览器并右键 + 单击并单击 “检查”，您将看到浏览器底部的屏幕下方。

第 3 步：点击“远程设备”将显示已连接的真实设备或模拟器列表。

从该设备列表中点击该设备名称右侧的“检查”按钮（检查屏幕截图是否相同）将打开一个包含您设备的新窗口镜像现在控制台是你的调试器。

希望这将帮助您调试您的应用程序。

【讨论】：

还有一个问题。如何在手机上看到登录
在 Android 或 iOS 的哪个设备上？
你在控制台查看日志级别了吗？将其从“默认级别”更改为全部。
可能已过时。目前在 chrome 中默认找不到远程设备。如果找不到，请在浏览器 url 中输入 -> chrome://inspect/#devices

【解决方案4】：

如果您想在 ionic 应用程序中获取实时控制台日志（真实设备或模拟器）

ionic cordova run android --livereload  --consolelogs --serverlogs

【讨论】：

【解决方案5】：

当我使用 Ionic 在移动设备上测试网站时，我通常不喜欢运行 Remote devices 窗口，因为我需要选择移动设备，然后是移动浏览器中的大量选项卡 - 然后是 inspect，然后在移动设备上刷新- 它断开连接...

出于真正的调试目的，我更喜欢像这样使用 -c 运行 Ionic，然后我看到终端中的控制台没有任何断开连接。

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

在我的移动设备中浏览至：http://192.168.1.112:8100

日志将出现在我运行 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

【讨论】：