Ionic:在哪里查看显示的控制台日志

9

我是新手,正在学习ionic。我正在按照ionic框架文档学习它。

这是我的方法代码: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() 打印在哪里。有人能帮我吗?

你在开发移动应用还是 Web 应用? - CodeChanger
移动应用程序。但是,我也使用“ionic serve”命令在Web上进行检查。 - Riddhi
6个回答

19

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

步骤1: $ionic serve(将在本地主机上运行您的应用程序)

步骤2: 在您的相应浏览器(chrome、safari等...)中,您的应用程序正在运行的位置,右键单击并根据以下截图检查您的应用程序。

enter image description here

步骤3: 您将获得一个窗口,在浏览器窗口的右侧显示HTML元素,在左侧显示应用程序屏幕。

enter image description here

步骤4: 在右侧窗口上,您可以在顶部菜单栏中找到“Console”菜单选项。单击它,您将获得控制台,在其中找到ionic生成的应用程序日志错误警告

enter image description here

enter image description here

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

要检查真实设备模拟器genymotion上的控制台日志,请按照以下步骤和截图操作。

步骤1: 运行此命令,在真实设备模拟器上运行应用程序

$ionic cordova run android

第二步:成功在设备或模拟器上启动应用程序后,进入Chrome浏览器并进行右键+单击,然后单击"检查",您将在浏览器底部得到以下屏幕。

enter image description here

第三步:单击"远程设备"将显示连接的实际设备或模拟器列表。

从该设备列表中,单击该设备名称右侧的"检查"按钮(请参阅屏幕截图)将打开一个新窗口,其中包含您的设备镜像,现在控制台归您使用,随意调试此调试器。

enter image description here

enter image description here

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


还有一个问题。我如何在手机上查看日志? - Riddhi
在哪个设备上,Android 还是 iOS? - CodeChanger
你有在控制台中检查日志级别吗?将其从“默认级别”更改为所有级别。 - Itzik Gili
可能已过时。默认情况下,Chrome浏览器当前无法找到远程设备。 如果找不到,请在浏览器URL中键入以下内容-> chrome://inspect/#devices - Andy

7

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

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

5

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

chrome://inspect:device

您可以在设备列表中看到Ionic设备,并按照此视频中的说明使用检查器来检查控制台日志。


2

iOS测试

  1. 运行ionic capacitor run ios --livereload,这将显示一个iPhone模拟器选项列表,请选择您想要的选项并打开它。
  2. 在模拟器中打开应用程序后,您需要打开Safari浏览器,然后在顶部选项中选择develop->simulator->localhost,这将打开一个窗口,其中将显示您想要的日志。

Android测试

  1. 运行ionic capacitor run android --livereload,这将显示一个Android设备模拟器列表(请确保已正确安装、更新和配置了Android Studio和adb),选择您想要的选项并打开它。

  2. 在模拟器中打开应用程序后,您需要打开Google Chrome浏览器,然后转到chrome://inspect/#devices,在底部列表中找到您的模拟或物理设备(有时可能需要几分钟才会出现),然后单击inspect。之后,控制台窗口将打开,您将能够看到所有日志。

注意:已在Ionic 5上完成并测试。


2

当我使用Ionic在移动设备上测试网站时,通常不喜欢运行“Remote devices”窗口,因为我需要选择手机,然后在我的移动浏览器中打开大量标签 - 然后进行检查,并在移动设备上刷新后断开连接...

为了进行真正的调试,我更喜欢这样运行Ionic:-c,然后我可以在终端中看到控制台而不会断开任何连接。

Original Answer翻译成"最初的回答"

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

0
请使用网络浏览器查看控制台日志。
通过终端运行ionic serve命令,在您的浏览器中运行ionic。
如果您无法在浏览器中看到控制台日志,只需使用console.warn即可... 这是一个替代方案以查看日志。

在浏览器中查看控制台日志:Chrome:https://developer.chrome.com/docs/devtools/console/log/ - Firefox:https://developer.mozilla.org/en-US/docs/Tools/Web_Console - Safari:https://developer.apple.com/safari/tools/ - Klemens Zleptnig

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接