离子：在哪里可以看到显示的控制台日志

Question

我是 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() 打印在哪里。有人可以帮我吗？

Answer 1

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

第 1 步： $ionic serve（将运行您的应用放在本地主机上）

第 2 步： 在您各自的浏览器（chrome、Safari 等...）中，您的应用运行正在 右键 + 单击 并检查您的应用程序，如下图所示。

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

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

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

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

第 1 步： 运行此命令用于运行您在 real-device 或模拟器

上的应用

$ionic cordova run android

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

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

从该设备列表中单击该设备名称右侧的 “检查” 按钮（查看相同的屏幕截图）将使用您的设备镜像打开一个新的 window，现在您可以使用此调试器玩控制台了。

希望这对您调试应用程序有所帮助。

Answer 2

当我使用 Ionic 在移动设备上测试网站时，我通常不希望运行 Remote devices window 因为我需要选择移动设备，然后我的移动设备中有大量标签浏览器 - 然后 inspect 并在移动设备上刷新后 - 它断开连接 ...

为了真正的调试目的，我更喜欢运行ing Ionic 和 -c 一样，然后我在终端 w/o 看到控制台中的任何东西都断开了。

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

Answer 3

if you want to get Live console logs in the ionic application (real device or emulator)

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

Answer 4

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

chrome://inspect:device

您可以看到设备中列出的离子设备，您可以按照 in this video

所述使用检查和检查 console.logs

Answer 5

测试 iOs

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

测试 Android

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

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

Answer 6

请使用网络浏览器查看控制台日志。

运行终端的 ionic serve 命令到运行浏览器中的 ionic。

如果您无法在浏览器中看到控制台日志，只需使用 console.warn...这是查看日志的替代解决方案

离子：在哪里可以看到显示的控制台日志

ionic: where to see the displayed console log

console.log

ionic-framework

测试 iOs

测试 Android